Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(mini): 修复 webpack4 中 wxml 和 wxs 的 loader 路径问题 #14427

Merged
merged 5 commits into from
Sep 4, 2023
Merged

fix(mini): 修复 webpack4 中 wxml 和 wxs 的 loader 路径问题 #14427

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9f534a0
fix(mini): 修复 webpack4 wxml 和 wxs 的 loader 路径问题
Aug 25, 2023
7ad0b10
test(snapshot): 更新测试快照
Aug 28, 2023
5b4fc6d
Merge branch 'next' into fix/source_path
xuanzebin Sep 4, 2023
198f099
feat: 路径修复兼容 window
Sep 4, 2023
6dd3366
Merge branch 'fix/source_path' of github.com:NervJS/taro into fix/sou…
Sep 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 13 additions & 13 deletions packages/taro-mini-runner/src/__tests__/__snapshots__/wx-hybrid.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1467,6 +1467,12 @@ require("./taro");
/** filePath: dist/components/tab/tab.json **/
{"component":true,"usingComponents":{}}

/** filePath: dist/components/tab/tab.wxml **/
<view class="tab" bindtap="clickHandler">
{{myProperty}}
</view>


/** filePath: dist/pages/index/index.js **/
(wx["webpackJsonp"] = wx["webpackJsonp"] || []).push([ [ 11 ], {
17: function(module, exports, __webpack_require__) {},
Expand Down Expand Up @@ -1605,25 +1611,19 @@ require("./taro");
/** filePath: dist/pages/native/native.json **/
{"navigationBarBackgroundColor":"#ffffff","navigationBarTextStyle":"black","navigationBarTitleText":"混写页面示例","backgroundColor":"#eeeeee","backgroundTextStyle":"light","usingComponents":{"tab":"../../components/tab/tab"}}

/** filePath: dist/pages/native/native.wxss **/
.native{color:red}

/** filePath: dist/runtime.js **/


/** filePath: dist/src/components/tab/tab.wxml **/
<view class="tab" bindtap="clickHandler">
{{myProperty}}
</view>


/** filePath: dist/src/pages/native/native.wxml **/
/** filePath: dist/pages/native/native.wxml **/
<view class="native" bindtap="viewTap">
<text>{{text}}{{x}}</text>
<tab myProperty="kkl" bindmyevent="handler" />
</view>


/** filePath: dist/pages/native/native.wxss **/
.native{color:red}

/** filePath: dist/runtime.js **/


/** filePath: dist/taro.js **/
(wx["webpackJsonp"] = wx["webpackJsonp"] || []).push([ [ 1 ], {
2: function(module, __webpack_exports__, __webpack_require__) {
Expand Down
28 changes: 25 additions & 3 deletions packages/taro-mini-runner/src/webpack/chain.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -433,8 +433,26 @@ export const getModule = (appPath: string, {
test: REG_TEMPLATE,
use: [getFileLoader([{
useRelativePath: true,
name: (resourcePath) => {
return resourcePath.replace(path.join(sourceDir, '../'), '').replace(/node_modules/gi, 'npm')
name: (resourcePath: string) => {
// 差异点：
// webpack4 中的 resourcePath 是绝对路径
// webpack5 中的 filename 是相对于 appPath 的文件路径名称
// appPath /xxx/uuu/aaa
// sourceDir /xxx/uuu/aaa/bbb/ccc/src

// 因此在 webpack4 中如果包含 sourceDir，证明是在 src 内的路径
if (resourcePath.includes(sourceDir)) {
// 直接将 /xxx/src/yyy/zzz.wxml 转换成 yyy/zzz.wxml 即可
return resourcePath.replace(sourceDir + path.sep, '').replace(/node_modules/gi, 'npm')
} else {
// 否则，证明是外层，存在一下两种可能
// resourcePath /xxx/uuu/aaa/node_modules/yy/zzz.wxml
// --> result: npm/yy/zzz.wxml

// resourcePath /xxx/uuu/aaa/bbb/abc/yy/zzz.wxml
// --> result: bbb/abc/yy/zzz.wxml
return resourcePath.replace(appPath + path.sep, '').replace(/node_modules/gi, 'npm')
}
},
context: sourceDir
}]), miniTemplateLoader]
Expand All @@ -444,7 +462,11 @@ export const getModule = (appPath: string, {
use: [getFileLoader([{
useRelativePath: true,
name: (resourcePath) => {
return resourcePath.replace(path.join(sourceDir, '../'), '').replace(/node_modules/gi, 'npm')
if (resourcePath.includes(sourceDir)) {
return resourcePath.replace(sourceDir + path.sep, '').replace(/node_modules/gi, 'npm')
} else {
return resourcePath.replace(appPath + path.sep, '').replace(/node_modules/gi, 'npm')
}
},
context: sourceDir
}]),
Expand Down
4 changes: 2 additions & 2 deletions packages/taro-webpack5-runner/src/webpack/MiniWebpackModule.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ export class MiniWebpackModule {
generator: {
filename ({ filename }) {
const extname = path.extname(filename)
return filename.replace(sourceRoot + '/', '').replace(extname, fileType.templ).replace(/node_modules/gi, 'npm')
return filename.replace(sourceRoot + path.sep, '').replace(extname, fileType.templ).replace(/node_modules/gi, 'npm')
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@bigmeow @xuanzebin 这个兼容有问题，升级到3.6.16后，在Windows系统构建时，混合引入的原生组件在dist中放置的位置都有问题。

下面是在Windows下输出，filename是unix格式的路径，path.sep却是Windows专用的分隔符, filename的路径替换失效了

image

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

所以它本来是兼容的，特意兼容的 windows 结果反倒不兼容了？

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@bigmeow 是的

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

可能得麻烦你分别在 cmd 和 powershell 下都跑下代码，确认下是否都是这个问题

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@bigmeow 我都试过了，效果是一样的。Debug看了下，webpack内部会把这里的filename转换成posix路径。

image

}
},
use: [WebpackModule.getLoader(path.resolve(__dirname, '../loaders/miniTemplateLoader'), {
Expand All @@ -105,7 +105,7 @@ export class MiniWebpackModule {
type: 'asset/resource',
generator: {
filename ({ filename }) {
return filename.replace(sourceRoot + '/', '').replace(/node_modules/gi, 'npm')
return filename.replace(sourceRoot + path.sep, '').replace(/node_modules/gi, 'npm')
}
},
use: [WebpackModule.getLoader(path.resolve(__dirname, '../loaders/miniXScriptLoader'))]
Expand Down
Loading