跳转到主文档

output.packageMode

适用的工程方案
  • 模块
  • 类型: 'universal-js' | 'universal-js-lite' | 'browser-js' | 'browser-js-lite' | 'node-js'
  • 默认值: 'universal-js'

通过该配置可以决定构建产物支持的语法以及模块化规范。

不同类型构建产物的产出目录的名称如下:

  • dist/js/modern
  • dist/js/node
  • dist/js/treeshaking

以上目录名称的含义与在 package.json 中的使用方式有关,与具体的 JS 语法和模块化规范无关。具体的使用方式如下:

{
"jsnext:source": "./src/index.js",
"types": "dist/types/index.d.ts",
"main": "dist/js/node/index.js",
"module": "dist/js/treeshaking/index.js",
"jsnext:modern": "./dist/js/modern/index.js",
"exports": {
".": {
"node": {
"import": "./dist/js/modern/index.js",
"require": "./dist/js/node/index.js"
},
// 为何设置default?以防止出现不支持的环境,作为导出的 fallback。
"default": "./dist/js/treeshaking/index.js"
}
}
}

具体的 packageMode 值以及构建产物的内容如下:

  • 'universal-js'Universal JS 的默认选择,三份构建产物,支持 Node.js,对现代浏览器有优化。)

    • node: CommonJS + ES6(+)
    • treeshaking: ES Module + ES5
    • modern: ES Module + ES6(+)
  • 'universal-js-lite'Universal JS 的优化选择,两份构建产物,对现代浏览器无优化。)

    • node: CommonJS + ES6(+)
    • treeshaking: ES Module + ES5
    • modern: ES Module + ES5
  • 'browser-js' (纯前端代码的默认选择,两份构建产物。)

    • node: ES Module + ES6(+)
    • treeshaking: ES Module + ES5
    • modern: ES Module + ES6(+)
  • 'browser-js-lite' (纯前端代码的优化选择,单份构建产物,对现代浏览器无优化。)

    • node: ES Module + ES5
    • treeshaking: ES Module +ES5
    • modern: ES Module + ES5
  • 'node-js' (纯 Node.js 代码的默认选择,两份构建产物。)

    • node: CommonJS + ES6(+)
    • treeshaking: 无文件
    • modern: ES Module + ES6(+)