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

官⽅⽹站： 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是我自己写的一个插件，等于第三方的一个东西

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

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

 

 

总结

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