webpack学习(七)--使用babel处理ES6语法以及对react进行打包

应用场景

我们使用ES6语法的时候，我们发现在一些低版本的浏览器是没有办法兼容ES6的语法的，比如说IE浏览器无法识别promise和map方法，所以我们期望webpack帮助我们打包的时候，可以将ES6的语法直接转换成ES5的语法。

配置

我们现在要在IE浏览器中执行下面的一段代码：

const arr = [new promises(() => {}), new promises(() => {})];

arr.map(item => {
  console.log(item);
});

安装babel-loader

作用：在webpack和babel中间搭建了一座桥梁
我们首先要安装babel-loader @babel/core

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

然后在webpack中配置

module: {
  rules: [
    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
  ]
}

其中exclude: /node_modules/指的是，如果我们遇到node_modules中的不适用babel-loader来进行转换
其实我们使用了babel-loader，只是相当于在webpack和babel中搭建起了一座桥梁，并没有真正的实现将ES6转换成ES5.

安装@babel/preset-env

作用：将ES6的语法转换成ES5的语法
因此我们还需要安装@babel/preset-env,@babel/preset-env是用来做语法转换的
安装执行命令

npm install --save @babel/preset-env

然后在loader中进行相关的配置

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

安装@babel/polyfill

将低版本浏览器中没有的方法进行补充
使用的方法就是我们在最开始执行js文件的时候引入@babel/polyfill

import '@babel/polyfill';

const arr = [new promises(() => {}), new promises(() => {})];

arr.map(item => {
  console.log(item);
});

我们发现，我们这样直接进行引入的时候，我们很多没有用到的ES6的特性也被打包了进来，这样会照成浪费，我们期望，我们用到什么就打包进来什么，所以我们进行下面的配置。
在loader中进行配置

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

useBuiltIns: 'usage'的配置用来当我们@babel/polyfill填充的时候，不是将所有的特性都填充进来，而是填充我们使用过的特性

对UI库或是类库的babel配置

上面我们介绍的是对于业务代码的webpack配置babel的情况，但是如果我们只是写一个第三方的库，按照上面的配置方案进行配置会造成全局污染。那我们应该怎么对这样的场景进行配置呢？
安装transform-runtime和@babel/runtime

npm install -D @babel/plugin-transform-runtime
npm install -D @babel/runtime

在webpack中进行相关的配置,在babel-loader进行如下的配置

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

在上面的配置中我们设置了corejs: 2,这个时候进行打包的时候我们会发现有一个报错，报错的具体意思缺少一个包，安装了@babel/runtime-corejs2这个包

npm install -D @babel/runtime-corejs2

我们发现对于babel的option配置项是很多的，我们都在loader中进行配置，会导致webpack的配置文件过长的问题，所以我们可以在根路径下创建一个.bablerc的文件。具体的写法
.babelrc文件

{
  "plugins": [
    ["@babel/plugin-transform-runtime"],
    {
      "corejs": 2,
      "helpers": true,
      "regenerator": true,
      "useESModules": false
    }
  ]
}

React的打包

先安装bable-preset-react，用来解析jsx的相关代码

npm install -D @babel/preset-react

安装react的框架

npm install react react-dom -D

在.babelrc进行配置

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": "67"
        },
        "useBuiltIns": "usage"
      }
    ],
    "@babel/preset-react"
  ]
}

index.js的编码方式

import '@babel/polyfill';
import React, { Component } from 'react';
import ReactDom from 'react-dom';

class App extends Component {
  render() {
    return <div>22222</div>;
  }
}

ReactDom.render(<App />, document.getElementById('root'));

presets:执行的转换顺序是从下到上，从右到左