乐趣区

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