chore: dev build for multi-packages (#10108)

scripts/dev.js

@@ -14,11 +14,10 @@ import { polyfillNode } from 'esbuild-plugin-polyfill-node'
 const require = createRequire(import.meta.url)
 const __dirname = dirname(fileURLToPath(import.meta.url))
 const args = minimist(process.argv.slice(2))
-const target = args._[0] || 'vue'
+const targets = args._ || ['vue']
 const format = args.f || 'global'
 const prod = args.p || false
 const inlineDeps = args.i || args.inline
-const pkg = require(`../packages/${target}/package.json`)
 
 // resolve output
 const outputFormat = format.startsWith('global')
@@ -31,101 +30,104 @@ const postfix = format.endsWith('-runtime')
   ? `runtime.${format.replace(/-runtime$/, '')}`
   : format
 
-const outfile = resolve(
-  __dirname,
-  `../packages/${target}/dist/${
-    target === 'vue-compat' ? `vue` : target
-  }.${postfix}.${prod ? `prod.` : ``}js`,
-)
-const relativeOutfile = relative(process.cwd(), outfile)
+for (const target of targets) {
+  const pkg = require(`../packages/${target}/package.json`)
+  const outfile = resolve(
+    __dirname,
+    `../packages/${target}/dist/${
+      target === 'vue-compat' ? `vue` : target
+    }.${postfix}.${prod ? `prod.` : ``}js`,
+  )
+  const relativeOutfile = relative(process.cwd(), outfile)
 
-// resolve externals
-// TODO this logic is largely duplicated from rollup.config.js
-/** @type {string[]} */
-let external = []
-if (!inlineDeps) {
-  // cjs & esm-bundler: external all deps
-  if (format === 'cjs' || format.includes('esm-bundler')) {
-    external = [
-      ...external,
-      ...Object.keys(pkg.dependencies || {}),
-      ...Object.keys(pkg.peerDependencies || {}),
-      // for @vue/compiler-sfc / server-renderer
-      'path',
-      'url',
-      'stream',
-    ]
-  }
+  // resolve externals
+  // TODO this logic is largely duplicated from rollup.config.js
+  /** @type {string[]} */
+  let external = []
+  if (!inlineDeps) {
+    // cjs & esm-bundler: external all deps
+    if (format === 'cjs' || format.includes('esm-bundler')) {
+      external = [
+        ...external,
+        ...Object.keys(pkg.dependencies || {}),
+        ...Object.keys(pkg.peerDependencies || {}),
+        // for @vue/compiler-sfc / server-renderer
+        'path',
+        'url',
+        'stream',
+      ]
+    }
 
-  if (target === 'compiler-sfc') {
-    const consolidatePkgPath = require.resolve(
-      '@vue/consolidate/package.json',
-      {
-        paths: [resolve(__dirname, `../packages/${target}/`)],
-      },
-    )
-    const consolidateDeps = Object.keys(
-      require(consolidatePkgPath).devDependencies,
-    )
-    external = [
-      ...external,
-      ...consolidateDeps,
-      'fs',
-      'vm',
-      'crypto',
-      'react-dom/server',
-      'teacup/lib/express',
-      'arc-templates/dist/es5',
-      'then-pug',
-      'then-jade',
-    ]
+    if (target === 'compiler-sfc') {
+      const consolidatePkgPath = require.resolve(
+        '@vue/consolidate/package.json',
+        {
+          paths: [resolve(__dirname, `../packages/${target}/`)],
+        },
+      )
+      const consolidateDeps = Object.keys(
+        require(consolidatePkgPath).devDependencies,
+      )
+      external = [
+        ...external,
+        ...consolidateDeps,
+        'fs',
+        'vm',
+        'crypto',
+        'react-dom/server',
+        'teacup/lib/express',
+        'arc-templates/dist/es5',
+        'then-pug',
+        'then-jade',
+      ]
+    }
   }
-}
-/** @type {Array<import('esbuild').Plugin>} */
-const plugins = [
-  {
-    name: 'log-rebuild',
-    setup(build) {
-      build.onEnd(() => {
-        console.log(`built: ${relativeOutfile}`)
-      })
+  /** @type {Array<import('esbuild').Plugin>} */
+  const plugins = [
+    {
+      name: 'log-rebuild',
+      setup(build) {
+        build.onEnd(() => {
+          console.log(`built: ${relativeOutfile}`)
+        })
+      },
     },
-  },
-]
+  ]
 
-if (format !== 'cjs' && pkg.buildOptions?.enableNonBrowserBranches) {
-  plugins.push(polyfillNode())
-}
+  if (format !== 'cjs' && pkg.buildOptions?.enableNonBrowserBranches) {
+    plugins.push(polyfillNode())
+  }
 
-esbuild
-  .context({
-    entryPoints: [resolve(__dirname, `../packages/${target}/src/index.ts`)],
-    outfile,
-    bundle: true,
-    external,
-    sourcemap: true,
-    format: outputFormat,
-    globalName: pkg.buildOptions?.name,
-    platform: format === 'cjs' ? 'node' : 'browser',
-    plugins,
-    define: {
-      __COMMIT__: `"dev"`,
-      __VERSION__: `"${pkg.version}"`,
-      __DEV__: prod ? `false` : `true`,
-      __TEST__: `false`,
-      __BROWSER__: String(
-        format !== 'cjs' && !pkg.buildOptions?.enableNonBrowserBranches,
-      ),
-      __GLOBAL__: String(format === 'global'),
-      __ESM_BUNDLER__: String(format.includes('esm-bundler')),
-      __ESM_BROWSER__: String(format.includes('esm-browser')),
-      __CJS__: String(format === 'cjs'),
-      __SSR__: String(format === 'cjs' || format.includes('esm-bundler')),
-      __COMPAT__: String(target === 'vue-compat'),
-      __FEATURE_SUSPENSE__: `true`,
-      __FEATURE_OPTIONS_API__: `true`,
-      __FEATURE_PROD_DEVTOOLS__: `false`,
-      __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__: `false`,
-    },
-  })
-  .then(ctx => ctx.watch())
+  esbuild
+    .context({
+      entryPoints: [resolve(__dirname, `../packages/${target}/src/index.ts`)],
+      outfile,
+      bundle: true,
+      external,
+      sourcemap: true,
+      format: outputFormat,
+      globalName: pkg.buildOptions?.name,
+      platform: format === 'cjs' ? 'node' : 'browser',
+      plugins,
+      define: {
+        __COMMIT__: `"dev"`,
+        __VERSION__: `"${pkg.version}"`,
+        __DEV__: prod ? `false` : `true`,
+        __TEST__: `false`,
+        __BROWSER__: String(
+          format !== 'cjs' && !pkg.buildOptions?.enableNonBrowserBranches,
+        ),
+        __GLOBAL__: String(format === 'global'),
+        __ESM_BUNDLER__: String(format.includes('esm-bundler')),
+        __ESM_BROWSER__: String(format.includes('esm-browser')),
+        __CJS__: String(format === 'cjs'),
+        __SSR__: String(format === 'cjs' || format.includes('esm-bundler')),
+        __COMPAT__: String(target === 'vue-compat'),
+        __FEATURE_SUSPENSE__: `true`,
+        __FEATURE_OPTIONS_API__: `true`,
+        __FEATURE_PROD_DEVTOOLS__: `false`,
+        __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__: `false`,
+      },
+    })
+    .then(ctx => ctx.watch())
+}