Skip to content

Commit

Permalink
Merge pull request #1299 from didi/fix-root-view-srcmode-web
Browse files Browse the repository at this point in the history
fix: 修复输出ali/web root-view srcMode判断问题
  • Loading branch information
hiyuki authored Oct 20, 2023
2 parents 5643a44 + 5d2270d commit 9d90e3d
Show file tree
Hide file tree
Showing 2 changed files with 37 additions and 42 deletions.
76 changes: 36 additions & 40 deletions docs-vuepress/api/compile.md
Original file line number Diff line number Diff line change
Expand Up @@ -1565,50 +1565,13 @@ module.exports = defineConfig({
})
```
## MpxWebpackPlugin static methods
`MpxWebpackPlugin` 通过静态方法暴露了以下五个内置 loader,详情如下:
### MpxWebpackPlugin.loader
`MpxWebpackPlugin` 所提供的最主要 loader,用于处理 `.mpx` 文件,根据不同的[目标平台](#mode)将 `.mpx` 文件输出为不同的结果。
> 在微信环境下 `todo.mpx` 被loader处理后的文件为:`todo.wxml``todo.wxss``todo.js``todo.json`
```js
module.exports = {
module: {
rules: [
{
test: /\.mpx$/,
use: MpxWebpackPlugin.loader()
}
]
}
};
```
::: tip
`@mpxjs/cli 3.x`版本已经内置了对于 `pug` 的支持,只需要安装 `pug` 依赖相关即可:
```javascript
npm install -D pug pug-plain-loader
```
:::
##### Options.excludedPreLoaders `{RegExp}`
在构建过程中忽略特定 `pre-loader` 对文件的处理,仅支持正则表达式,默认值为 `/eslint-loader/`
### proxyComponentEventsRules
- **类型**:`Array<Object> | Object`
- `option.include` 同webpack的include规则
- `option.exclude` 同webpack的exclude规则
- `option.events` 需要在支付宝环境代理的事件,数组形式的支付宝事件名,例如['onTap', 'onTouchMove']
- **详细**:
在微信小程序中,自定义组件本身的那个节点是一个“普通”的节点,使用时可以在这个节点上设置 class style、事件、 flex 布局等,就如同普通的 view 组件节点一样。
在支付宝平台下,自定义组件节点默认是虚拟节点,会展示自定义组件内部的第一层节点,自定义组件节点本身设置的 class style 等不会生效。
Expand All @@ -1619,8 +1582,6 @@ style、class、绑定事件等 copy 至包裹节点,对于事件来说,由
跨端输出Web时,为了和微信小程序保持一致,在非virtualHost的自定义组件节点上,默认也会插入一个包裹节点,同理对于事件的代理也需要用户进行配置告诉框架来对哪些自定义组件的哪些事件进行代理。
- **示例**:
当我们在小程序开发时存在以下代码时
```html
<!--自定义组件list-->
Expand Down Expand Up @@ -1651,6 +1612,41 @@ new MpxWebpackPlugin({
请注意,在跨端输出 Web 时,只支持配置 tap 、longtap、longpress 这三个事件代理,且最好不要同时配置了两个事件,不然有可能会导致同一个事件触发两次。
## MpxWebpackPlugin static methods
`MpxWebpackPlugin` 通过静态方法暴露了以下五个内置 loader,详情如下:
### MpxWebpackPlugin.loader
`MpxWebpackPlugin` 所提供的最主要 loader,用于处理 `.mpx` 文件,根据不同的[目标平台](#mode)将 `.mpx` 文件输出为不同的结果。
> 在微信环境下 `todo.mpx` 被loader处理后的文件为:`todo.wxml``todo.wxss``todo.js``todo.json`
```js
module.exports = {
module: {
rules: [
{
test: /\.mpx$/,
use: MpxWebpackPlugin.loader()
}
]
}
};
```
::: tip
`@mpxjs/cli 3.x`版本已经内置了对于 `pug` 的支持,只需要安装 `pug` 依赖相关即可:
```javascript
npm install -D pug pug-plain-loader
```
:::
##### Options.excludedPreLoaders `{RegExp}`
在构建过程中忽略特定 `pre-loader` 对文件的处理,仅支持正则表达式,默认值为 `/eslint-loader/`
### MpxWebpackPlugin.pluginLoader
:::warning
Expand Down
3 changes: 1 addition & 2 deletions packages/webpack-plugin/lib/template-compiler/compiler.js
Original file line number Diff line number Diff line change
Expand Up @@ -1795,7 +1795,7 @@ function processRootViewStyleClassHack (el, options, root) {

// 有virtualHost情况wx组件注入virtualHost。无virtualHost阿里组件注入root-view。其他跳过。
function getVirtualHostRoot (options, meta) {
if (options.isComponent) {
if (srcMode === 'wx' && options.isComponent) {
// 处理组件时
if (mode === 'wx' && options.hasVirtualHost) {
// wx组件注入virtualHost配置
Expand All @@ -1810,7 +1810,6 @@ function getVirtualHostRoot (options, meta) {
value: `${MPX_ROOT_VIEW} host-${options.moduleId}`
}
])
// 添加时间处理
processElement(rootView, rootView, options, meta)
return rootView
}
Expand Down

0 comments on commit 9d90e3d

Please sign in to comment.