关于babel的一点学习

1.babel-core

当我们在webpack中使用babel的时候，首先要安装babel-core，这是babel编译库的核心包

npm install babel-core --save-dev

2.babel-loader

之后，webpack中对js文件，我们要进行编译，就需要配置，在webpack中，需要用到babel-loader来使用bebel

npm install babel-loader --save-dev

所以，在webpack.config.js代码中，要这样写：

rules: [
  {
    test: /\.js$/,
    use: {
      loader: 'babel-loader'
    },
    exclude: '/node_modules/'
  }
]

3.babel-preset-xxx(xxx代表很多选项)

（1）babel-preset-es2015

按照es6标准进行编译，同理，如果按照es7标准进行编译，则安装babel-preset-es2016

（2）babel-preset-env

一般来说，如果你想用最新的规范做编译，直接安装babel-preset-env就可以了，它包含了 babel-preset-es2015, babel-preset-es2016, and babel-preset-es2017，等价于babel-preset-latest，可以编译所有最新规范中的代码

使用编译规则来配置webpack,在babel-loader中新增配置参数：

rules: [
  {
    test: /\.js$/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['env']        //也可以写成presets: ['babel-preset-env']
      },
      exclude: '/node_modules/'
    }
  }
]

4.babel-polyfill

babel官网上写了很明确一句话，babel只负责对语法进行编译。当我们写箭头函数，babel会帮你把它编译成普通函数，这没有任何问题，但是，比如说我们代码里使用了promise，babel打包出来的代码其实还是promise，在低版本浏览器里，promise并不支持，但是babel并不会帮你处理，因为这不是语法编译层面需要做的事情。不转换新的API包括，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象。

于是，如果我们要让打包出来的代码能兼容低版本浏览器，还要考虑到promise，Set这样的新语法低版本浏览器不兼容的问题，这时候babel-polyfill就出场了。你只需要全局安装一下babel-polyfill：

npm install --save-dev babel-polyfill

然后在项目中使用一下它，代码就不存在刚才提到的兼容性问题了：

import 'babel-polyfill';

但是，直接用babel-polyfill会有一些坑，第一个坑是污染全局环境，比如说低版本浏览器没有Set，但是babel-polyfill会在全局变量里加一个Set。再一个问题是，会造成代码冗余，举个例子，多个模块用到Promise，每个模块里都有可能独立存在一个对Promise做兼容性的代码。所以，使用babel-polyfill可以解决兼容性问题，但并不是最佳方案，于是，出现了babel-plugin-transform-runtime，使用这个插件，就可以解决上面的问题了。

5.babel-plugin-transform-runtime

安装：

npm install babel-plugin-transform-runtime --save-dev
npm install babel-runtime --save-dev

更改webpack的配置：

rules: [
  {
    test: /\.js$/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['env'],        //也可以写成presets: ['babel-preset-env']
        plugins: ['transform-runtime']
      },
      exclude: '/node_modules/'
    }
  }
]

1. .babelrc文件

==============

好了，到此为止，整个babel的配置差不多了，最后我们可以在工程目录下创建一个.babelrc文件，把关于babel的配置放进去：

{
  presets: [['babel-preset-env', {
    targets: {
      browser: ['> 1%', 'last 2 versions']
    }
  }]],
  plugins:['transform-runtime']
}

然后，webpack.config.js可以精简为：

rules: [
  {
    test: /\.js$/,
    use: {
      loader: 'babel-loader',
        },
    exclude: '/node_modules/'
    }
]