babel-loader配置_个人使用（仅供参考）

摘要：介绍把用最新标准编写的代码向下编译成可以在今天随处可用的版本。这主要是根据委员会发布流程来制定的。最终在阶段被标准正式采纳。也就是说这些包含的特性是比更新的特性但还未被写入标准进行发布。

Babel 把用最新标准编写的 JavaScript 代码向下编译成可以在今天随处可用的版本。 这一过程叫做“源码到源码”编译， 也被称为转换编译。

npm i babel-loader -D
  

package.json 配置文件

    "babel-core": "^6.26.0",   // 核心包
    "babel-loader": "^7.1.2",   // 基础包
    
    "babel-preset-env": "^1.6.1",  // 根据配置转换成浏览器支持的 es5  
    
    "babel-plugin-transform-runtime": "^6.23.0",  //promise的转换
    "babel-preset-react": "^6.24.1", //react语法的转换
    "babel-plugin-import": "^1.6.3",  // import的转换 
    
    "babel-preset-stage-0": "^6.24.1", //babel-preset-stage-0 打包处于 strawman 阶段的语法）

接下来 我详细解释一下这些配置的作用：

.babelrc

在我们告诉 Babel 该做什么之前，你需要做的就是在项目的根路径下创建 .babelrc 文件。然后输入以下内容作为开始：

    {
      "presets": [],
      "plugins": []
    }

babel-preset-env

如果使用babel-preset-es2015,es2016,es2017包含了过多在某些情况下不需要的功能.
但使用babel-preset-env, 我们可以声明环境, 然后该preset就会只编译包含我们所声明环境缺少的特性的代码，因此也是比较推荐的方式。

安装babel-preset-env

 npm i babel-preset-env

添加配置

{
  "presets": ["env"]
}

指定所要支持的浏览器

指定支持主流浏览器最新的两个版本以及IE 7+:

 "presets": [
     [
       "env",
       {
         "targets": {
           "browsers": ["last 2 versions", "ie >= 7"]
          }
       }
     ]
 ]

支持超过市场份额5%的浏览器:

    "targets": {
      "browsers": "> 5%"
    }

某个固定版本的浏览器:

    "targets": {
      "chrome": 56
    }

更多配置参考官方文档： 

babel-preset-stage-x
官方预设(preset), 有两种，一个是按年份(babel-preset-2017)，一个是按阶段(babel-preset-stage-0)。 这主要是根据TC39 委员会ECMASCRPIT 发布流程来制定的。TC39 委员会决定，从2016年开始，每年都会发布一个版本，它包括每年期限内完成的所有功能，同时ECMAScript的版本号也按年份编制，就有了ES2016, ES2017。所以也就有了babel-present-2016, babel-preset-2017， 对每一年新增的语法进行转化。babel-preset-latest 就是把所有es2015, es2016, es2017 全部包含在一起了。

最终在阶段 4 被标准正式采纳。
以下是4 个不同阶段的（打包的）预设：

babel-preset-stage-0

babel-preset-stage-1

babel-preset-stage-2

babel-preset-stage-3

注意 stage-4 预设是不存在的因为它就是上面的 es2017 预设。

以上每种预设都依赖于紧随的后期阶段预设，数字越小，阶段越靠后，存在依赖关系。也就是说stage-0是包括stage-1的，以此类推。也就是说这些stage包含的特性是比latest更新的特性但还未被写入标准进行发布。

使用的时候只需要安装你想要的阶段就可以了：

$ npm install --save-dev babel-preset-stage-2

然后添加进你的 .babelrc 配置文件。但是要注意如果没有提供es2017相关的预设，preset-stage-X 这种阶段性的预设也不能用。

babel-runtime
babel-polyfill解决了Babel不转换新API的问题，但是直接在代码中插入帮助函数，会导致污染了全局环境，并且不同的代码文件中包含重复的代码，导致编译后的代码体积变大。 （比如：上述的帮助函数_defineProperty有可能在很多的代码模块文件中都会被插入）
Babel为了解决这个问题，提供了多带带的包babel-runtime用以提供编译模块的工具函数， 启用插件babel-plugin-transform-runtime后，Babel就会使用babel-runtime下的工具函数，上述的代码就会变成这样

与 babel-polyfill 一样，babel-runtime 的作用也是模拟 ES2015 环境。只不过，babel-polyfill 是针对全局环境的，引入它，我们的浏览器就好像具备了规范里定义的完整的特性 – 虽然原生并未实现。

babel-runtime 更像是分散的 polyfill 模块，我们可以在自己的模块里多带带引入，比如 require(‘babel-runtime/core-js/promise’) ，它们不会在全局环境添加未实现的方法，只是，这样手动引用每个 polyfill 会非常低效。我们借助 Runtime transform 插件来自动化处理这一切。

通过安装 babel-plugin-transform-runtime 和 babel-runtime 来开始。
```
$ npm install --save-dev babel-plugin-transform-runtime
$ npm install --save babel-runtime
```
然后更新 .babelrc：
```
      {
        "plugins": [
          "transform-runtime"
        ]
      }
```

很少有大型项目仅仅需要 babel，一般都是 babel 配合着 webpack 或 glup 等编译工具一起上的。
为了显出 babel 的能耐，个人配用 babel-runtime 、支持 react 的webpack.config.js
先来配使用 babel-runtime 的：
首先安装：

npm install babel-loader babel-core babel-preset-es2015 babel-plugin-transform-runtime  babel-plugin-react-transform webpack --save-dev

npm install babel-runtime --save

然后配置:

module: {
  loaders: [{
    loader: "babel",
    test: /.jsx?$/,
    include: path.join(__dirname, "src"),
    query: {
      plugins: ["transform-runtime"],
      presets: [
        ["env", {
          "targets": {
            "chrome": 52
          },
          "modules": false,
          "loose": true
        }],
        "stage-2",
        "react"
      ],
    }
  }]
}

abel 的 CLI 是一种在命令行下使用 Babel 编译文件的简单方法。
让我们先全局安装它来学习基础知识。

$ npm install --global babel-cli

我们可以这样来编译我们的第一个文件：

$ babel my-file.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

《https://segmentfault.com/a/11...》