配置
为方便查找,以下配置项通过字母排序。
配置说明
配置文件
MorJS 支持 6 种类型的配置文件:
mor.config.ts
mor.config.js
mor.config.mjs
mor.config.json
mor.config.jsonc
mor.config.json5
会按照上方列出的文件的顺序依次查找,并自动读取找到的第一个配置文件。
多配置支持
MorJS 默认提供多配置支持,也就是可以在一个配置文件中设置多套编译配置,如:
import { defineConfig } from '@morjs/cli'
// defineConfig 的作用仅仅是用于配置的类型提示, 无其他作用
// 直接使用 export default [] 也是一样的
// 数组中的每一套配置都是独立
export default defineConfig([
// 第一套配置
{
name: 'alipay',
sourceType: 'alipay',
target: 'alipay'
},
// 第二套配置
{
name: 'wechat',
sourceType: 'alipay',
target: 'wechat'
},
// 第三套配置
{
name: 'bytedance',
sourceType: 'alipay',
target: 'bytedance',
alias: {}
}
])
不同配置内容以 name
属性作为区分。
通过命令行执行任意子命令 (如 compile
) 时可以通过指定 --name
选项来筛选具体需要执行哪套配置,如:
# 以下命令将仅会执行 mor.config.ts 文件中 name 为 alipay 的配置
mor compile --name alipay
# 以下命令将会依次执行 mor.config.ts 文件中 name 为 alipay 的配置,然后执行 name 为 wechat 的配置
# 两种写法等价
mor compile --name alipay,wechat
mor compile --name alipay --name wechat
# 不指定 --name 时, MorJS 将会依次执行 mor.config.ts 文件中的所有配置
mor compile
编译相关配置
alias - 别名配置
- Type:
object
- Default:
{}
配置别名,对 import
或 require
或 usingComponents
中引用的文件做别名映射,用以简化路径或引用替换。
比如:
{
alias: {
foo: '/tmp/to/foo',
}
}
然后代码里 import 'foo'
实际上会 import '/tmp/to/foo'
。
再比如:
{
alias: {
Utilities: path.resolve(__dirname, 'src/utilities/'),
Templates: path.resolve(__dirname, 'src/templates/'),
}
}
那么,原先在代码里面基于相对路径引用的文件
import Utility from '../../utilities/utility'
就可以简化为
import Utility from 'Utilities/utility'
一些使用上的小窍门:
1、alias
的值最好使用绝对路径,尤其是指向依赖时,记得加 require.resolve
,比如:
// 不推荐 ⛔
{
alias: {
foo: 'foo',
}
}
// 推荐 ✅
{
alias: {
foo: require.resolve('foo'),
}
}
2、如果不需要子路径也被映射,记得加 $ 后缀,比如:
// import 'foo/bar' 会被映射到 import '/tmp/to/foo/bar'
{
alias: {
foo: '/tmp/to/foo',
}
}
// import 'foo/bar' 还是 import 'foo/bar',不会被修改
{
alias: {
foo$: '/tmp/to/foo',
}
}
analyzer - 包大小分析
- Type:
object
- Default:
{}
包模块结构分析工具,可以看到项目各模块的大小,按需优化。通过 mor compile --analyze
或 mor analyze
开启,默认 server 端口号为 8888
,更多配置如下:
{
// 配置具体含义见:https://github.com/webpack-contrib/webpack-bundle-analyzer
analyzer: {
analyzerMode: 'server',
// 分析工具端口号
analyzerPort: 8888,
// 是否自动打开浏览器
openAnalyzer: true,
// 是否生成 stats 文件
generateStatsFile: false,
// stats 文件名称
statsFilename: 'stats.json',
// 日志级别
logLevel: 'info',
// 显示文件大小的类型, 默认为 `parsed`
defaultSizes: 'parsed', // stat // gzip
}
}
autoClean - 自动清理
- 类型:
boolean
- 默认值:
false
是否自动清理产物目录(outputPath
所指向的目录)。
自动清理仅会清理产物目录,可放心使用。
注意: 开启集成模式时,使用 autoClean
会自动标记 --from-state
为 2
用于避免集成模块产物被清理后,不会自动拷贝到产物目录的问题,相关概念可参考:《复杂小程序集成》
autoInjectRuntime - 运行时自动注入
- 类型:
object
或boolean
- 默认值:
true
是否自动注入 MorJS 多端转换运行时。
/* 配置示例 */
// 关闭所有运行时注入
{
autoInjectRuntime: false
}
// 开启所有运行时注入
{
autoInjectRuntime: true
}
// 开启或关闭部分运行时注入,详细配置
{
autoInjectRuntime: {
// App 运行时注入, 编译时替换 App({}) 为 MorJS 的运行时
app: true,
// Page 运行时注入, 编译时替换 Page({}) 为 MorJS 的运行时
page: true,
// Component 运行时注入, 编译时替换 Component({}) 为 MorJS 的运行时
component: true,
// Behavior 运行时注入, 编译时替换 Behavior({}) 为 MorJS 的运行时
behavior: true,
// API 运行时抹平注入, 指定为 true 时默认为 `enhanced`, 可选值:
// enhanced: 增强方式: MorJS 接管 API 调用并提供接口兼容支持
// lite: 轻量级的方式: wx => my, 替换所有全局接口对象
// minimal: 最小替换, 如 wx.abc() => my.abc(), 仅替换函数调用
api: true
}
}
cache - 缓存开关
- 类型:
boolean
- 默认值: 非生产环境下默认开启
true
是否开启编译缓存。
开启缓存后,假如某些情况下出现:文件进行了修改,但未正确触发更新的问题,可通过执行
npx mor clean cache
命令来清理缓存,有关 clean
命令的支持,参见:清理命令——clean
compileMode - 编译模式
- 类型:
string
- 默认值:
bundle
- 可选值:
bundle
: 打包模式, 会生成闭包以及基于规则合并js
文件,并会将小程序多端组件提取到npm_components
目录中transform
: 转换模式, 不生成闭包, 仅针对源码进行编译转换, 不处理node_modules
和多端组件,部分注入能力失效
编译模式, 用于配置当前项目的编译模式。
注意: 原 default
和 transfer
模式已合并为 transform
模式
compilerOptions - 编译配置
- 类型:
object
- 默认值:
ts 编译配置, 大部分和 tsconfig 中的含义一致, 优先级高于 tsconfig.json 中的设定。
// 仅支持以下配置项
{
compilerOptions: {
// 是否允许合成默认导入
allowSyntheticDefaultImports: false,
// 用于自动矫正 commonjs 和 esm 混用的情况
// 仅当 module 不是 commonjs 且 importHelpers 开启时生效
// 原因为: typescript 引入 importHelpers 的时候会根据 设定的 module 来决定
// 是用 esm 还是 commonjs 语法
// 可能会导致 esm 和 commonjs 混用而引起编译问题
autoCorrectModuleKind: undefined,
// 是否生成 declaration (.d.ts) 文件
// 仅 compileMode 为 default 情况下支持
declaration: false,
// 是否开启 ES 模块互操作性
// 针对 ES Module 提供 Commonjs 兼容
esModuleInterop: false,
// 是否引入 tslib
// 需要依赖中包含 tslib: "^2.3.1"
importHelpers: true,
// 模块输出类型
// 不同的小程序 target 会有不同的默认值
// alipay: ESNext
// baidu: CommonJS
// bytedance: CommonJS
// dingding: ESNext
// kuaishou: CommonJS
// qq: CommonJS
// taobao: ESNext
// web: ESNext
// wechat: CommonJS
module: '',
// 输出的 ES 版本
// 不同的小程序 target 会有不同的默认值
// alipay: ES2015
// baidu: ES5
// bytedance: ES5
// dingding: ES2015
// kuaishou: ES5
// qq: ES5
// taobao: ES2015
// web: ES2015
// wechat: ES5
target: ''
}
}
compileType - 编译类型
- 类型:
string
- 默认值:
miniprogram
- 可选值:
miniprogram
: 以小程序的方式编译,入口配置文件为app.json
plugin
: 以插件的方式编译,入口配置文件为plugin.json
subpackage
: 以分包的方式编译,入口配置文件为subpackage.json
component
: 以组件的方式编译,入口配置文件为component.json
编译类型,用于配置当前项目的产物形态,支持类型如下:
miniprogram
: 小程序形态,以app.json
作为入口配置文件plugin
: 小程序插件形态,以plugin.json
作为入口配置文件subpackage
: 小程序分包形态,以subpackage.json
作为入口配置文件component
: 小程序组件形态,以component.json
作为入口配置文件
同一个项目可通过不同的 compileType
配合不同的入口配置文件输出不同的产物形态,有关多形态相互转换的进一步解释,可参见文档:小程序形态一体化。
参考配置示例:
/* 配置示例 */
// 小程序 app.json 配置示例
// 详细配置可参见微信小程序或支付宝小程序 app.json 配置
{
"pages": [
"pages/todos/todos",
"pages/add-todo/add-todo"
],
// subpackages 或 subPackages 均可
"subPackages": [
{
"root": "my",
"pages": [
"pages/profile/profile"
]
}
]
}
// 小程序插件 plugin.json 配置示例
// 详细配置可参见微信小程序或支付宝小程序 plugin.json 配置
{
"publicComponents": {
"list": "components/list/list"
},
"publicPages": {
"hello-page": "pages/index/index"
},
"pages": [
"pages/index/index",
"pages/another/index"
],
// 插件导出的模块文件
"main": "index.js"
}
// 小程序分包 subpackage.json 配置示例
// 配置方式同 app.json 中的 subpackages 的单个分包配置方式一致
{
// type 字段为 MorJS 独有, 用于标识该分包为 "subpackage" 或 "main"
// 区别是: 集成时 "subpackage" 类型的分包会被自动合并到 app.json 的 subpackages 字段中
// "main" 类型的分包会被自动合并到 app.json 的 pages 字段中 (即: 合并至主包)
"type": "subpackage",
// root 字段将影响集成时分包产物合并至宿主小程序时的根目录
"root": "my",
// 注意: 编译分包以 pages 作为实际路径进行解析
"pages": [
"pages/profile/profile"
]
}
// 小程序组件 component.json 配置示例
// publicComponents 和 main 字段为 MorJS 自定义字段
{
// publicComponents 记录组件列表,标识 bundle 模式下哪些组件需要被编译
// publicComponents 有两种配置写法,写成数组时标识组件列表
"publicComponents": [
"components/banner/index",
"components/image/index",
"components/popup/index"
],
// publicComponents 写成 { key: value } 对象时,将 value 的组件编译到 key 对应的产物目录下
"publicComponents": {
"morjs-banner/index": "components/banner/index",
"morjs-image/index": "components/image/index",
"morjs-popup/index": "components/popup/index"
},
// main 用于配置组件初始化文件
"main": "index.js"
}
默认情况下不同 compileType
对应的入口配置文件会直接从 srcPath
和 srcPaths
所指定的源码目录中直接载入。
如需要定制入口配置文件的路径可通过 customEntries 配置 来自定义。
conditionalCompile - 条件编译
- 类型:
{ context: Record<string, any>, fileExt: string | string[] }
- 默认值:
{}
条件编译配置。 详细参见: 代码纬度条件编译 和 文件纬度条件编译
copy - 文件拷贝
- 类型:
(string | { from: string, to: string })[]