package.json中main,jsnext:main,module的区别

April 12, 20191分钟阅读

package.json 中存在一些特殊字段, main,jsnext:main,module 的区别。经常使用 npm 发布包时会用到他们。 但很多人无法理解具体区别,故在此阐明。

  • main: main 字段指明包的入口文件位置,默认 index.js。这里的文件应该放置 commonJs(cjs)模块, 如果源码需要被编译才能使用,那么此处的文件就必须已经被编译了

  • jsnext:main: 有一些工具,例如 webpack 能直接处理 import方式导入的模块。如果开发者希望自己的包交由使用者决定如何引入,那么可以将源码编译成ECMA(esm)

  • module: 与 jsnext:main 意义一样。但是 jsnext:main 是社区约定的字段,并非官方。而 module 则是官方字段。但是社区包含大量的插件只认识 jsnext:main,所以推荐同时使用 jsnext:main 和 module

字段 描述 文件格式
main nodejs 默认文件入口, 支持最广泛 cjs
jsnext:main 社区约定的 esm 文件入口, webpack, rollup 均支持该字段 esm
module esm 官方约定入口, 支持插件较少,故推荐和 jsnext:main 同时使用 esm

最后, 用代码演示 cjs 和 esm 编译后代码的主要区别:

// CommonJS(cjs)
const { foo } = require('./bar')

const baz = foo + 'qux'

module.exports = {
  quux: [baz],
}
// ECMA module(esm)
import { foo } from './bar.js'

const baz = foo + 'qux'

export const quux = [baz]
未经许可, 不可转载