打包相关
输出esm,cjs,umd
esm: EcmaScript module cjs: CommonJs module umd: Universak Module Definition 可以在script标签中执行,被Common JS模块加载器加载,被AMD模块加载器加载
esm被认为是未来,但cjs仍然在社区和生态系统中方占有重要地位。esm对打包工具来说更容易正确地进行treeshaking,因此对于库来说,拥有这种格式很重要。或许在将来的某一天,你的库只需要输出esm. 你可能已经注意到,und已经与commomjs模块加载器兼容--所以为什么还要同时具备cjs和umd输出呢?一个原因是,与umd文件相比,CommonJS文件在对依赖进行条件导入时通常表现更好;例如:
if (ProcessingInstruction.env.NODE_ENV === 'production') {
module.exports = require("my-lib.production.js");
} else {
module.exports = require("my-lib.development.js");
}
上面的例子,当使用 CommonJS 模块时,只会引入 production 或 development 包中的一个。但是,对于 UMD 模块,最终可能会将两个包全部引入。 最后还需要注意是,开发者可能会在其应用中同时使用 cjs 和 esm,发生双包危险。利用 package.json#exports 进行 package exports 也可以帮助防止这种情况的发生。
treeshaking
tree shaking 是一种代码优化技术,通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块语法的 静态结构 特性,例如 import 和 export。这个术语和概念实际上是由 ES2015 模块打包工具 rollup 普及起来的。 作用: 它的作用就是将程序中没有用到的代码在打包编译的时候都删除掉,这样能减少打包后包的文件大小,减少程序执行的时间。
// a.js
export const a = 'a';
export const b = 'b'; // 不导出,删除
export const c = 'c'; // 导出不引用,删除
// index.js
import { a, c } from './a.js';
console.log(a);
if(false) { // 不会执行的代码,删除
console.log('delete');
}