483次阅读 | 发布于3年以前

一、前言

上一篇讲到如何[配置一个基本的开发环境] 。本篇将介绍对于项目中 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 的版本。

2 . 最佳的 babel 配置

如果在写一个库时，最好添加上插件 —— babel/plugin-transform-runtime，配置如下：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": "> 0.25%, not dead"
    }]
  ],
  "plugins": [
    // 不污染全局，在运行时加载
    ["@babel/plugin-transform-runtime", {
      "corejs": 3
    }]
  ]
}
复制代码