共计 1701 个字符,预计需要花费 5 分钟才能阅读完成。
一、介绍
ECMAScript 6(ES6)的发展速度非常之快,但现代浏览器对 ES6 新特性支持度不高,所以要想在浏览器中直接使用 ES6 的新特性就得借助别的工具来实现。
Babel 是一个广泛使用的转码器,babel 可以将 ES6 代码完美地转换为 ES5 代码,所以我们不用等到浏览器的支持就可以在项目中使用 ES6 的特性。
二、使用
1、新建工程文件夹这里起名叫做 es6, 然后在里面创建两个文件夹分别为 src、js 如下图:(src 为待转换 es6 js 存放目录,js 为编译完成后的 es5 js 存放目录)
2、在 src 目录下新建一个 js 文件(这里起名叫做 index.js),里面输入 es6 的代码:
let b = 1;
console.log(b);
const name = '张三';
console.log(name);
let c = '成功了么';
setTimeout(() => {console.log(c)
}, 200)
3、初始化项目
1)打开终端命令提示符 进入工程目录(这里也就是 es6 文件夹)输入如下命令初始化项目:(这里用的 npm, 国内用户建议用 cnpm 不懂得可以移步至淘宝镜像使用)命令执行完成后会在根目录生成 package.json 文件。
npm init -y //- y 是指表示全部默认,不需要一个一个敲回车
2)打开我们可以看到里面的内容(可以根据自己的需要进行修改,比如我们修改 name 的值。)
{
"name": "es6",
"version": "1.0.0",
"description": "","main":"index.js","scripts": {"test":"echo \"Error: no test specified\" && exit 1"},"author":"",
"license": "ISC"
}
三、全局安装 babel 工具
1)在终端中输入以下命令,
npm install -g babel-cli
2)虽然已经安装了 babel-cli,只是这样还不能成功进行转换,我们还需要安装转换包才能成功转换。
npm install --save-dev babel-preset-es2015 babel-cli
3)安装完成后,我们可以看一下我们的 package.json 文件,已经多了 devDependencies 选项。
{
"name": "es6",
"version": "1.0.0",
"description": "","main":"index.js","scripts": {"test":"echo \"Error: no test specified\" && exit 1","dev":"babel src --out-dir js"},"author":"",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-es2015": "^6.24.1"
}
}
四、新建.babelrc
在项目根目录新建 (.babelrc) 文件输入如图所示代码:
{
"presets":["es2015"],
"plugins":[]}
五、现在你可以尽情转换了
终端输入如下命令:(babel 待转换路径 / –out-dir 转换后路径 /)
我们这里是从 src 转换到 js 目录下
babel src --out-dir js
现在我们 js 目录下面就生成了编译后的 js 我们打开看一下 (大功告成)
是不是每次这样输入一大串命令感觉很麻烦?
通过修改 package.json 里面的别名来实现编译 修改(“dev”:“babel src –out-dir js”)
{
"name": "es6",
"version": "1.0.0",
"description": "","main":"index.js","scripts": {"test":"echo \"Error: no test specified\" && exit 1","dev":"babel src --out-dir js"},"author":"",
"license": "ISC"
}
以后你只需要如下命令就可以编译了(是不是感觉很简单呢)
npm run dev