package.json 中的 module 字段作用

package.json 中的 module 字段作用

• 1，作用
• 2，ESModule 的优势

1，作用

直到现在，一些 npm 包都是基于 CommonJS 规范的，比如某个 npm 包的 package.json 文件：

{
  "name": "package1",
  "version": "1.0.0",
  "main": "lib/index.js"
}

当通过 require('package1')引入此包时，会根据 main 字段去查找入口文件。

而在 es2015 出现后，随之带来的 ESModule，也就是 ES6 模块系统，可以通过 import / export 引入和导出模块。

所以，我们有的第2个选择：

当代码打包为一个库或模块时，可以选择打包为 ES6 模块，并使用 module 字段来指定入口文件。

该入口文件使用 ES6 模块的导出语法（export）暴露相关功能。

{
  "main": "index.js",
  "module": "dist/index.js"
}

打包工具（webpack 或 rollup）在打包时，如果 npm 包存在 module 字段，会优先使用。如果没找到对应的文件，则会使用 main 字段，并按照 CommonJS 规范打包。

那为什么要使用 ESModule 呢？

2，ESModule 的优势

阮一峰老师介绍 Module 语法

ES6 模块是编译时加载（静态加载），即可以在编译时就完成模块加载，这带来一个最重要的功能 Tree Shaking。

Tree Shaking，大致理解为：在编译打包时，去除没有用到的代码。

另外，Tree Shaking 是通过打包工具来实现的（ES模块是前提），比如 webpack 的插件 UglifyJsPlugin。

所以未来大多 npm 包都会再打包一份 ES 模块的代码，方便使用。

{
  "main": "index.js",
  "module": "dist/index.js"
}