JavaScript 打包策略：ESM, CJS, UMD 多目标输出与优化

好嘞！各位前端的俊男靓女们，欢迎来到今天的“打包那些事儿”小课堂！我是你们的老朋友，人称“代码界段子手”的程序猿小李。今天咱们不谈情怀，就聊聊如何把咱们辛辛苦苦写的 JavaScript 代码，打包成各种口味的“美味佳肴”，满足不同“食客”的需求。

开场白：JavaScript 打包，就像做菜！

大家想象一下，咱们写的 JavaScript 代码，就像各种新鲜的食材，比如 jQuery 是一块上好的牛肉🥩，React 是一颗新鲜的西兰花🥦，Vue 是一只活蹦乱跳的虾🦐。这些食材本身很好，但是直接给顾客端上去，那肯定不行！

我们需要把这些食材，经过精心的烹饪，做成各种各样的菜品，才能满足不同顾客的口味。比如，有的顾客喜欢吃牛排，有的喜欢吃清炒西兰花，有的喜欢吃麻辣小龙虾。

而 JavaScript 打包，就相当于这个“烹饪”的过程。我们要把各种 JavaScript 模块，经过处理，打包成不同的格式，才能在不同的环境中使用。

第一道菜：认识 JavaScript 模块化“三剑客”

在打包之前，我们得先认识一下 JavaScript 模块化的“三剑客”：ESM (ES Modules)、CJS (CommonJS)、UMD (Universal Module Definition)。它们就像三种不同的“菜系”，各有各的特色。

模块化规范	特点	适用场景	优点	缺点
ESM	官方标准，静态分析，支持 Tree Shaking	现代浏览器、Node.js (新版本)	模块加载效率高，Tree Shaking 优化，代码可读性强	兼容性稍差，老版本浏览器需要转换
CJS	Node.js 专用，动态加载	Node.js	简单易用，同步加载，方便处理服务器端模块	不支持 Tree Shaking，浏览器端需要转换，模块加载效率相对较低
UMD	兼容 AMD 和 CJS，通用模块定义	浏览器、Node.js 等各种环境	兼容性好，一个包可以到处使用	代码冗余，不利于 Tree Shaking，模块加载效率相对较低

• ESM (ES Modules)：未来的希望之光🌟

  ESM 是 ECMAScript 官方推出的模块化标准，是未来的发展趋势。它最大的特点是静态分析。啥是静态分析呢？简单来说，就是在代码运行之前，就能分析出模块之间的依赖关系。

  这有什么好处呢？

  • Tree Shaking： 就像给大树修剪枝叶一样，可以把没用到的代码“摇”掉，减少打包体积。
  • 模块加载效率高： 可以并行加载模块，提高加载速度。

  ESM 的语法也很简洁：

  // 导入模块
  import { sum } from './utils.js';
  
  // 导出模块
  export function add(a, b) {
      return a + b;
  }

• CJS (CommonJS)：Node.js 的老大哥👴

  CJS 是 Node.js 专用的一种模块化规范。它的特点是动态加载。也就是说，只有在代码运行的时候，才能确定模块之间的依赖关系。

  CJS 的语法也很简单：

  // 导入模块
  const utils = require('./utils.js');
  
  // 导出模块
  module.exports = {
      add: function(a, b) {
          return a + b;
      }
  };

  CJS 虽然简单易用，但是也有一些缺点：

  • 不支持 Tree Shaking： 因为是动态加载，所以无法在打包时确定哪些代码没用。
  • 浏览器端需要转换： 浏览器不支持 CJS，需要使用工具转换成浏览器可以识别的格式。

