Skip to content

Commit

Permalink
Merge branch 'master' into fix_web_compile
Browse files Browse the repository at this point in the history
  • Loading branch information
@hiyuki
hiyuki authored Oct 9, 2023
2 parents 6c97899 + e4907cc commit 71efcc5
Show file tree
Hide file tree
Showing 16 changed files with 127 additions and 175 deletions.
131 changes: 41 additions & 90 deletions docs-vuepress/api/compile.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1407,7 +1407,7 @@ module.exports = defineConfig({
### asyncSubpackageRules
- **类型**：
```ts
```ts
type Condition = string | Function | RegExp

interface AsyncSubpackageRules {
Expand Down Expand Up @@ -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> | 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/[email protected] 版本配置如下
```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
Expand Down
2 changes: 1 addition & 1 deletion lerna.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,5 @@
"packages": [
"packages/*"
],
"version": "2.8.48"
"version": "2.8.49"
}
2 changes: 1 addition & 1 deletion packages/api-proxy/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@mpxjs/api-proxy",
"version": "2.8.46",
"version": "2.8.49",
"description": "convert miniprogram API at each end",
"module": "src/index.js",
"types": "@types/index.d.ts",
Expand Down
12 changes: 2 additions & 10 deletions packages/api-proxy/src/web/api/create-intersection-observer/IntersectionObserver.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,16 +97,8 @@ class WebIntersectionObserver {
nextTick(() => {
const marginsTemp = margins || {}
const { left = 0, right = 0, top = 0, bottom = 0 } = marginsTemp
this._root = document.querySelector('html')
const viewportWidth = window.innerWidth || document.documentElement.clientWidth
const viewportHeight = window.innerHeight || document.documentElement.clientHeight
const rootWidth = this._root.offsetWidth || 0
const rootHeight = this._root.offsetHeight || 0
if (rootHeight >= viewportHeight) {
this._rootMargin = `${top}px ${viewportWidth - rootWidth + right}px ${viewportHeight - rootHeight + bottom}px ${left}px`
} else {
this._rootMargin = `${top}px ${right}px ${bottom}px ${left}px`
}
this._root = null
this._rootMargin = `${top}px ${right}px ${bottom}px ${left}px`
this._relativeInfo.push({ selector: null, margins })
})
return this
Expand Down
2 changes: 1 addition & 1 deletion packages/api-proxy/src/web/api/create-selector-query/SelectQuery.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ class SelectQuery {
}

_handleFields (fields, el, selector) {
if (!el) return null
if (!el || (el && !el.getBoundingClientRect)) return null
const { id, dataset, rect, size, scrollOffset, properties = [], computedStyle = [], node } = fields
const { left, right, top, bottom, width, height } = el.getBoundingClientRect()

Expand Down
10 changes: 6 additions & 4 deletions packages/utils/src/object.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ function diffAndCloneA (a, b) {
let curPath = ''
let diff = false

function deepDiffAndCloneA (a, b, currentDiff) {
function deepDiffAndCloneA (a, b, currentDiff, bIsEmpty) {
const setDiff = (val) => {
if (val) {
currentDiff = val
Expand All @@ -44,7 +44,9 @@ function diffAndCloneA (a, b) {
}
}
let clone = a
if (typeof a !== 'object' || a === null) {
if (bIsEmpty) {
if (!currentDiff) setDiff(true)
} else if (typeof a !== 'object' || a === null) {
if (!currentDiff) setDiff(a !== b)
} else {
const toString = Object.prototype.toString
Expand All @@ -61,7 +63,7 @@ function diffAndCloneA (a, b) {
for (let i = 0; i < length; i++) {
const key = keys[i]
curPath += `.${key}`
clone[key] = deepDiffAndCloneA(a[key], sameClass ? b[key] : undefined, currentDiff)
clone[key] = deepDiffAndCloneA(a[key], sameClass ? b[key] : undefined, currentDiff, !(sameClass && hasOwn(b, key)))
curPath = lastPath
}
// 继承原始对象的freeze/seal/preventExtensions操作
Expand All @@ -79,7 +81,7 @@ function diffAndCloneA (a, b) {
lastPath = curPath
for (let i = 0; i < length; i++) {
curPath += `[${i}]`
clone[i] = deepDiffAndCloneA(a[i], sameClass ? b[i] : undefined, currentDiff)
clone[i] = deepDiffAndCloneA(a[i], sameClass ? b[i] : undefined, currentDiff, !(sameClass && i < b.length))
curPath = lastPath
}
// 继承原始数组的freeze/seal/preventExtensions操作
Expand Down
7 changes: 4 additions & 3 deletions packages/webpack-plugin/lib/json-compiler/helper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning, custom

const isUrlRequest = r => isUrlRequestRaw(r, root, externals)
const urlToRequest = r => loaderUtils.urlToRequest(r)
const isScript = ext => /\.(ts|js)$/.test(ext)

const dynamicEntryMap = new Map()

Expand Down Expand Up @@ -73,7 +74,7 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning, custom
const resourceName = path.join(parsed.dir, parsed.name)

if (!outputPath) {
if (ext === '.js' && resourceName.includes('node_modules') && mode !== 'web') {
if (isScript(ext) && resourceName.includes('node_modules') && mode !== 'web') {
let root = info.descriptionFileRoot
let name = 'nativeComponent'
if (info.descriptionFileData) {
Expand All @@ -91,7 +92,7 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning, custom
outputPath = getOutputPath(resourcePath, 'component')
}
}
if (ext === '.js' && mode !== 'web') {
if (isScript(ext) && mode !== 'web') {
resource = `!!${nativeLoaderPath}!${resource}`
}

Expand Down Expand Up @@ -131,7 +132,7 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning, custom
outputPath = /^(.*?)(\.[^.]*)?$/.exec(relative)[1]
}
}
if (ext === '.js' && mode !== 'web') {
if (isScript(ext) && mode !== 'web') {
resource = `!!${nativeLoaderPath}!${resource}`
}
const entry = getDynamicEntry(resource, 'page', outputPath, tarRoot, publicPath + tarRoot)
Expand Down
22 changes: 17 additions & 5 deletions packages/webpack-plugin/lib/native-loader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const async = require('async')
const { matchCondition } = require('./utils/match-condition')
const { JSON_JS_EXT } = require('./utils/const')
const getRulesRunner = require('./platform')

// todo native-loader考虑与mpx-loader或加强复用，原生组件约等于4个区块都为src的.mpx文件
module.exports = function (content) {
this.cacheable()

Expand Down Expand Up @@ -44,6 +44,8 @@ module.exports = function (content) {
scss: '.scss'
}

const TS_EXT = '.ts'

let useJSONJS = false
let cssLang = ''
const hasScoped = (queryObj.scoped || autoScope) && mode === 'ali'
Expand All @@ -54,7 +56,7 @@ module.exports = function (content) {
this.resolve(parsed.dir, resourceName + extName, callback)
}

function checkCSSLangFiles (callback) {
function checkCSSLangFile (callback) {
const langs = mpx.nativeConfig.cssLangs || ['less', 'stylus', 'scss', 'sass']
const results = []
async.eachOf(langs, function (lang, i, callback) {
Expand Down Expand Up @@ -89,6 +91,15 @@ module.exports = function (content) {
})
}

function checkTSFile (callback) {
checkFileExists(TS_EXT, (err, result) => {
if (!err && result) {
typeResourceMap.script = result
}
callback()
})
}

const emitWarning = (msg) => {
this.emitWarning(
new Error('[native-loader][' + this.resource + ']: ' + msg)
Expand All @@ -105,15 +116,16 @@ module.exports = function (content) {
async.waterfall([
(callback) => {
async.parallel([
checkCSSLangFiles,
checkJSONJSFile
checkCSSLangFile,
checkJSONJSFile,
checkTSFile
], (err) => {
callback(err)
})
},
(callback) => {
async.forEachOf(typeExtMap, (ext, key, callback) => {
// 检测到jsonjs或cssLang时跳过对应类型文件检测
// 对应资源存在预处理类型文件时跳过对应的标准文件检测
if (typeResourceMap[key]) {
return callback()
}
Expand Down
15 changes: 14 additions & 1 deletion packages/webpack-plugin/lib/platform/json/wx/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,19 @@ module.exports = function getSpec ({ warn, error }) {
return input
}

// 校验输出支付宝 componentGenerics 配置的正确性
function aliComponentGenericsValidate (input) {
const componentGenerics = input.componentGenerics
if (componentGenerics && typeof componentGenerics === 'object') {
Object.keys(componentGenerics).forEach(key => {
if (!componentGenerics[key].default) {
error(`Ali environment componentGenerics need to specify a default custom component! please check the configuration of component ${key}`)
}
})
}
return input
}

function fillGlobalComponents (input, { globalComponents }) {
if (globalComponents) {
Object.assign(globalComponents, input.usingComponents)
Expand Down Expand Up @@ -136,7 +149,7 @@ module.exports = function getSpec ({ warn, error }) {
const componentRules = [
{
test: 'componentGenerics',
ali: deletePath(true)
ali: aliComponentGenericsValidate
},
{
test: 'componentPlaceholder',
Expand Down
Loading

0 comments on commit 71efcc5

Please sign in to comment.