关于Bable

很久很就以前就使用过webpack，觉得是一个很神奇的构建工具，当时是跟着坑爹的文档配置，很多的东西都不知其所以然，babel就是其中的一个，在不知其所以然的情况下，很多的东西都记不住，最近耐心的看了下相关文档，终于领悟到了那么一点点，为了方便以后配置和使用遂作记录。

全局配置babel-cli

npm install babel-cli -g //全局安装babel  这样的话，就可以在命令行中直接调用babel命令

为什么就可以用babel命令了呢？是因为在npm目录C:\Users\Administrator\AppData\Roaming\npm里面会生成一个babel.cmd文件，打开你会发现还有node.cmd文件。若是打开没有发现的话，是因为PC没有设置显示隐藏文件（做开发最好是显示隐藏文件名还有隐藏后缀）。

在项目的文件夹中安装babel需要的转码规则集

$ npm install --save-dev babel-preset-latest    //最新的转码规则

#不同阶段的转码规则（根据需要安装）
$ 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

关于不同阶段的转码规则理解这个是要了解一段历史，简单来说就是ES6是2015年6月发布的，TC39协会决定每年的6月份升级下js语法规则，全球的每个人都可以向TC39提出议案，议案要经历4个阶段，TC39成员需要开会决定议案是否可行，基本上到了stage-2，这个议案几乎就毫无悬念的成为下一个版本。很多的人叫ES6叫做ES2015，这个没毛病，后面又听到什么ES2017，ES2018...也没有毛病；但是还有叫ES7，ES8，那就有点疯狂了，如果每年都升级一个版本的话，js这个语言更新的频率也就太快了，本人更愿意接受后面的版本叫做ES6.x的观点。

在项目的文件夹中配置.babelrc文件(.babelrc文件是一个json文件)

  {
      "presets":[ 
                      "latest",
                      "stage-2"
                   ],            //这里面配置选码规则
      "plugins":[]             //这里面配置一些插件，例如压缩代码等
  }

命令行转码babel-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

上面代码是在全局环境下，进行 Babel 转码。这意味着，如果项目要运行，全局环境必须有 Babel，也就是说项目产生了对环境的依赖。另一方面，这样做也无法支持不同项目使用不同版本的 Babel。解决办法是将babel-cli安装在项目之中。

# 安装
$ npm install --save-dev babel-cli

改写 package.json文件

{
  // ...
  "devDependencies": {
    "babel-cli": "^6.0.0"
  },
  "scripts": {
    "build": "babel src -d lib"    //src 和 lib表示需要转码的目录文件夹以及指定生成的文件夹
  },
}

转码的时候，就执行下面的命令。

$ npm run build

完毕！~

关于Bable

推荐阅读更多精彩内容