• UMD (Universal Module Definition)：兼容性之王👑

  UMD 是一种通用的模块化规范，可以兼容 AMD (Asynchronous Module Definition) 和 CJS。它可以让你写的模块在浏览器和 Node.js 等各种环境中使用。

  UMD 的语法比较复杂，但是不用担心，一般我们不需要手动编写，打包工具会自动帮我们生成。

  (function (root, factory) {
      if (typeof define === 'function' && define.amd) {
          // AMD
          define(['exports'], factory);
      } else if (typeof module === 'object' && module.exports) {
          // CJS
          factory(exports);
      } else {
          // Global
          factory(root.myModule = {});
      }
  }(typeof self !== 'undefined' ? self : this, function (exports) {
      exports.add = function (a, b) {
          return a + b;
      };
  }));

  UMD 的优点是兼容性好，但是缺点是代码冗余，不利于 Tree Shaking。

第二道菜：选择合适的打包工具

了解了模块化规范，接下来我们需要选择一个合适的打包工具。目前市面上比较流行的打包工具有：Webpack、Rollup、Parcel。它们就像不同的“厨师”，各有各的拿手菜。

打包工具	特点	适用场景	优点	缺点
Webpack	功能强大，配置灵活	大型项目、复杂项目、需要各种插件和 Loader 的项目	生态丰富，插件众多，可以处理各种资源 (JS、CSS、图片等)，支持代码分割、按需加载等高级功能	配置复杂，学习成本高，打包速度相对较慢
Rollup	专注于 JavaScript 模块打包，Tree Shaking 效果好	小型库、框架、ESM 模块	打包体积小，Tree Shaking 效果好，输出结果干净	生态相对较弱，插件较少，不支持代码分割等高级功能
Parcel	零配置，上手简单	小型项目、快速原型开发	零配置，开箱即用，支持各种资源 (JS、CSS、图片等)，打包速度快	配置不够灵活，不适合大型项目

• Webpack：全能型选手💪

  Webpack 是目前最流行的打包工具，它就像一个全能型厨师，什么菜都会做。它功能强大，配置灵活，可以处理各种资源 (JS、CSS、图片等)。

  Webpack 的优点是生态丰富，插件众多，可以满足各种需求。但是缺点是配置复杂，学习成本高。

• Rollup：专注型选手🎯

  Rollup 专注于 JavaScript 模块打包，它就像一个专注型厨师，只做自己擅长的菜。它最大的特点是 Tree Shaking 效果好，打包体积小。

  Rollup 的优点是打包体积小，输出结果干净。但是缺点是生态相对较弱，插件较少。

• Parcel：懒人福音🛌

  Parcel 是一个零配置的打包工具，它就像一个懒人厨师，什么都不用你操心。它开箱即用，支持各种资源 (JS、CSS、图片等)，打包速度快。

  Parcel 的优点是上手简单，打包速度快。但是缺点是配置不够灵活，不适合大型项目。

第三道菜：多目标输出的“烹饪”技巧

选择了合适的打包工具，接下来我们需要学习多目标输出的“烹饪”技巧。也就是说，我们要把一份代码，打包成 ESM、CJS、UMD 三种格式。

• Webpack 的“乾坤大挪移”🔮

  Webpack 可以通过配置 output.libraryTarget 来实现多目标输出。

  module.exports = {
      entry: './src/index.js',
      output: {
          path: path.resolve(__dirname, 'dist'),
          filename: 'my-library.js',
          library: 'MyLibrary',
          libraryTarget: 'umd' // 可以设置为 'umd', 'commonjs2', 'module' 等
      }
  };

  • libraryTarget: 'umd'：输出 UMD 格式。
  • libraryTarget: 'commonjs2'：输出 CJS 格式。
  • libraryTarget: 'module'：输出 ESM 格式。

  当然，为了更精细的控制，我们可以使用多个 entry 和 output，分别配置不同的格式。

  module.exports = [
      {
          entry: './src/index.js',
          output: {
              path: path.resolve(__dirname, 'dist'),
              filename: 'my-library.umd.js',
              library: 'MyLibrary',
              libraryTarget: 'umd'
          }
      },
      {
          entry: './src/index.js',
          output: {
              path: path.resolve(__dirname, 'dist'),
              filename: 'my-library.cjs.js',
              libraryTarget: 'commonjs2'
          }
      },
      {
          entry: './src/index.js',
          output: {
              path: path.resolve(__dirname, 'dist'),
              filename: 'my-library.esm.js',
              libraryTarget: 'module'
          },
          experiments: {
              outputModule: true
          }
      }
  ];

  需要注意的是，ESM 的输出需要开启 experiments.outputModule。

