From add54db46d09034681b48bd122aaf7645392e793 Mon Sep 17 00:00:00 2001 From: hiyuki <674883329@qq.com> Date: Wed, 27 Sep 2023 18:43:08 +0800 Subject: [PATCH] update docs --- docs-vuepress/api/compile.md | 131 ++++++------------ .../lib/template-compiler/preprocessor.js | 29 ---- packages/webpack-plugin/package.json | 1 - 3 files changed, 41 insertions(+), 120 deletions(-) delete mode 100644 packages/webpack-plugin/lib/template-compiler/preprocessor.js diff --git a/docs-vuepress/api/compile.md b/docs-vuepress/api/compile.md index 422bba38e8..8d482eae05 100644 --- a/docs-vuepress/api/compile.md +++ b/docs-vuepress/api/compile.md @@ -1407,7 +1407,7 @@ module.exports = defineConfig({ ### asyncSubpackageRules - **类型**: - ```ts +```ts type Condition = string | Function | RegExp interface AsyncSubpackageRules { @@ -1480,134 +1480,85 @@ module.exports = defineConfig({ * 本功能只会对使用require.async异步引用的js模块生效,若引用路径中已配置?root,则以路径中?root优先 ::: -## MpxWebpackPlugin static methods - -`MpxWebpackPlugin` 通过静态方法暴露了以下五个内置 loader,详情如下: - -### MpxWebpackPlugin.loader +### retryRequireAsync -`MpxWebpackPlugin` 所提供的最主要 loader,用于处理 `.mpx` 文件,根据不同的[模式(mode)](/api/compile.html#mode)将 `.mpx` 文件输出为不同的结果。 +`boolean = false` -> \* 在微信环境下 `todo.mpx` 被loader处理后的文件为:`todo.wxml`、`todo.wxss`、`todo.js`、`todo.json` +开启时在处理`require.async`时会添加单次重试逻辑 ```js -module.exports = { - module: { - rules: [ - { - test: /\.mpx$/, - use: MpxWebpackPlugin.loader(options) +// vue.config.js +module.exports = defineConfig({ + pluginOptions: { + mpx: { + plugin: { + retryRequireAsync: true } - ] + } } -}; +}) ``` -#### Options +### enableAliRequireAsync -##### Options.transRpx `{Array | Object}` +`boolean = false` -用于统一转换 px 或者 rpx 单位,默认值为`{}`,详见 [transRpxRules](/api/compile.html#transrpxrules) +支付宝在`2.8.2`基础库版本后开始支持分包异步化,开启此配置时Mpx的分包异步构建能力能在输出支付宝时生效,不开启时则还是采用兜底策略进行构建来兼容`2.8.2`之前的基础库版本 -:::warning -`transRpx` 已在`v2.6.0`版本中**移除**,请在统一配置文件 `build/mpx.plugin.conf.js` 中使用 `transRpxRules` 属性进行配置。 -::: - -::: tip @mpxjs/cli@3.x 版本配置如下 -```javascript +```js +// vue.config.js module.exports = defineConfig({ pluginOptions: { mpx: { - loader: { - transRpxRules: [] + plugin: { + enableAliRequireAsync: true } } } }) ``` -::: -##### Options.loaders `{Object}` +### optimizeSize -可用于对某些资源文件的默认 loader 做覆盖或新增处理,以下例子演示了对 [less-loader](https://webpack.docschina.org/loaders/less-loader/) 做额外配置。 +`boolean = false` -```js -module.exports = { - module: { - rules: [ - { - test: /\.mpx$/, - use: MpxWebpackPlugin.loader({ - loaders: { // loaders选项 - less: [ // 针对less做loader配置 - 'css-loader', - { - loader: 'less-loader', - options: { // 为less-loader添加额外配置 - lessOptions: { - strictMath: true - } - } - } - ] - } - }) - } - ] - } -}; -``` +开启后可优化编译配置减少构建产物体积 -::: tip @mpxjs/cli 3.x 版本配置如下 ```js -const { defineConfig } = require('@vue/cli-service') +// vue.config.js module.exports = defineConfig({ pluginOptions: { mpx: { - loader: { - loaders: { // loaders选项 - less: [ // 针对less做loader配置 - 'css-loader', - { - loader: 'less-loader', - options: { // 为less-loader添加额外配置 - lessOptions: { - strictMath: true - } - } - } - ] - } + plugin: { + optimizeSize: true } } } }) ``` -::: -##### Options.templateOption `{Object}` - -针对使用其他模板引擎(如 [pug](https://www.pugjs.cn/api/getting-started.html))来编写 template 的情景下,可通过 `options.templateOption` 来传入引擎渲染时的额外参数。等同于: +## MpxWebpackPlugin static methods -```js -const pug = require('pug') +`MpxWebpackPlugin` 通过静态方法暴露了以下五个内置 loader,详情如下: -const template = `view(class='gray') 这是一段pug模板` +### MpxWebpackPlugin.loader -pug.render(template, options.templateOption) -``` +`MpxWebpackPlugin` 所提供的最主要 loader,用于处理 `.mpx` 文件,根据不同的[目标平台](#mode)将 `.mpx` 文件输出为不同的结果。 -::: tip -在 `@mpxjs/cli 3.x`版本已经内置了对于 `pug` 的支持,只需要安装 `pug` 依赖相关即可: +> 在微信环境下 `todo.mpx` 被loader处理后的文件为:`todo.wxml`、`todo.wxss`、`todo.js`、`todo.json` -```javascript -npm install -D pug pug-plain-loader +```js +module.exports = { + module: { + rules: [ + { + test: /\.mpx$/, + use: MpxWebpackPlugin.loader() + } + ] + } +}; ``` -::: - -##### Options.excludedPreLoaders `{RegExp}` - -在构建过程中忽略特定 `pre-loader` 对文件的处理,仅支持正则表达式,默认值为 `/eslint-loader/`。 ### MpxWebpackPlugin.pluginLoader diff --git a/packages/webpack-plugin/lib/template-compiler/preprocessor.js b/packages/webpack-plugin/lib/template-compiler/preprocessor.js deleted file mode 100644 index f809e1cf24..0000000000 --- a/packages/webpack-plugin/lib/template-compiler/preprocessor.js +++ /dev/null @@ -1,29 +0,0 @@ -// loader for pre-processing templates with e.g. pug - -const cons = require('consolidate') -const loaderUtils = require('loader-utils') - -module.exports = function (content) { - this.cacheable && this.cacheable() - const callback = this.async() - const opt = loaderUtils.getOptions(this) || {} - - if (!cons[opt.engine]) { - return callback(new Error( - 'Template engine \'' + opt.engine + '\' ' + - 'isn\'t available in Consolidate.js' - )) - } - - const templateOption = opt.templateOption - - // for relative includes - templateOption.filename = this.resourcePath - - cons[opt.engine].render(content, templateOption, function (err, html) { - if (err) { - return callback(err) - } - callback(null, html) - }) -} diff --git a/packages/webpack-plugin/package.json b/packages/webpack-plugin/package.json index e5899eaf9c..701037f29d 100644 --- a/packages/webpack-plugin/package.json +++ b/packages/webpack-plugin/package.json @@ -29,7 +29,6 @@ "@better-scroll/zoom": "^2.5.1", "acorn-walk": "^7.2.0", "async": "^2.6.0", - "consolidate": "^0.15.1", "css": "^2.2.1", "css-selector-tokenizer": "^0.7.0", "cssnano": "^5.0.16",