近期，项目经理的一些需求，打包APP放在电视上，电视的安卓版本不支持大量es6的写法，我也很无奈…………
考虑买个杯垫，明确一下需求啦
15297359276259471b8ce6a.jpg
“程序员必备神器之板砖杯垫”有了这个杯垫，需求变得越来越清晰明了，PM的话也少了很多。
好啦，先说下这个babel是什么吧！！！
babel.js
简而言之，babel就可以让我们当前的项目中随意的使用这些最新的ES6和ES7的语法，说白啦，就是把各种JavaScript千奇百怪的写法，统统转为浏览器可以好认的写法。
1.
首先，要安装下node，新建一个文件夹，作为babel的文件，然后 npm init （相关信息直接一路回车，设置默认），最后生成package.json文件
2.
编写.babelrc文件，这个是必须的，第一次没有配置，没有一点用，基本格式如下
{
"presets": [], //设置转码规则
"plugins": [] //设置插件
}
window下不允许直接右键创建没有文件名的文件，所以创建的使用命令行去创建，在当前目录下，使用命令行
type nul>.babelrc
就ok啦。
官方还提供了别的规则，使用直接安装，进行配置
# ES2015转码规则
npm install --save-dev babel-preset-es2015
# react转码规则
npm install --save-dev babel-preset-react
# ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
npm install --save-dev babel-preset-stage-0
npm install --save-dev babel-preset-stage-1
npm install --save-dev babel-preset-stage-2
npm install --save-dev babel-preset-stage-3
然后呢，把安装好的规则写入.babelrc
{
"presets": [
"es2015"
],
"plugins": []
}
3
安装babel-cil工具，利用命令行转码，命令如下
# 全局安装
npm install --global babel-cli
# 在项目文件中安装
npm install --save-dev babel-cli
在全局安装babel-cli，意味着，如果项目要运行，全局环境必须要有babel，也就是说项目产生了对环境的依赖，并且这样做也无法支持不同项目使用不同版本的babel，所以官网强烈要求我们使用后一种安装方式，在项目中安装。
在项目中安装之后，需要改写一下package.json:
{
//...略去了其他的内容
"devDependencies": {
"babel-cli": "^6.0.0" //这里的版本号为安装的时候的版本号，一般安装的时候就会自动写入
},
"scripts": {
"build": "babel src -d lib"
//编译整个 src 目录并将其输出到 lib 目录。这里的src指的是需要转换的目录，lib指的是输出的内容的存放目录
},
}
注意 如果创建的目录文件名称不为src和lib，一定要替换，不然后续会报错。
转码的时候就执行
npm run build
我们还可以直接通过babel-cli直接去转码,直接转码的话，编写babelrc文件，再安装规则和cli就直接可以使用啦
# 转码结果输出到标准输出
babel example.js
# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
babel example.js --out-file compiled.js
# 或者
babel example.js -o compiled.js
# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
babel src --out-dir lib
# 或者
babel src -d lib
# -s 参数生成source map文件
babel src -d lib -s
网友评论