babel基础配置

babel是干什么的

es6语法已经出来很多年，但各家游览器对es6的支持各不相同。为了解决这个问题，babel应运而生。

babel支持把es6语法编译成es5，完全兼容各家游览器，避免兼容性问题出现。

 

 

配置babel的时候分两种情况

1. 业务贷款开发
2. 类库代码开发

why?

babel支持把es6编译成es5，使各家游览器支持。比如es6语法Map、Set。低版本游览器不兼容，需要babel支持。这个时候就用到了@babel/polyfill（垫片，@babel/polyfill使用的时候需要放到业务js代码的最前面），就是重新定义Map方法。

比如 代码

new Map()

babel编译后还是 如上，但是 bable 会在全局定义一个 Map 方法（因为全局定义可能会造成命名污染），如果你是在开发项目业务代码的时候，其实不太用考虑这个问题。但是如果你是在开发类库代码的时候，你的代码可能会被其他的人拿去用，这样就比较危险。

故两种情况配置方法有些许区别！

如下：

 

业务代码开发

命令行安装babel包

npm install --save-dev babel-loader @babel/core
npm install @babel/preset-env --save-dev

webpack.config.js 配置

module: {
  rules: [
    {
      test: /\.js$/,
　　　　// exclude 排除掉不进行 babel-loader 编译
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
　　　　　// 配置项 很多
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

 

如果配置的babel的配置项很多，全部集中在webpack.config.js不便于代码的查看和管理

故 可以配置 .babelrc （在webpack.config.js同级目录中新建 .babelrc ）

// webpack.config.js中
module: {
  rules: [
    {
      test: /\.js$/,
　　　　// exclude 排除掉不进行 babel-loader 编译
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader'
　　　　}
    }
  ]
}

//.babelrc中
{
  "presets": ["@babel/preset-env", {
　　　　targets: {
　　　　　　chrome: "67"
　　　　},
　　　　// 这个配置项配置了 说明在入口文件中 会自动的给我们加上 import '@babel/polyfill' 的功能，故在业务代码中我们不需要手动的添加 import '@babel/polyfill'
　　　　useBuiltIns: "usage"
　　}]
}

 

 

 

　　

组件/类库代码开发（比如开发npm包）

命令行安装依赖包

npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime
npm install --save @babel/runtime-corejs2

 webpack.config.js

module: {
  rules: [
    　　{
      　　test: /\.js$/,
　　　　　　// exclude 排除掉不进行 babel-loader 编译
      　　exclude: /node_modules/,
      　　use: {
        　　loader: 'babel-loader',
　　　　　　　options:{
　　　　　　　　"plugins": [
    　　　　　　　　[
　　　　　　　　　　　　// 不在全局中定义变量
　　　　      　　　　"@babel/plugin-transform-runtime",
      　　　　　　　　{
        　　　　　　　　"absoluteRuntime": false,
　　　　        　　　　"corejs": 2,
       　　　　 　　　　"helpers": true,
　　　　        　　　　"regenerator": true,
　　　　        　　　　"useESModules": false
      　　　　　　　　}
    　　　　　　　　]
  　　　　　　　]
　　　　　　}
　　　　}
　　}
　　]
}