乐趣区

关于webpack:关于babel的一点学习

jiezi

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/'
    }
]
退出移动版