From 637e4e172831a8f6454331e84ae64e5dc7a28b59 Mon Sep 17 00:00:00 2001
From: Flame <wshx1938@gmail.com>
Date: Tue, 26 Apr 2022 11:05:35 +0800
Subject: [PATCH] =?UTF-8?q?feat(vue3):=20=E5=85=81=E8=AE=B8=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E5=AF=B9vue-loader=E4=BC=A0=E5=85=A5=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E9=A1=B9=20(#11694)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(vue3): 允许用户对vue-loader传入配置项

* feat(vue3): 允许配置vueLoader参数

Co-authored-by: chenjiajian <798095202@qq.com>
---
 packages/taro-plugin-vue3/src/index.ts        | 23 +++++++++++--------
 packages/taro-plugin-vue3/src/webpack.h5.ts   | 10 +++++---
 packages/taro-plugin-vue3/src/webpack.mini.ts | 14 ++++-------
 3 files changed, 26 insertions(+), 21 deletions(-)

diff --git a/packages/taro-plugin-vue3/src/index.ts b/packages/taro-plugin-vue3/src/index.ts
index c66fe74d386d..d62ae65cf151 100644
--- a/packages/taro-plugin-vue3/src/index.ts
+++ b/packages/taro-plugin-vue3/src/index.ts
@@ -4,15 +4,20 @@ import { modifyH5WebpackChain } from './webpack.h5'
 
 import type { IPluginContext } from '@tarojs/service'
 
+type CompilerOptions = {
+  isCustomElement: (tag: string) => boolean
+  whitespace: 'condense' | 'preserve'
+  delimiters: string[]
+  comments: boolean
+  nodeTransforms: ((...args: any) => void)[]
+}
 export interface IConfig {
   mini?: {
-    compilerOptions: {
-      isCustomElement: (tag: string) => boolean
-      whitespace: 'condense' | 'preserve'
-      delimiters: string[]
-      comments: boolean
-      nodeTransforms: ((...args: any) => void)[]
-    }
+    compilerOptions: CompilerOptions
+  },
+  vueLoaderOption?: {
+    compilerOptions: CompilerOptions
+    [key: string]: any
   }
 }
 
@@ -27,10 +32,10 @@ export default (ctx: IPluginContext, config: IConfig = {}) => {
 
     if (process.env.TARO_ENV === 'h5') {
       // H5
-      modifyH5WebpackChain(ctx, chain)
+      modifyH5WebpackChain(ctx, chain, config)
     } else {
       // 小程序
-      modifyMiniWebpackChain(ctx, chain, data, config.mini)
+      modifyMiniWebpackChain(ctx, chain, data, config)
     }
   })
 }
diff --git a/packages/taro-plugin-vue3/src/webpack.h5.ts b/packages/taro-plugin-vue3/src/webpack.h5.ts
index a090f4aa3142..cdba864295e1 100644
--- a/packages/taro-plugin-vue3/src/webpack.h5.ts
+++ b/packages/taro-plugin-vue3/src/webpack.h5.ts
@@ -5,12 +5,13 @@ import { getVueLoaderPath } from './index'
 
 import type { IPluginContext } from '@tarojs/service'
 import type { RootNode, TemplateChildNode, ElementNode } from '@vue/compiler-core'
+import type { IConfig } from './index'
 
-export function modifyH5WebpackChain (ctx: IPluginContext, chain) {
+export function modifyH5WebpackChain (ctx: IPluginContext, chain, config: IConfig) {
   // vue3 tsx 使用原生组件
   setAlias(chain)
   setStyleLoader(ctx, chain)
-  setVueLoader(chain)
+  setVueLoader(chain, config)
   setLoader(chain)
   setTaroApiLoader(chain)
 }
@@ -34,7 +35,7 @@ function setStyleLoader (ctx: IPluginContext, chain) {
     })
 }
 
-function setVueLoader (chain) {
+function setVueLoader (chain, config: IConfig) {
   const vueLoaderPath = getVueLoaderPath()
 
   // plugin
@@ -43,6 +44,7 @@ function setVueLoader (chain) {
     .plugin('vueLoaderPlugin')
     .use(VueLoaderPlugin)
 
+  const compilerOptions = config.vueLoaderOption?.compilerOptions || {}
   // loader
   const vueLoaderOption = {
     transformAssetUrls: {
@@ -59,7 +61,9 @@ function setVueLoader (chain) {
       'taro-image': 'src',
       'taro-cover-image': 'src'
     },
+    ...(config.vueLoaderOption ?? {}),
     compilerOptions: {
+      ...compilerOptions,
       // https://github.com/vuejs/vue-next/blob/master/packages/compiler-core/src/options.ts
       nodeTransforms: [(node: RootNode | TemplateChildNode) => {
         if (node.type === 1 /* ELEMENT */) {
diff --git a/packages/taro-plugin-vue3/src/webpack.mini.ts b/packages/taro-plugin-vue3/src/webpack.mini.ts
index a21a3dfdfe22..c73490b79ad2 100644
--- a/packages/taro-plugin-vue3/src/webpack.mini.ts
+++ b/packages/taro-plugin-vue3/src/webpack.mini.ts
@@ -9,15 +9,13 @@ import type { IConfig } from './index'
 
 const CUSTOM_WRAPPER = 'custom-wrapper'
 
-type MiniConfig = IConfig['mini']
-
-export function modifyMiniWebpackChain (_ctx: IPluginContext, chain, data, config: MiniConfig) {
+export function modifyMiniWebpackChain (_ctx: IPluginContext, chain, data, config: IConfig) {
   setVueLoader(chain, data, config)
   setLoader(chain)
   setDefinePlugin(chain)
 }
 
-function setVueLoader (chain, data, config: MiniConfig) {
+function setVueLoader (chain, data, config: IConfig) {
   const vueLoaderPath = getVueLoaderPath()
 
   // plugin
@@ -26,6 +24,7 @@ function setVueLoader (chain, data, config: MiniConfig) {
     .plugin('vueLoaderPlugin')
     .use(VueLoaderPlugin)
 
+  const compilerOptions = config.vueLoaderOption?.compilerOptions || config.mini?.compilerOptions || {}
   // loader
   const vueLoaderOption: any = {
     optimizeSSR: false,
@@ -37,11 +36,8 @@ function setVueLoader (chain, data, config: MiniConfig) {
       image: 'src',
       'cover-image': 'src'
     },
-    compilerOptions: {}
-  }
-
-  if (config?.compilerOptions) {
-    vueLoaderOption.compilerOptions = Object.assign({}, config.compilerOptions)
+    ...(config.vueLoaderOption ?? {}),
+    compilerOptions
   }
 
   vueLoaderOption.compilerOptions.nodeTransforms ||= []