babel6 快速指南

最近在学习es6的时候发现网上很多的babel教程都非常混乱，babel5和babel6的教程掺杂让人不知道该怎么办，于是翻译+整理了babel6的官方文档，作为快速入门~

相对于之前的babel5,babel6不再是一个整的大的package,而是拆分了很多个小的packages可供选择安装

基础安装 Installing Babel

如果你想在CLI(command-line interface命令行界面)使用的话，请安装babel-cli

$ npm install --global babel-cli复制代码

如果你想结合node.js来写的话，需要安装babel-core

$ npm install --global babel-core复制代码

插件和预设 Plugins and Presets

babel6里并没有默认的转换规则，所以你安装了如上两项，用babel运行你的文件会发现并没有什么变化，因此我们需要安装所需插件，并在.babelrc文件做一些设置

例如使用箭头函数

$ npm install --save-dev babel-plugin-transform-es2015-arrow-functions复制代码

同时在.babelrc文件添加：

{
  "plugins": ["transform-es2015-arrow-functions"]
}复制代码

当然还有很多细节我们不可能一点点全部去安装，我们如果想要转换某些特性的话，可以去安装某个版本的预置，babel可以去向下兼容

$ npm install --save-dev babel-preset-es2015复制代码

//.babelrc文件
{
  "presets": ["es2015"]
}复制代码

如果想包含所有javascript版本的话：

$ npm install --save-dev babel-preset-env复制代码

//.babelrc文件
{
  "presets": ["env"]
}复制代码

编译使用

• 在安装了babel-cli之后，在命令行使用babel命令去编译文件：

    babel es6.js复制代码

  输出编译后的文件:

    babel es6.js -o compiled.js复制代码

  监听编译文件变动:

    babel es6.js -o -w compiled.js复制代码

• 安装完babel-cli和babel-core之后，使用babel-node命令去编译并运行文件

    //不适于生产环境
    $ babel-node es6.js复制代码

更多配置细节移步:

• setting-up-babel-6
• babel-cli usage

转载于:https://juejin.im/post/58d8d8d8ac502e0058d9ddaf