rollup打包 cjs、esm、umd 输出格式区别

一、CJS规范

• 规范代表库：CommonJS

common.js主要用于后端，在nodejs中，node应用是由模块组成，采用的commonjs模块规范。每一个文件就是一个模块，拥有自己独立的作用域，变量，以及方法等，对其他的模块都不可见。 模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。 模块加载的顺序，按照其在代码中出现的顺序。

同时，webpack 也对 cjs 模块得以解析，因此 cjs 模块可以运行在 node 环境及 webpack 环境下的，但不能在浏览器中直接使用。但如果你写前端项目在 webpack 中，也可以理解为它在浏览器和 Node 都支持。

二、ESM规范：

• esm规范是es6原生支持的，很多浏览器开始支持，类似commonjs的写法和同、异步加载机制能通过设置type=module，用于html中，而且在node中也支持

export 向外暴露或导出模块 export default xxx;

import 引入暴露或导出的模块 import {xx, xx} from './xxx.js';

esm为静态导入，正因如此所以可在编译期间进行Tree Shaking，减少js体积

• cjs是运行时加载，esm是编译时加载
• cjs模块输出的是值的拷贝，esm输出的是指的引用

三、UMD规范：

• 一种兼容 cjs 与 amd 的模块，既可以在 node/webpack 环境中被 require 引用，也可以在浏览器中直接用 CDN 被 script.src 引入。

(function (root, factory) {
  if (typeof define === "function" && define.amd) {
    // AMD
    define(["jquery"], factory);
  } else if (typeof exports === "object") {
    // CommonJS
    module.exports = factory(require("jquery"));
  } else {
    // 全局变量
    root.returnExports = factory(root.jQuery);
  }
})(this, function ($) {
  // ...
});

Rollup可把代码打包为cjs umd esm等格式，需要针对具体的业务场景来指定具体的output包

• 如果需要script标签引入的方式，建议打包为umd
• 如果应用场景兼容ES6，可打包为esm
• 用 Rollup 编译为 UMD 或 CommonJS 格式，需要在 package.json 文件的 main 属性中指向当前编译的版本
• 编译为ESM格式，需要在package.json 文件的 module 属性中指向当前编译版本