一、前言
上一篇讲到如何配置一个基本的开发环境。 本篇将介绍对于项目中 JS 文件的处理。
二、babel-loader
index.js
// 箭头函数 const add = (a, b) => a + b; // Promise 对象 const promise1 = new Promise((resolve, reject) => { setTimeout(() => { resolve(add(1, 2)); }, 1000); }); const promise2 = new Promise((resolve, reject) => { setTimeout(() => { resolve(add(3, 4)); }, 1000); }); const promise3 = new Promise((resolve, reject) => { setTimeout(() => { resolve(add(5, 6)); }, 1000); }); Promise.all([promise1, promise2, promise3]).then(values => { console.log(values); // [3, 7, 11] }); // 实例方法：Array.prototype.includes() const arr = [1, 2, 3, 4, 5]; console.log(arr.includes(3)); // true const root = document.getElementById('root'); root.innerHTML = add(1, 3);
有一些版本的浏览器对于JS新的语法(例如 ES6+)的支持不好，这时就需要将新的语法转换成 ES5 标准的语法，让浏览器正常识别它们，保证程序的稳定运行。
为了实现这种转换，我们该怎么办呢？用 Babel，它会把新语法转换为旧语法。
1. 依赖安装
安装：
npm install -D babel-loader @babel/core @babel/preset-env
2. Loader 配置
webpack.config.js
module: { rules: [ { test: /\.m?js$/, exclude: /node_modules/, use: { loader: 'babel-loader' } } ] }
对于 babel 的配置，我们一般放在 babel.config.json 中，在根目录中新建 babel.config.json。
三、Babel 的配置
1. 一般情况下的 babel 配置
babel.config.json
{ "presets": [ ["@babel/preset-env", { "useBuiltIns": "usage", // 按需引入 corejs 中的模块 "corejs": 3, // 核心 js 版本 "targets": "> 0.25%, not dead" // 浏览器支持范围 }] ] }
还需要下载的依赖：
npm i core-js@3 --save
注意： 必须要配置 useBuiltIns，如果不配置，babel 将不会处理 Promise、Map、Set、Symbol 等全局对象；corejs 也要同时配置，2 的版本可以处理全局对象，但实例方法并不处理，所以这里用 3 的版本。
