Babel的目的就是让你可以使用最新的标准来开发,然后把兼容的问题交给它来完成.比如我如何在使用ES6的语法写完之后将其转换为ES5满足通用性呢?
先用这个最常用的Babel的用法来引入吧.
一、首先在项目中新建一个package.json文件,也可以使用 npm init 自动生成.
这里简单提一下,没有fq的话建议使用国内的淘宝镜像,速度会快很多,特别是类似Bable这样安装的内容比较多的情况,使用下列命令即可
npm install -g cnpm --registry=https://registry.npm.taobao.org
二、 安装babel的命令行工具,babel-cli这里安装到开发环境,之后就可以使用babel相关的命令了.
cnpm install babel-cli -D
三、安装完成babel-cli之后需要所需编译的预设(preset), 这里我们用到了ES6
cnpm i babel-preset-es2015 -D
但是在安装完成之后会发现有一个不推荐提示,
deprecate babel-preset-es2015@* ???? Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!
现在已经不提倡使用以上的方法了,而是
cnpm i babel-preset-env -D
现在东西都装好了,下面开始使用工具吧.
四、新建一个.babelrc用于配置预设presets
{
"presets" :["env"]
}
五、除了预设之外还有插件plugin,
比如我在代码中使用了export和import,如果浏览器不支持这个用法便会报错.可以使用插件来编译为浏览器可兼容的语法.
{
"plugins": [
"transform-es2015-modules-umd"
]
}
当然也需要先 cnpm i babel-plugin-transform-es2015-modules-umd -D 安装到开发环境
六、在package.json中你可以看到已经将之前安装的模块添加到devDependencies中了.
七、在script中添加一个脚本
一般来说会将一个js文件夹下的所有js文件进行编译,使用方式就是babel <dirname> -d <new dirname>, 还有一个很实用的小技巧就是使用-w进行文件监视,避免了重复手动编译的过程.
"scripts": {
"build": "babel js -w -d lib"
}
八、执行 npm run build ,将js文件夹中的js代码编译到lib文件夹中.
九、将其他地方的文件(比如我的index.html中的js)路径修改定位到编译后的文件就可以使用啦!!
在体验了babel之后,最大的体会就是,
写自己的代码,让babel去转换吧!
