Webpack中使用babel转译ES6

安装必要包

npm install --save babel-loader babel-core babel-preset-env

• babel-loader：一个loader，主要是给webpack和babel作为桥梁进行通讯的。
• babel-core：babel核心库。
• babel-preset-env：把ES6语法转换为ES5。

使用

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

• 这样使用其实有一个问题，就是babel-preset-env这是把ES6语法转换为ES5而已，但是有一些ES6对象和方法在浏览器并没有实现，所以需要polyfills进行补充
• 安装polyfills

npm install --save @babel/polyfill

• 在代码里使用polyfills

import ‘@babel/polyfill’

• 现在一些浏览器里没有的ES6对象和方法已经有了。但是现在又有一些问题出现了：有一些ES6对象和方法我们并没有使用，但是还是被引入了，要怎么解决呢？很简单，给@babel/preset-env加个配置就行：

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: [['@babel/preset-env',{
          	useBuiltIns: 'usage'
          }]]
        }
      }
    }
  ]
}

• 经过以上配置就可以在自己的业务代码里写ES6的代码了，注意只是在自己的业务代码里可以使用而已，如果你要写一些自己的库之类的，以上的配置就有问题，因为polyfills会污染全局变量。那要写自己的第三方库要怎么办？把useBuiltIns和polyfills去掉，然后安装@babel/plugin-transform-runtime以及@babel/runtime：

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

• 然后修改配置为：

module: {
 rules: [
   {
     test: /\.js$/,
     exclude: /node_modules/,
     use: {
       loader: 'babel-loader',
       options: {
         plugins: [[‘@babel/plugin-transform-runtime’, {
   	        "corejs": false,
   	        "helpers": true,
   	        "regenerator": true,
   	        "useESModules": false,
         }]]
       }
     }
   }
 ]
}

• 提示当你把corejs改为2或者3的时候需要：

npm install --save @babel/runtime-corejs2
或者
npm install --save @babel/runtime-corejs3

• corejs为false时使用了上面安装的@babel/runtime

TIp

• 更多相关内容请参考：
  https://www.webpackjs.com/loaders/babel-loader/
  https://www.babeljs.cn/docs/presets
  https://www.babeljs.cn/docs/babel-polyfill
  https://www.babeljs.cn/docs/babel-plugin-transform-runtime