前端工程化cjs umd esm 打包差异详解

前端工程化是指在前端项目开发中，通过使用现代化的工具和流程来提高项目的开发效率、可维护性、可扩展性和可靠性。其中，打包是前端工程化的重要部分之一，而 cjs、umd 和 esm 则是不同的打包方式。

cjs、umd 和 esm 的区别

cjs(CommonJS)

CommonJS 是 Node.js 中用于模块化编程的规范。cjs 规范的模块化方式是同步加载，即在应用程序启动时，所有需要用到的模块都会被加载到内存中。在浏览器中，为了使用 cjs 规范的模块，需要使用类似于 Browserify 这样的工具将其编译为可以在浏览器中使用的代码。

// 引入模块
const moduleA = require('./moduleA');
const moduleB = require('./moduleB');

// 使用模块
moduleA.doSomething();
moduleB.doSomethingElse();

umd(Universal Module Definition)

UMD 是一种同时支持 CommonJS 和 AMD 规范的打包方式。UMD 会检测当前环境是使用的 CommonJS 还是 AMD 规范，然后选择对应的模块化方式来导出模块。如果当前环境既不支持 CommonJS，也不支持 AMD，那么 UMD 将会将模块导出至全局变量，以确保它可以在任何地方访问。

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    define(['dep1', 'dep2'], factory);
  } else if (typeof exports === 'object') {
    module.exports = factory(require('dep1'), require('dep2'));
  } else {
    root.returnExports = factory(root.dep1, root.dep2);
  }
}(this, function (dep1, dep2) {
  // 模块代码
}));

esm(ECMAScript modules)

ESM 是 ECMAScript 2015 中新增的一种模块化规范，支持异步加载和动态导入。ESM 可以在现代浏览器和 Node.js 环境中直接使用，也可以通过使用工具如 Babel 将其转换为 CommonJS 或 AMD 规范的代码。

// 导出模块
export function doSomething() {
  // ...
}

// 引入模块
import { doSomething } from './module';

打包差异详解

在实际项目中，一个模块可能包含多个功能函数，需要以不同的方式导入导出。下面以一个模块为例，分别演示 cjs、umd 和 esm 规范下的打包方式。

cjs 打包

const fs = require('fs');

// 导出函数
module.exports = {
  functionA: function() {
    // ...
  },
  functionB: function() {
    // ...
  },
};

// 导入函数
const moduleA = require('./moduleA');
moduleA.functionA();

在 cjs 规范下，导出函数使用 module.exports，导入函数使用 require()。由于 cjs 是同步加载模块，因此不能动态导入模块。在浏览器中使用 cjs 规范时，需要使用类似于 Browserify 的工具将其编译为可以在浏览器中使用的代码。

umd 打包

(function(root, factory) {
  if (typeof define === 'function' && define.amd) {
    define(['exports'], factory);
  } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
    factory(exports);
  } else {
    factory((root.myModule = {}));
  }
}(typeof self !== 'undefined' ? self : this, function(exports) {
  // 导出函数
  exports.functionA = function() {
    // ...
  };
  exports.functionB = function() {
    // ...
  };
}));

在 umd 规范下，导出函数使用 exports，导入函数使用 require() 或者 import。UMD 可以同时支持 CommonJS 和 AMD 规范，也可以将模块导出至全局变量。在浏览器中使用 UMD 规范时，不需要额外的编译工具。

esm 打包

// 导出函数
export function functionA() {
  // ...
}
export function functionB() {
  // ...
}

// 引入函数
import { functionA } from './moduleA.js';
functionA();

在 esm 规范下，导出函数使用 export，导入函数使用 import。ESM 支持异步加载和动态导入，可以用于前端模块化和构建工具的高效处理。在浏览器中使用 ESM 规范时，需要使用类似于 Webpack 或者 Rollup 的工具将其编译为可以在现代浏览器中使用的代码。

示例说明

这里给出两个示例，分别说明使用 cjs 和 esm 规范的打包方式。

cjs 示例

假设有一个模块 math.js，包含 add 和 subtract 两个函数，如下所示：

// math.js
module.exports = {
  add: function(a, b) {
    return a + b;
  },

  subtract: function(a, b) {
    return a - b;
  },
};

现在在另一个脚本文件 index.js 中，需要使用 math.js 中的函数，可以按照以下方式导入：

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

console.log(math.add(1, 2)); // 输出 3
console.log(math.subtract(3, 1)); // 输出 2

在浏览器中使用 cjs 规范时，需要使用类似于 Browserify 的工具将其编译为可以在浏览器中使用的代码。下面是使用 Browserify 打包的命令：

browserify index.js -o bundle.js

打包完成后会生成 bundle.js 文件，可以在 HTML 文件中引用该文件，如下所示：

<script src="./bundle.js"></script>

esm 示例