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

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 阶段的语法）

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

babel-loader的配置

• .babelrc

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

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

• babel-preset-env

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

  1. 安装babel-preset-env

      npm i babel-preset-env

  2. 添加配置

     {
       "presets": ["env"]
     }

  3. 指定所要支持的浏览器

     • 指定支持主流浏览器最新的两个版本以及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"
        ]
      }
```

webpack 中定义 babel-loader

很少有大型项目仅仅需要 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'
      ],
    }
  }]
}

babel-cli

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...》