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