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

* feat(vue3): 允许用户对vue-loader传入配置项 * feat(vue3): 允许配置vueLoader参数 Co-authored-by: chenjiajian <[email protected]>
NervJS · Apr 26, 2022 · 637e4e1 · 637e4e1
1 parent 4c4c1e6
commit 637e4e1
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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 ||= []