webpack之babel安装、配置和使用

前言

现代浏览器对于es6语法有了很大支持，但是仍有部分es6/7的语法不支持，且浏览器的早期版本也不支持es6。
此时，就需要把es6/7的代码编译成es5风格，以便更好的向下兼容。
而babel就是一个javascript编译器，可以立刻使用最新语法，无需等待浏览器支持。

环境

使用webpack4.x配置babel插件编译javascript

yarn init -y
yarn add webpack webpack-cli babel-core babel-loader babel-preset-env -D

babel-core：封装了babel编译时需要使用的API
babel-loader：webpack打包时使用babel-loader处理javascript文件
babel-preset-env：根据支持的环境自动选择合适的babel插件的babel-preset，
即babel-preset-es2015、babel-preset-es2016、babel-preset-es2017这3个插件合集。

webpack.config.js配置文件

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const webpack = require('webpack')

const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)

module.exports = {
  // 模式
  mode: 'development',
  entry: {
    // 入口文件
    app: './src/index.js'
  },
  // 开发服务器，能实时重新加载
  devServer: {
    contentBase: './dist',
    // 开启模块热替换
    hot: true,
    host: HOST,
    port: PORT
  },
  plugins: [
    // 每次构建前清理dist文件夹
    new CleanWebpackPlugin(['dist']),
    // html-webpack-plugin插件默认生成index.html文件
    new HtmlWebpackPlugin({
      title: 'Output Management'
    }),
    new webpack.HotModuleReplacementPlugin()
  ],
  output: {
    // 所有输出文件的目标路径，必须是绝对路径
    path: path.resolve(__dirname, 'dist'),
    // 输出文件名
    filename: '[name].bundle.js'
  },
  module: {
    rules: [
       // 使用babel-loader在webpack打包时处理js文件
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [path.resolve(__dirname, 'src')]
      }
    ]
  }
}

babel配置

babel有2以下种配置方式，这2种配置方式都是一样的：

1. package.json配置

2. .babelrc文件配置（推荐）

   
   "babel": {
       "presets": [
         "env"
       ]
   }

   以上配置表示自动选择最合适的babel插件编译js
   在src/index.js中引入print.js

export default function printMe () {
  let arr = ['a', 'b']
  arr.map(v => v)
  arr.includes('a')

  async function asyncFn(){
    return await 1
  }

  function* p(){
    yield 1
  }

  let q = p()
  q.next()
  console.log('updating pring.js...')
}

打包

在package.json中添加npm script脚本

"scripts": {
    "build": "webpack"
  }

yarn run build

pring.js经babel编译后，展开的内容如下：

实际打包后的代码

添加es7草案阶段的提案stage-2

若需要使用尚在草案阶段的ECMASCRIPT提案语法，需要添加下面的插件
yarn add babel-preset-stage-2 -D
.babelrc配置如下

{
    "presets": [
        ["env", {
            "targets": {
                "browsers": ["> 1%", "last 2versions", "not ie <= 8"]
            }
        }],
        "stage-2"
    ]
}

以上配置表示使用babel-preset-env编译js，且浏览器环境为：
1、全球市场份额大于1%的浏览器
2、最后2个版本的浏览器
3、大于IE8版本的IE浏览器
然后再使用babel-preset-stage-2插件编译尚处在草案阶段的语法

总结

1. babel-preset-loader、babel-preset-env、babel-preset-core这3个插件就能满足使用webpack打包js文件时先通过babel编译js为es5的代码
2. babel-preset-stage-2插件可以处理草案阶段的ECMASCRIPT语法

参考

https://www.babeljs.cn/docs/plugins/preset-env/#usebuiltins