babel.js的使用

近期，项目经理的一些需求，打包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