第1节:ES6的开发环境搭建

第1节:ES6的开发环境搭建

1,建立html文件
2,引用js文件,注意是dist目录下的文件
3,编写js文件,很简单,作一个a变量的声明,并用console打印出来

let a = 1;
console.log(a);

let是ES6的一种声明方式,接下来把这个ES6的语法文件自动编程成ES5的语法文件。

4,初始化项目:在安装Babel之前,需要npm init -y命令来初始化
-y表示全部默认同意,就不用一次次按回车。命令执行完成后,会在项目根目录下生产package.json文件(可以根据自己需要进行修改,比如修改name值)。

{
  "name": "ES6",
  "version": "1.0.0",
  "description": "这是es6教程代码",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "xsm",
  "license": "ISC"
}

5,全局安装babel-cli

npm install -g babel-cli

6,试一下是否能成功进行转换:

babel src/index.js -o dist/index.js

7,本地安装babel-preset-es2015和babel-cli

npm install --save-dev babel-preset-es2015 babel-cli

8,安装完成后package.json多了

"devDependencies": {
  "babel-cli": "^6.26.0",
  "babel-preset-es2015": "^6.24.1"
}

9,在根目录下新建.babelrc文件,并写下列代码:

{
  "presets":[
    "es2015"
  ],
  "plugins": []
}

10,建立完成后载输入转换命令,这次ES6成功转化为ES5的语法

babel src/index.js -o dist/index.js

11.简化转化命令:打开package.json,修改成这样

"scripts": {
  "build": "babel src/index.js -o dist/index.js"
},

修改好后就可以使用npm run build进行转换了。

不过我用的webstorm,不是VSCode,所以有直接在webstorm上设置ES6写法和自动转化成ES5的方法,用webstorm的小伙伴下面有网址可以看着改哦!

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Judian6974/article/details/80352995
个人分类: ES6
想对作者说点什么? 我来说一句

java并发编程

2018年03月22日 83B 下载

第3章 MAXPLUS软件的使用(第1节

2010年05月15日 4.96MB 下载

java介绍第1节

2013年10月02日 331KB 下载

ES6入门 阮一峰 第二版

2018年03月01日 3.91MB 下载

没有更多推荐了,返回首页

不良信息举报

第1节:ES6的开发环境搭建

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