rerumaccusamus
Version:
The meta-framework suite designed from scratch for frontend-focused modern web development.
72 lines (55 loc) • 2.24 kB
Markdown
---
sidebar_label: packageMode
---
# `output.packageMode`
:::info 适用的工程方案
* 模块
:::
* 类型： `'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** 语法和模块化规范无关。具体的使用方式如下：
``` json
{
"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(+)