fix(build runtime) 修复打包运行时报错问题 (#185)

* fix(build runtime) 修复打包运行时报错问题

* fix(build runtime) 删除多余注释

* fix(build runtime) 优化代码缩进和逻辑

internals/cli/src/commands/build/build-runtime.ts

@@ -7,10 +7,9 @@ import type { BuildUiOption } from './build-ui'
 import { pathFromPackages, getBaseConfig, requireModules } from './build-ui'
 import commonjs from '@rollup/plugin-commonjs'
 
-const runtimeDir = 'dist/@opentiny/vue/runtime'
-
 async function batchBuildAll({ vueVersion, tasks, message, emptyOutDir, npmScope, min }) {
   const rootDir = pathFromPackages('')
+  const runtimeDir = `dist${vueVersion}/@opentiny/vue/runtime`
   const outDir = path.resolve(rootDir, runtimeDir)
 
   await batchBuild({
@@ -41,7 +40,13 @@ async function batchBuildAll({ vueVersion, tasks, message, emptyOutDir, npmScope
     utils.logGreen(`====== 开始构建 ${message} ======`)
 
     const entry = toEntry(tasks)
-    const baseConfig = getBaseConfig({ vueVersion, dtsInclude: [], dts: false, npmScope }) as UserConfig
+    const baseConfig = getBaseConfig({
+      vueVersion,
+      dtsInclude: [],
+      dts: false,
+      npmScope,
+      isRuntime: true
+    }) as UserConfig
 
     baseConfig.define = Object.assign(baseConfig.define || {}, {
       'process.env.BUILD_TARGET': JSON.stringify(vueVersion !== '3' ? 'runtime' : 'component'),
@@ -96,6 +101,7 @@ async function batchBuildAll({ vueVersion, tasks, message, emptyOutDir, npmScope
         },
         lib: {
           entry,
+          formats: ['es'],
           fileName: (format, entryName) => `${entryName}${min ? '.min' : ''}.${format === 'es' ? 'm' : ''}js`,
           name: 'Tiny'
         },
@@ -120,7 +126,7 @@ function getEntryTasks() {
 }
 
 export async function buildRuntime({
-  vueVersions = ['2', '2.7', '3'],
+  vueVersions = ['2', '3'],
   clean = false,
   scope = 'opentiny',
   min = false
@@ -134,7 +140,7 @@ export async function buildRuntime({
   // 要构建的vue框架版本
   for (const vueVersion of vueVersions) {
     const message = `TINY for vue${vueVersion}: runtime`
-    await batchBuildAll({ vueVersion, tasks: [tasks[0]], message, emptyOutDir, npmScope: scope, min })
+    await batchBuildAll({ vueVersion, tasks, message, emptyOutDir, npmScope: scope, min })
     // 确保只运行一次
     emptyOutDir = false
   }

internals/cli/src/commands/build/build-ui.ts

@@ -52,7 +52,7 @@ export const getVuePlugins = (vueVersion: string) => {
 
 export const ns = (ver) => ({ '2': '', '2.7': '2', '3': '3' }[ver] || '')
 
-export const getBaseConfig = ({ vueVersion, dtsInclude, dts, buildTarget, themeVersion }) => {
+export const getBaseConfig = ({ vueVersion, dtsInclude, dts, buildTarget, themeVersion, isRuntime }) => {
   // 处理tsconfig中配置，主要是处理paths映射，确保dts可以找到正确的包
   const compilerOptions = require(pathFromWorkspaceRoot(`tsconfig.vue${vueVersion}.json`)).compilerOptions
 
@@ -62,88 +62,87 @@ export const getBaseConfig = ({ vueVersion, dtsInclude, dts, buildTarget, themeV
       // pc和mobile的总入口可能是/src/index.ts或者/src/index.vue
       virtualTemplatePlugin({ include: ['**/packages/vue/**/src/index.ts', '**/packages/vue/**/src/index.vue'] }),
       ...getVuePlugins(vueVersion),
-      dts
-        ? dtsPlugin({
-            root: pathFromWorkspaceRoot(),
-            tsConfigFilePath: `tsconfig.vue${vueVersion}.json`,
-            aliasesExclude: [/@opentiny\/vue.+/],
-            compilerOptions: {
-              paths: {
-                ...compilerOptions.paths,
-                // 一定要映射到 packages/vue 下对应的 vue 版本和 @vue/composition-api 才能正确生成 dts
-                'vue': [`packages/vue/node_modules/vue${vueVersion}`],
-                '@vue/runtime-core': ['packages/vue/node_modules/@vue/runtime-core'],
-                '@vue/runtime-dom': ['packages/vue/node_modules/@vue/runtime-dom'],
-                '@vue/composition-api': ['packages/vue/node_modules/@vue/composition-api']
-              }
-            },
-            include: [...dtsInclude, 'packages/vue/*.d.ts'],
-            // 忽略类型检查错误，保证生成不会阻断
-            skipDiagnostics: true,
-            beforeWriteFile: (filePath, content) => {
-              return {
-                // "vue/src/alert/index.d.ts" ==> "alert/index.d.ts"
-                filePath: filePath.replace('/vue/src', '').replace('\\vue\\src', ''),
-                content: content
-                  // vue 2.7 还不能正常识别 vue-common
-                  .replace(/import\('[./]+vue-common.+'\)/, 'import("vue")')
-                  .replace(/\("vue[1-9\.]+/g, '("vue')
-              }
+      dts &&
+        dtsPlugin({
+          root: pathFromWorkspaceRoot(),
+          tsConfigFilePath: `tsconfig.vue${vueVersion}.json`,
+          aliasesExclude: [/@opentiny\/vue.+/],
+          compilerOptions: {
+            paths: {
+              ...compilerOptions.paths,
+              // 一定要映射到 packages/vue 下对应的 vue 版本和 @vue/composition-api 才能正确生成 dts
+              'vue': [`packages/vue/node_modules/vue${vueVersion}`],
+              '@vue/runtime-core': ['packages/vue/node_modules/@vue/runtime-core'],
+              '@vue/runtime-dom': ['packages/vue/node_modules/@vue/runtime-dom'],
+              '@vue/composition-api': ['packages/vue/node_modules/@vue/composition-api']
             }
-          })
-        : undefined,
+          },
+          include: [...dtsInclude, 'packages/vue/*.d.ts'],
+          // 忽略类型检查错误，保证生成不会阻断
+          skipDiagnostics: true,
+          beforeWriteFile: (filePath, content) => {
+            return {
+              // "vue/src/alert/index.d.ts" ==> "alert/index.d.ts"
+              filePath: filePath.replace('/vue/src', '').replace('\\vue\\src', ''),
+              content: content
+                // vue 2.7 还不能正常识别 vue-common
+                .replace(/import\('[./]+vue-common.+'\)/, 'import("vue")')
+                .replace(/\("vue[1-9\.]+/g, '("vue')
+            }
+          }
+        }),
       inlineChunksPlugin({ deleteInlinedFiles: true }),
-      // 打包 icon的runtime产物时，记得注释掉下面插件
-      generatePackageJsonPlugin({
-        beforeWriteFile: (filePath, content) => {
-          const versionTarget = `${vueVersion}.${buildTarget}`
-          const themeAndRenderlessVersion = `3.${themeVersion || buildTarget}`
-          const isThemeOrRenderless = (key) =>
-            key.includes('@opentiny/vue-theme') || key.includes('@opentiny/vue-renderless')
+      !isRuntime &&
+        generatePackageJsonPlugin({
+          beforeWriteFile: (filePath, content) => {
+            const versionTarget = `${vueVersion}.${buildTarget}`
+            const themeAndRenderlessVersion = `3.${themeVersion || buildTarget}`
+            const isThemeOrRenderless = (key) =>
+              key.includes('@opentiny/vue-theme') || key.includes('@opentiny/vue-renderless')
 
-          const dependencies = {}
+            const dependencies = {}
 
-          Object.entries(content.dependencies).forEach(([key, value]) => {
-            if (isThemeOrRenderless(key)) {
-              dependencies[key] = `~${themeAndRenderlessVersion}`
-            } else if ((value as string).includes('workspace:~')) {
-              dependencies[key] = `~${versionTarget}`
-            } else {
-              dependencies[key] = value
+            Object.entries(content.dependencies).forEach(([key, value]) => {
+              if (isThemeOrRenderless(key)) {
+                dependencies[key] = `~${themeAndRenderlessVersion}`
+              } else if ((value as string).includes('workspace:~')) {
+                dependencies[key] = `~${versionTarget}`
+              } else {
+                dependencies[key] = value
+              }
+            })
+
+            if (filePath.includes('vue-common') && vueVersion === '2') {
+              dependencies['@vue/composition-api'] = '~1.2.2'
             }
-          })
 
-          if (filePath.includes('vue-common') && vueVersion === '2') {
-            dependencies['@vue/composition-api'] = '~1.2.2'
+            // 如果是主入口或者svg图标则直接指向相同路径
+            if (filePath === 'vue-icon' || filePath === 'vue') {
+              content.main = './index.js'
+            } else {
+              content.main = './lib/index.js'
+            }
+
+            content.types = 'index.d.ts'
+
+            if (filePath.includes('vue-common') || filePath.includes('vue-locale')) {
+              content.types = './src/index.d.ts'
+            }
+
+            content.version = versionTarget
+            content.dependencies = dependencies
+
+            delete content.module
+            delete content.devDependencies
+            delete content.private
+            delete content.exports
+
+            return {
+              filePath: filePath.replace(/[\\/]lib$/, ''),
+              content
+            }
           }
-
-          // 如果是主入口或者svg图标则直接指向相同路径
-          if (filePath === 'vue-icon' || filePath === 'vue') {
-            content.main = './index.js'
-          } else {
-            content.main = './lib/index.js'
-          }
-
-          content.types = 'index.d.ts'
-
-          if (filePath.includes('vue-common') || filePath.includes('vue-locale')) {
-            content.types = './src/index.d.ts'
-          }
-
-          content.version = versionTarget
-          content.dependencies = dependencies
-
-          delete content.module
-          delete content.devDependencies
-          delete content.private
-          delete content.exports
-
-          return {
-            filePath: filePath.replace(/[\\/]lib$/, ''),
-            content
-          }
-        }
-      }),
+        }),
       replaceModuleNamePlugin()
     ],
     resolve: {
@@ -195,7 +194,7 @@ async function batchBuildAll({ vueVersion, tasks, formats, message, emptyOutDir,
     const dtsInclude = toTsInclude(tasks)
     await build({
       configFile: false,
-      ...getBaseConfig({ vueVersion, dtsInclude, dts, buildTarget, themeVersion }),
+      ...getBaseConfig({ vueVersion, dtsInclude, dts, buildTarget, themeVersion, isRuntime: false }),
       build: {
         emptyOutDir,
         minify: false,