chore(build): use taro-plugin-vue for build

b2nil · Sep 8, 2021 · da6d1d7 · da6d1d7
1 parent 951e166
commit da6d1d7
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 99 deletions.
diff --git a/build/shared.js b/build/shared.js
@@ -10,54 +10,18 @@ const taroInternalComponents = [
   "video", "canvas", "ad", "web-view", "block", "map", "open-data", "custom-wrapper", "canvas"
 ]
 
-const transformAssetUrls = {
-  video: ['src', 'poster'],
-  'live-player': ['src'],
-  audio: ['src'],
-  source: ['src'],
-  image: ['src'],
-  'cover-image': ['src']
-}
-
 const resolveFile = (p) => path.resolve(__dirname, '..', p)
 
 const writeToFile = (code, filename) => shell.ShellString(code).to(filename)
 const cleanFile = (filename) => shell.rm('-f', filename)
 const readFile = (filename) => shell.cat(filename).toString()
 
-function isMiniAppNativeTag(tag) {
-  return taroInternalComponents.includes(tag)
-}
-
 function removeCommentVnode(node, ctx) {
   if (node.type === 3 /* NodeTypes.COMMENT */) {
     ctx.removeNode(node)
   }
 }
 
-function transformTags(forH5 = false) {
-  return (node, ctx) => {
-    removeCommentVnode(node, ctx)
-    if (
-      node.type === 1 /* NodeTypes.ELEMENT */ &&
-      taroInternalComponents.includes(node.tag) /* is built-in tag*/
-    ) {
-      // miniapp tags should be prefixed with `taro-` 
-      // and be resolved by `resolveComponent` in h5
-      if (Boolean(forH5)) {
-        node.tag = `taro-${node.tag}`
-      }
-
-      // make all tags to be resolved by `resolveComponent`
-      node.tagType = 1 /* ElementTypes.COMPONENT */
-    }
-    // make all taro-ui tags to be resolved by `resolveComponent`
-    if (node.type === 1 && node.tag.startsWith('at-')) {
-      node.tagType = 1
-    }
-  }
-}
-
 // transform prop attributes to camelCase
 function transformPropAttributes(node) {
   if (node.type === 1) {
@@ -86,10 +50,7 @@ module.exports = {
   cleanFile,
   writeToFile,
   resolveFile,
-  transformTags,
-  isMiniAppNativeTag,
   removeCommentVnode,
   transformPropAttributes,
-  transformAssetUrls,
   taroInternalComponents
 }
diff --git a/build/vite.bundle.js b/build/vite.bundle.js
@@ -1,43 +1,26 @@
 const vite = require("vite")
 const pkg = require("../package.json")
 const shell = require('shelljs')
-const vuePlugin = require('@vitejs/plugin-vue')
+const { vuePlugin } = require('taro-plugin-vue')
 
 const {
   resolveFile,
-  transformTags,
-  isMiniAppNativeTag,
   removeCommentVnode,
-  transformAssetUrls,
   transformPropAttributes
 } = require("./shared")
 
 const peerDeps = Object.keys(pkg.peerDependencies)
 
-const genVuePluginOptions = (
-  nodeTransforms,
-  transformAssetUrls,
-  isCustomElement
-) => {
-  let compilerOptions = {
-    mode: "module",
-    optimizeImports: true,
-    comments: false,
-    nodeTransforms
-  }
-
-  if (isCustomElement) {
-    compilerOptions = {
-      ...compilerOptions,
-      isCustomElement
-    }
-  }
-
+const genVuePluginOptions = (h5 = false) => {
   return {
+    h5,
     template: {
-      ssr: false,
-      transformAssetUrls,
-      compilerOptions,
+      compilerOptions: {
+        nodeTransforms: [
+          removeCommentVnode,
+          transformPropAttributes
+        ]
+      }
     }
   }
 }
@@ -84,13 +67,7 @@ const baseUserConfig = {
 const miniappConfig = {
   ...baseUserConfig,
   plugins: [
-    vuePlugin(
-      genVuePluginOptions(
-        [removeCommentVnode, transformPropAttributes],
-        transformAssetUrls,
-        isMiniAppNativeTag
-      )
-    )
+    vuePlugin(genVuePluginOptions())
   ],
   build: {
     ...baseUserConfig.build,
@@ -107,12 +84,7 @@ const h5Config = {
     'process.env.TARO_ENV': 'process.env.TARO_ENV'
   },
   plugins: [
-    vuePlugin(
-      genVuePluginOptions(
-        [transformTags(true), transformPropAttributes],
-        transformAssetUrls
-      )
-    ),
+    vuePlugin(genVuePluginOptions(true)),
   ],
   build: {
     ...baseUserConfig.build,

diff --git a/build/vite.lib.js b/build/vite.lib.js
@@ -1,13 +1,11 @@
 const vite = require("vite")
-const vuePlugin = require('@vitejs/plugin-vue')
+const { vuePlugin } = require('taro-plugin-vue')
 
 const {
   readFile,
   cleanFile,
   writeToFile,
   resolveFile,
-  transformTags,
-  transformAssetUrls,
   taroInternalComponents
 } = require("./shared")
 
@@ -94,19 +92,6 @@ const genOutDir = (source) => source
   .replace('packages', 'lib')
   .replace(/(\/index\.ts|\/index\.vue)/g, '')
 
-const vuePluginOptions = {
-  template: {
-    ssr: false,
-    transformAssetUrls,
-    compilerOptions: {
-      mode: "module",
-      optimizeImports: true,
-      comments: false,
-      nodeTransforms: [transformTags()]
-    }
-  }
-}
-
 const genViteConfig = (source, isVue) => ({
   define: {
     'process.env.TARO_ENV': 'process.env.TARO_ENV'
@@ -115,7 +100,7 @@ const genViteConfig = (source, isVue) => ({
     extensions: ['.json', '.js', '.ts', '.vue']
   },
   plugins: [
-    isVue && vuePlugin(vuePluginOptions)
+    isVue && vuePlugin({ h5: true })
   ],
   build: {
     target: 'esnext',
@@ -162,10 +147,10 @@ async function transformFinalCode(source) {
 
     for (const m of matches) {
       const func = m.replace(resolveReg, "$1")
-      const tag = m.replace(resolveReg, "$2")
-
-      if (taroInternalComponents.includes(tag)) {
-        const r = `process.env.TARO_ENV === "h5" ? ${func}("taro-${tag}") : "${tag}";`
+      const h5Tag = m.replace(resolveReg, "$2")
+      const miniTag = h5Tag.substring(5)
+      if (taroInternalComponents.includes(miniTag)) {
+        const r = `process.env.TARO_ENV === "h5" ? ${func}("${h5Tag}") : "${miniTag}";`
         code = code.replace(m, r)
       }
     }