一分钟搞懂模块化的esm, cjs, amd, umd

在前端开发中，有多种模块化规范和方案。下面是常见的几种模块化规范的使用与构建示例。

模块化

1. ES Modules (ESM):

ES Modules 是 ECMAScript 标准中定义的模块化规范，它是现代 JavaScript 开发中推荐的模块化方案。ES Modules 使用 import 和 export 关键字来导入和导出模块。

// moduleA.js
export const message = 'Hello, ES Modules!';

// moduleB.js
import { message } from './moduleA';
console.log(message); // 输出：Hello, ES Modules!

构建示例：

// gulpfile.js
const gulp = require('gulp');
const ts = require('gulp-typescript');
const babel = require('gulp-babel');

gulp.task('build:esm', function () {
  return gulp.src('src/**/*.ts')
    .pipe(ts())
    .pipe(gulp.dest('dist/esm'));
});

2. CommonJS (CJS):

CommonJS 是 Node.js 中使用的模块化规范，也可以在其他环境中使用，如使用 Browserify、Webpack 等工具进行打包。CommonJS 使用 require 和 module.exports 来导入和导出模块。

// moduleA.js
const message = 'Hello, CommonJS!';
module.exports = message;

// moduleB.js
const message = require('./moduleA');
console.log(message); // 输出：Hello, CommonJS!

构建示例：

// gulpfile.js
const gulp = require('gulp');
const ts = require('gulp-typescript');
const babel = require('gulp-babel');
const rename = require('gulp-rename');

gulp.task('build:cjs', function () {
  return gulp.src('src/**/*.ts')
    .pipe(ts({ module: 'commonjs' }))
    .pipe(gulp.dest('dist/cjs'));
});

3. AMD (Asynchronous Module Definition):

AMD 是一种异步模块定义规范，主要用于浏览器环境中。它使用 define 函数来定义模块，并使用 require 函数来异步加载依赖模块。

// moduleA.js
define([], function () {
  return 'Hello, AMD!';
});

// moduleB.js
require(['moduleA'], function (moduleA) {
  console.log(moduleA); // 输出：Hello, AMD!
});

4. UMD (Universal Module Definition):

UMD 是一种通用的模块化规范，可以在多种环境中使用，包括浏览器环境和服务器端。UMD 模块既可以通过 require 导入，也可以通过全局变量访问。

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    define([], factory);
  } else if (typeof module === 'object' && module.exports) {
    module.exports = factory();
  } else {
    root.moduleA = factory();
  }
}(typeof self !== 'undefined' ? self : this, function () {
  return 'Hello, UMD!';
}));

在这个自执行函数中，首先通过 typeof self !== 'undefined' 来判断 self 对象是否定义。self 对象代表了当前的全局对象，它在浏览器环境中指向 window 对象。如果 self 对象未定义，那么说明代码运行的环境不是浏览器环境。

接下来，根据不同的判断分支执行相应的操作：

• 如果 define 函数存在并且 typeof define === 'function' && define.amd 成立，说明代码运行在支持 AMD 规范的环境，这时使用 define() 函数定义模块。
• 如果 module 对象存在并且 typeof module === 'object' && module.exports 成立，说明代码运行在支持 CommonJS 规范的环境，这时使用 module.exports 导出模块。
• 如果以上条件都不满足，说明代码运行在其他环境，将模块定义在全局对象下，即 root.moduleA = factory()。

通过这种方式，UMD 示例中的代码可以在不同的环境中灵活地进行模块定义和导出。

构建示例

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/main.ts',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    libraryTarget: 'umd',
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        use: [
          'babel-loader',
          'ts-loader',
        ],
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
};

以上是常见的几种模块化规范和方案的代码示例，保持学习，共勉~