From ac4cc7f1310da23020a5d573e83f3a2a08286edc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=91=A8=E6=97=BA?= Date: Mon, 9 Aug 2021 18:29:23 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E5=BF=AB=E5=BA=94=E7=94=A8=E5=8E=9F?= =?UTF-8?q?=E7=94=9F=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/plugins/MiniPlugin.ts | 30 ++++++++++++------- .../taro-mini-runner/src/webpack/chain.ts | 23 +++++++++----- packages/taro-quickapp/src/template.ts | 21 ++++++++++--- 3 files changed, 51 insertions(+), 23 deletions(-) diff --git a/packages/taro-mini-runner/src/plugins/MiniPlugin.ts b/packages/taro-mini-runner/src/plugins/MiniPlugin.ts index e7365f7c7a92..e4fc218accde 100644 --- a/packages/taro-mini-runner/src/plugins/MiniPlugin.ts +++ b/packages/taro-mini-runner/src/plugins/MiniPlugin.ts @@ -647,7 +647,10 @@ export default class TaroMiniPlugin { } this.pages.forEach(item => { if (item.isNative) { - this.addEntry(item.path, item.name, META_TYPE.NORMAL) + // 快应用的模版和js逻辑在同一个文件里 + if (!this.options.isBuildQuickapp) { + this.addEntry(item.path, item.name, META_TYPE.NORMAL) + } if (item.stylePath && fs.existsSync(item.stylePath)) { this.addEntry(item.stylePath, this.getStylePath(item.name), META_TYPE.NORMAL) } @@ -660,7 +663,10 @@ export default class TaroMiniPlugin { }) this.components.forEach(item => { if (item.isNative) { - this.addEntry(item.path, item.name, META_TYPE.NORMAL) + // 快应用的模版和js逻辑在同一个文件里 + if (!this.options.isBuildQuickapp) { + this.addEntry(item.path, item.name, META_TYPE.NORMAL) + } if (item.stylePath && fs.existsSync(item.stylePath)) { this.addEntry(item.stylePath, this.getStylePath(item.name), META_TYPE.NORMAL) } @@ -929,9 +935,8 @@ export default class TaroMiniPlugin { } else { // 生成base和custom-wrapper相关文件，快应用不需要这一步 if (!this.options.blended && !isBuildPlugin) { - const appConfigPath = this.getConfigFilePath(this.appEntry) - const appConfigName = path.basename(appConfigPath).replace(path.extname(appConfigPath), '') - this.generateConfigFile(compilation, this.appEntry, this.filesConfig[appConfigName].content) + const appName = path.basename(this.appEntry).replace(path.extname(this.appEntry), '') + this.generateConfigFile(compilation, this.appEntry, this.filesConfig[appName].content) } if (!template.isSupportRecursive) { // 如微信、QQ 不支持递归模版的小程序，需要使用自定义组件协助递归 @@ -989,7 +994,7 @@ export default class TaroMiniPlugin { this.components.forEach(component => { const importBaseTemplatePath = promoteRelativePath(path.relative(component.path, path.join(sourceDir, this.getTemplatePath(baseTemplateName)))) const config = this.filesConfig[this.getConfigFilePath(component.name)] - if (config) { + if (config && !this.options.isBuildQuickapp) { this.generateConfigFile(compilation, component.path, config.content) } if (!component.isNative) { @@ -1007,7 +1012,7 @@ export default class TaroMiniPlugin { independentName = name } }) - if (config) { + if (config && !this.options.isBuildQuickapp) { let importBaseCompPath = promoteRelativePath(path.relative(page.path, path.join(sourceDir, this.getTargetFilePath(this.getIsBuildPluginPath(baseCompName, isBuildPlugin), '')))) let importCustomWrapperPath = promoteRelativePath(path.relative(page.path, path.join(sourceDir, this.getTargetFilePath(this.getIsBuildPluginPath(customWrapperName, isBuildPlugin), '')))) if (isIndependent) { @@ -1080,6 +1085,13 @@ export default class TaroMiniPlugin { const fileScriptName = this.getScriptPath(componentName) const fileStyleName = this.getStylePath(componentName) + // 处理usingComponents + const usingComponents = this.filesConfig[this.getConfigFilePath(componentName)]?.content.usingComponents ?? {} + templStr = Object.keys(usingComponents).map(name => { + const path = usingComponents[name] + return `` + }).join('\n') + templStr + let baseTemplInfo: { fileTemplName: string, templStr: string @@ -1149,10 +1161,6 @@ ${this.getCommonStyleAssets(compilation).map(assetName => { } generateConfigFile (compilation: webpack.compilation.Compilation, filePath: string, config: Config & { component?: boolean }) { - if (this.options.isBuildQuickapp) { - return - } - const fileConfigName = this.getConfigPath(this.getComponentName(filePath)) const unOfficalConfigs = ['enableShareAppMessage', 'enableShareTimeline', 'components'] unOfficalConfigs.forEach(item => { diff --git a/packages/taro-mini-runner/src/webpack/chain.ts b/packages/taro-mini-runner/src/webpack/chain.ts index 0f2f6b5bbfb0..f1b5b386c353 100644 --- a/packages/taro-mini-runner/src/webpack/chain.ts +++ b/packages/taro-mini-runner/src/webpack/chain.ts @@ -400,6 +400,20 @@ export const getModule = (appPath: string, { scriptRule.exclude = [filename => /node_modules/.test(filename) && !(/taro/.test(filename))] } + const templateRule: IRule = { + use: [getFileLoader([{ + useRelativePath: true, + name: `[path][name]${fileType.templ}`, + context: sourceDir + }])] + } + if (isBuildQuickapp) { + templateRule.test = /\.ux(\?.*)?$/ + } else { + templateRule.test = REG_TEMPLATE + templateRule.use.push(miniTemplateLoader) + } + const rule: Record = { sass: { test: REG_SASS_SASS, @@ -422,14 +436,7 @@ export const getModule = (appPath: string, { oneOf: cssLoaders }, script: scriptRule, - template: { - test: REG_TEMPLATE, - use: [getFileLoader([{ - useRelativePath: true, - name: `[path][name]${fileType.templ}`, - context: sourceDir - }]), miniTemplateLoader] - }, + template: templateRule, media: { test: REG_MEDIA, use: { diff --git a/packages/taro-quickapp/src/template.ts b/packages/taro-quickapp/src/template.ts index 7bff9e07d3bf..f1944d202555 100644 --- a/packages/taro-quickapp/src/template.ts +++ b/packages/taro-quickapp/src/template.ts @@ -1,4 +1,4 @@ -import { ComponentConfig, Attributes, UnRecursiveTemplate } from '@tarojs/shared' +import { ComponentConfig, Attributes, UnRecursiveTemplate, toKebabCase, toCamelCase } from '@tarojs/shared' import { components as internalComponents } from './components' export class Template extends UnRecursiveTemplate { @@ -32,7 +32,7 @@ export class Template extends UnRecursiveTemplate { } } - private buildCompTempl (mergedAttributes: Attributes) { + private buildCompTempl (mergedAttributes: Attributes, componentConfig: ComponentConfig) { const Adapter = this.Adapter // 给文本标签用 @@ -41,7 +41,7 @@ export class Template extends UnRecursiveTemplate { } const buildAttributesStr = (iName: string) => { - return Object.keys(mergedAttributes) + const baseAttrStr = Object.keys(mergedAttributes) .map(k => { if (k === 'value') { return `${k}="{{${iName}.v || (${mergedAttributes[k].replace(/i\./g, `${iName}.`)})}}"` @@ -49,6 +49,19 @@ export class Template extends UnRecursiveTemplate { return `${k}="${k.startsWith('bind') || k.startsWith('on') || k.startsWith('catch') ? mergedAttributes[k] : `{{${mergedAttributes[k].replace(/i\./g, `${iName}.`)}}}`}"` }) .join(' ') + let thirdAttrStr = '' + componentConfig.thirdPartyComponents.forEach(v => { + v.forEach(attr => { + if (attr.startsWith('on')) { + // 自定义事件取不到id，直接忽略 + // const value = attr.slice(2).toLowerCase() + // thirdAttrStr += `on${value}="eh" ` + } else { + thirdAttrStr += `${toKebabCase(attr)}="{{${iName}.${toCamelCase(attr)}}}" ` + } + }) + }) + return baseAttrStr + ' ' + thirdAttrStr } let templ = '' @@ -90,7 +103,7 @@ export class Template extends UnRecursiveTemplate { const template = ` `