webpack内使用Babel处理ES6、配置React打包环境

快来打我* 2023-02-19 11:27 238阅读 0赞

官⽅⽹站： https://babeljs.io/

中⽂⽹站： https://www.babeljs.cn/

Babel 是 JavaScript 编译器，能将 ES6 代码转换成 ES5 代码，让我们开发过程中放⼼使⽤ JS 新特性⽽不⽤担⼼兼容性问题。并且还可以通过插件机制根据需求灵活的扩展。

Babel 在执⾏编译的过程中，会从项⽬根⽬录下的  .babelrc  JSON ⽂件中读取配置。没有该⽂件会从 loader 的 options 地⽅读取配置。

测试代码

//index.js
    const arr = [new Promise(() => {}), new Promise(() => {})];
    arr.map(item => {
         console.log(item);
    });

## 安装 ##

npm i babel-loader @babel/core @babel/preset-env -D

1.  babel-loader是webpack 与 babel的通信桥梁，不会做把es6转成es5的⼯作，这部分⼯作需要⽤到@babel/preset-env来做 
2.  @babel/preset-env⾥包含了es，6，7，8转es5的转换规则

配置webpack.config.js

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

通过上⾯的⼏步 还不够，默认的 Babel 只⽀持 let 等⼀些基础的特性转换，Promise 等⼀些还有转换过来，这时候需要借助 @babel/polyfill ，把 es 的新特性都装进来，来弥补低版本浏览器中缺失的特性

### **@babel/polyfill**  ###

以全局变量的⽅式注⼊进来的。 windows.Promise ，它会造成全局对象的污染

npm install --save @babel/polyfill

//index.js 顶部
    import "@babel/polyfill";

但是在添加运行后，会发现生成的js文件非常大，但是你只可能只需要转化几行ES6代码。

## 按需加载，减少冗余 ##

会发现打包的体积⼤了很多，这是因为 polyfill 默认会把所有特性注⼊进来，假如我想我⽤到的 es6+ ，才会注⼊，没⽤到的不注⼊，从⽽减少打包的体积，可不可以呢

当然可以

修改 Webpack.config.js

options: {
      presets: [
        [
          "@babel/preset-env",
          {
            targets: {
              edge: "17",
              firefox: "60",
              chrome: "67",
              safari: "11.1",
            },
            corejs: 2, //新版本需要指定核⼼库版本
            useBuiltIns: "usage", //按需注⼊
          },
        ],
      ];
    }

useBuiltIns  选项是  babel 7  的新功能，这个选项告诉  babel  如何配置  @babel/polyfill  。

它有三个参数可以使⽤：

1.  entry: 需要在 webpack 的⼊⼝⽂件⾥ import "@babel/polyfill" ⼀次。 babel会根据你的使⽤情况导⼊垫⽚，没有使⽤的功能不会被导⼊相应的垫⽚。
2.  usage: 不需要 import ，全⾃动检测，但是要安装@babel/polyfill 。（试验阶段）
3.  false: 如果你 import"@babel/polyfill" ，它不会排除掉没有使⽤的垫⽚，程序体积会庞⼤。(不推荐)

请注意：  usage  的⾏为类似  babel-transform-runtime ，不会造成全局污染，因此也会不会对类似  Array.prototype.includes()  进⾏  polyfill 。

**扩展：**

babelrc ⽂件：

新建 .babelrc ⽂件，把 options 部分移⼊到该⽂件中，就可以了

// .bebelrc
    {
      "presets": [
        [
          "@babel/preset-env",
          {
            "targets": {
              "edge": "17",
              "firefox": "60",
              "chrome": "67",
              "safari": "11.1"
            },
            "corejs": 2, //新版本需要指定核⼼库版本
            "useBuiltIns": "usage" //按需注⼊
          }
        ],
        "@babel/preset-react"
      ]
    }
    
    
    // webpack.config.js
    {
    	test: /\.js$/,
    	exclude: /node_modules/, // 排除
    	use: {
    	  loader: "babel-loader",
    	},
    },

配置React打包环境

安装

npm install react react-dom --save

编写 react 代码：

//index.js
    import React, { Component } from "react";
    import ReactDom from "react-dom";
    
    class App extends Component {
     render() {
         return <div>hello world</div>;
     }
    }
    
    ReactDom.render(<App />, document.getElementById("app"));

安装babel与react转换的插件：

npm install --save-dev @babel/preset-react

在 babelrc ⽂件⾥添加：

{
      "presets": [
        [
          "@babel/preset-env",
          {
            "targets": {
              "edge": "17",
              "firefox": "60",
              "chrome": "67",
              "safari": "11.1"
            },
            "corejs": 2, //新版本需要指定核⼼库版本
            "useBuiltIns": "usage" //按需注⼊
          }
        ],
        "@babel/preset-react"
      ]
    }

问题：

1.如果是库的作者的话，提供模块的时候代码怎么打包的？

答：引入库的的npm插件，然后添加library属性，这里的vueCounter是我自己写的一个插件，等于第三方的一个东西

![20200620154702802.png][]

2.构建速度会越来越慢，怎么优化

*  导入文件时，带着后缀
 *  别使用source-map
 *  还有很多。。。。

## 总结 ##

本文主要配置webpack内的Babel处理ES6操作及实例展示，及webpack配置React打包环境。

[20200620154702802.png]: https://img-blog.csdnimg.cn/20200620154702802.png