通过插件定制工程能力
插件工程能力通过 src/index.ts
定义,结构如下
该方法会接收两个参数,第一个参数是插件提供的 API 接口,推荐按照解构方式使用,第二个参数 options
是插件自定义的参数,由插件开发者决定提供哪些选项给用户配置。
#
插件 API通过插件提供的 API,可以方便拓展和自定义能力。
#
context包含运行时的各种环境信息:
command
当前运行命令,start/build/testcommandArgs
script 命令执行时接受到的参数rootDir
项目根目录userConfig
用户在 build.json 中配置的内容pkg
项目 package.json 中的内容
#
onGetWebpackConfig通过 onGetWebpackConfig
获取 webpack-chain 形式的配置,并对配置进行自定义修改:
#
onGetJestConfig通过 onGetJestConfig
获取 jest 配置,可对配置进行自定义修改:
#
onHook通过 onHook 监听命令运行时事件,onHook 注册的函数执行完成后才会执行后续操作,可以用于在命令运行中途插入插件想做的操作:
目前支持的命令执行生命周期如下:
#
start 命令生命周期 | 参数 | 调用时机 |
---|---|---|
before.start.load | { args: CommandArgs, // 启动参数 webpackConfig: ConfigInfo[] } | 配置转化之前 |
before.start.run | { args: CommandArgs, // 启动参数 config: WebpackConfig[] } | 构建执行之前 |
after.start.compile | { url: string // serverUrl, isFirstCompile: boolean, stats: WebpackAssets // Vite 模式下不存在 stats } | 编译结束,每次重新编译都会执行 |
before.start.devServer | { url: string // serverUrl, devServer: WebpackDevServer | viteServer } |
after.start.devServer | { url: string // serverUrl, devServer: WebpackDevServer | viteServer, err: Error } | dev server 启动后,仅支持 Webpack 构建模式 |
#
build 命令生命周期 | 参数 | 调用时机 |
---|---|---|
before.build.load | { args: CommandArgs, // 启动参数 webpackConfig: ConfigInfo[] } | 配置转化之前 |
before.build.run | { args: CommandArgs, // 启动参数 config: WebpackConfig[] } | 构建执行之前 |
after.build.compile | { err: Error, stats: WebpackAssets // Vite 模式下不存在 stats } | 构建结束 |
#
test 命令生命周期 | 参数 | 调用时机 |
---|---|---|
before.test.load | { args: array // 启动参数 } | 获取 jest 配置之前 |
before.test.run | - | jest 执行之前 |
after.test | { result // jest执行结果 } | 测试命令执行结束 |
#
log统一的 log 工具,底层使用 npmlog
,便于生成统一格式的 log。
#
registerUserConfig为用户配置文件 build.json
中添加自定义字段。
#
registerClioption为命令行启动添加自定义参数。
#
registerMethod注册自定义方法。通过 applyMethod
调用。
#
modifyUserConfig修改用户配置文件。
#
registerTask添加 Webpack 配置,配置为 webpack-chain 形式。
#
getAllTask获取所有 Webpack 配置名称。
#
getAllPlugin获取所有插件。
#
扩展 API除了以上由 build-scripts 内置支持的 API,我们还通过 icejs 对插件 API 做了扩展,扩展的 API 需要通过以下方式调用:
#
addPluginTemplate为运行时目录中的模版生成提供统一的渲染服务(目录):
#
addRenderFile向运行时目录添加提供文件的渲染服务(文件):
#
addExport向 ice
里注册模块,实现 import { foo } from 'ice';
的能力:
#
addAppConfigTypes向 appConfig 添加类型
#
getPages获取 src/pages
下的一级页面列表:
#
addDisableRuntimePlugin禁用插件的运行时能力
#
watchFileChange监听 src
下的文件变化:
#
插件参数用户可以在 build.json
中指定插件参数:
那么在 build-plugin-foo 里就可以获取到这个参数:
#
插件通信插件间需要进行通信的场景诉求:
- 不同插件之间需要知道彼此的存在来确定是否执行相应的逻辑
- 多个插件共有的配置信息可以抽出来,在某个插件中进行配置
使用 setValue
和 getValue
两个API来实现,分别用于数据的存取。
#
setValue类型:(key: string | number, value: any) => void
,示例:
#
getValue类型:(key: string | number) => any
,示例:
同时在 icejs 中也内置了几个变量:
#
类型接口类型通过以下方法引入: