异步 map 和模块打包

概述

本文是我在查资料的时候学到的一些东西，记录下来，供以后开发时参考，相信对其他人也有用。

参考资料：

异步函数 - 提高 Promise 的易用性

 深入 CommonJs 与 ES6 Module

聊聊 package.json 文件中的 module 字段

异步 map

我们知道，Array.map 能够遍历 Array 里面的每一个元素，然后组成一个新的数组，它的参数是一个函数。如果这个函数里面有异步方法会怎样呢？

const jsonPromises = urls.map(async url => {

  const response = await fetch(url);

  return response;

});

上面的例子中，在 Array.map 里面接了一个 async 函数，它不在乎我提供给它的是不是异步函数，只把它当作一个返回 Promise 的函数来看待。也就是说：它不会等到第一个函数执行完毕就会调用第二个函数。

虽然上面的例子初看很惊艳，但是我没有找到实际的应用场景。。。

前端模块化

前端模块化发展这么久了，目前比较流行的模块化方案主要有下面三种：

umd 模块（通用模块）
CommonJs 模块（node模块）
es6 module（浏览器模块）

umd 模块

使用 UMD 规范的 js 文件的后缀通常写成 .umd.js。

UMD 模块是以前比较流行的模块化方案，它的主要代码如下所示：

(function (global, factory) {

  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :

  typeof define === 'function' && define.amd ? define(factory) :

  (global.libName = factory());

}(this, (function () { 'use strict';})));

这段代码判断运行环境，如果是 node 环境就使用 CommonJs 规范，如果不是则判断是否为 amd 环境，如果是则使用 AMD 规范，如果不是则导出为全局变量。所以 UMD 模块化是 amd + commonjs + 全局变量 这三种风格的结合。

因为 UMD 模块既能使用在浏览器环境，也能使用在 node 环境。所以现在需要在 html 中用 script 标签引入的包大多数都是用 UMD 模块。

CommonJs

使用 CommonJs 规范的 js 文件的后缀通常写成 .cjs.js。

CommonJs 规范是 node 使用的模块体系，所有在 node 运行的包都是 CommonJs 规范。示例如下：

// foo.js

module.exports.foo = 2;

// index.js

const foo = require('./foo');

CommonJs 规范打包之后就变成类似下面这个样子：

(function (exports, require, module, __filename, __dirname) { ...

es6 module

es6 module 规范又被称为 ESM 规范，使用这个规范的 js 文件的后缀通常写成 .esm.js。

CommonJs 规范是我们开发的时候使用的模块体系。示例如下：

// foo.js

export default function () {}

// index.js

import foo from './foo';

静态规范与 tree shaking

我们经常听到别人说，CommonJs 模块规范是动态的，所以在任何时刻都能使用 require 引入包；而 ESM 模块规范是静态的，所以只能在最开始使用 import 引入包，而且会在编译的时候确定导入和导出。

下面解释下为什么 CommonJs 模块规范是动态的而 ESM 模块规范是静态的？

因为在 node 端，当我们 require 一个包的时候，我们只需要从磁盘里面加载这个包的内容即可，非常迅速；但是如果在浏览器端引入一个包的时候，需要从网络上发送 http 请求加载这个包，耗时非常久，会导致浏览器阻塞，所以不能当代码执行一半的时候引入包，而需要在顶层一次性把包全部引入。（而且是异步引入）

由于，ESM 模块需要在编译的时候引入包，这个缺点却带来一个意想不到的好处，就是 tree shaking。说白了，就是可以在编译的时候确定哪些代码被实际引入了，哪些没有，然后那些没有被实际引用的代码就不会被打包！！！这样可以极大的减少打包体积。

pkg.module

但是我们在实际打包的时候，会忽略 node_modules 里面的内容，直接引入里面的包，而里面的包大多使用的是 UMD 规范，它在 node 端打包的时候是 CommonJs 规范，而 CommonJs 规范是动态的，编译的时候不知道哪些代码没有被使用，所以就不能 tree shaking。

这样打包 node_modules 里面的包的时候岂不是会打包很多无用的代码？？？

这个时候 pkg.module 就应运而生了，pkg.module 指的是 package.json 文件中的 module 字段。我们知道 package.json 文件中 main 字段指向的就是打包后的代码，这个代码一般是 UMD 规范。而 module 字段指向的是 ESM 规范编写的代码！！！这样我们在引入 node_modules 的时候，如果引用的是 module 字段指向的代码，我们就可以对这个包进行 tree shaking 了！！！