Webpack：babel的使用（8）

介绍

当我们使用ES6的语法时，低版本的浏览器只支持ES5，会发生兼容问题，这个时候就需要babel对es6代码转译为es5做支持。

使用前准备

官网：https://www.babeljs.cn/setup

安装包
1.webpack可以对babel进行操作
npm install --save-dev babel-loader @babel/core

2.es6语法转译es5的包，但promise的功能不会转换
npm install @babel/preset-env --save-dev

3.在es6里promise功能也可以转换，只转换用到的es6代码，和指定适配的浏览器
npm install --save @babel/polyfill

配置

创建babel.config.json在项目的根目录

{
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "chrome": "67" //兼容的浏览器版本，兼容的版本越低，js包越大
        },
        "useBuiltIns": "usage" //只对使用到的es6代码做es5转译，减少js的包大小
      }
    ]
  ]
}

js的测试代码

//需要转译的js文件顶部引入polyfill（此方法若是开发UI组件库，会对全局有污染，见文章底部transform-runtime解决办法）
import "@babel/polyfill"; 

const arr = [
    new Promise(() => { }),
    new Promise(() => { })
];
arr.map(item => {
    console.Log(item);
})

babel的更多配置

webpack.config.js

const path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const webpack = require('webpack');
module.exports = {
    mode: 'development',
    devtool: 'cheap-module-eval-source-map',
    entry: {
        main: './src/index.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/, //对js进行es6到es5的转译
                exclude: /node_modules/, //不对第三方包进行转译
                loader: "babel-loader"
                // options: {  //用此方法可以省略前面的babel.config.json文件配置
                //     presets: [
                //         ["@babel/preset-env", {
                //             useBuiltIns: "usage"
                //         }]
                //     ]
                // }
            }
        ]
    },
    devServer: {
        contentBase: './dist'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        }),
        new CleanWebpackPlugin()
    ],
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    }
};

规避引入polyfill的全局污染

安装包
//为代码创建沙盒环境
npm install --save-dev @babel/plugin-transform-runtime
//仅支持全局的变量
npm install --save @babel/runtime-corejs2

配置babel.config.json

{
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "chrome": "67"
        },
        "useBuiltIns": "usage"
      }
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "absoluteRuntime": false,
        "corejs": 2,
        "version": "^7.7.4"
      }
    ]
  ]
}

注释掉在js代码中应用的polyfill

// 注释掉，不再需要引入polyfill了
// import "@babel/polyfill"; 

const arr = [
    new Promise(() => { }),
    new Promise(() => { })
];
arr.map(item => {
    console.Log(item);
})