• Rollup 的“庖丁解牛”🔪

  Rollup 可以通过配置 output.format 来实现多目标输出。

  export default {
      input: 'src/index.js',
      output: [
          {
              file: 'dist/my-library.umd.js',
              format: 'umd',
              name: 'MyLibrary'
          },
          {
              file: 'dist/my-library.cjs.js',
              format: 'cjs'
          },
          {
              file: 'dist/my-library.esm.js',
              format: 'es'
          }
      ]
  };

  • format: 'umd'：输出 UMD 格式。
  • format: 'cjs'：输出 CJS 格式。
  • format: 'es'：输出 ESM 格式。

  Rollup 的配置相对简单，但是功能不如 Webpack 强大。

• Parcel 的“傻瓜式操作”👶

  Parcel 默认支持多目标输出，你只需要在 package.json 中配置 exports 字段即可。

  {
      "name": "my-library",
      "version": "1.0.0",
      "source": "src/index.js",
      "exports": {
          "import": "./dist/index.module.js",
          "require": "./dist/index.js"
      },
      "module": "./dist/index.module.js",
      "main": "./dist/index.js"
  }

  Parcel 会自动帮你打包成 ESM 和 CJS 两种格式。

  Parcel 的优点是简单易用，但是缺点是配置不够灵活。

第四道菜：代码优化的“画龙点睛”之笔

打包完成之后，我们还需要对代码进行优化，让“菜品”更加美味。

• Tree Shaking：摇掉无用的代码🍃

  Tree Shaking 可以把没用到的代码“摇”掉，减少打包体积。ESM 和 Rollup 都支持 Tree Shaking。

  为了让 Tree Shaking 效果更好，我们需要注意以下几点：

  • 使用 ESM 语法： CJS 不支持 Tree Shaking。
  • 避免副作用代码： 副作用代码是指那些会改变全局状态的代码，例如修改 window 对象。

• 代码压缩：去掉多余的空格和注释✂️

  代码压缩可以去掉多余的空格和注释，减少打包体积。Webpack 和 Rollup 都支持代码压缩。

  Webpack 可以使用 TerserPlugin 插件进行代码压缩。

  const TerserPlugin = require('terser-webpack-plugin');
  
  module.exports = {
      optimization: {
          minimize: true,
          minimizer: [new TerserPlugin()]
      }
  };

  Rollup 可以使用 terser 插件进行代码压缩。

  import { terser } from 'rollup-plugin-terser';
  
  export default {
      plugins: [
          terser()
      ]
  };

• 代码分割：按需加载，提高加载速度📦

  代码分割可以把代码分成多个小块，按需加载，提高加载速度。Webpack 支持代码分割。

  Webpack 可以使用 SplitChunksPlugin 插件进行代码分割。

  module.exports = {
      optimization: {
          splitChunks: {
              chunks: 'all'
          }
      }
  };

第五道菜：版本控制与发布：让美味传遍天下📢

最后，我们需要对打包好的代码进行版本控制和发布，让我们的“美味佳肴”传遍天下。

• 版本控制：Git 是你的好帮手🤝

  使用 Git 进行版本控制，可以方便地管理代码，回滚到之前的版本。

• 发布：npm 是你的舞台🎤

  使用 npm 发布你的代码，可以让全世界的开发者使用你的代码。

  npm publish

  发布之前，你需要确保你的 package.json 文件配置正确。

总结：打包之路，永无止境！🏃‍♂️

JavaScript 打包是一个复杂而有趣的过程，我们需要不断学习和实践，才能掌握其中的技巧。希望今天的分享能够帮助大家更好地理解 JavaScript 打包，做出更美味的“菜肴”。

记住，代码之路，永无止境！让我们一起努力，成为更优秀的 JavaScript 工程师！

(ง •̀_•́)ง 加油！