workflow: improve build & dev scripts

scripts/build.js

@@ -1,3 +1,19 @@
+/*
+Produce prodcution builds and stitch toegether d.ts files.
+
+To specific the package to build, simply pass its name and the desired build
+formats to output (defaults to `buildOptions.formats` specified in that package,
+or "esm,cjs"):
+
+```
+# name supports fuzzy match. will build all packages with name containing "dom":
+yarn build dom
+
+# specify the format to output
+yarn build core --formats cjs
+```
+*/
+
 const fs = require('fs-extra')
 const path = require('path')
 const zlib = require('zlib')
@@ -6,8 +22,9 @@ const execa = require('execa')
 const dts = require('dts-bundle')
 const { targets, fuzzyMatchTarget } = require('./utils')
 
-const target = process.argv[2]
+const args = require('minimist')(process.argv.slice(2))
-
+const target = args._[0]
+const formats = args.formats || args.f
 ;(async () => {
   if (!target) {
     await buildAll(targets)
@@ -18,22 +35,28 @@ const target = process.argv[2]
   }
 })()
 
-async function buildAll (targets) {
+async function buildAll(targets) {
   for (const target of targets) {
     await build(target)
   }
 }
 
-async function build (target) {
+async function build(target) {
   const pkgDir = path.resolve(`packages/${target}`)
 
   await fs.remove(`${pkgDir}/dist`)
 
-  await execa('rollup', [
+  await execa(
-    '-c',
+    'rollup',
-    '--environment',
+    [
-    `NODE_ENV:production,TARGET:${target}`
+      '-c',
-  ], { stdio: 'inherit' })
+      '--environment',
+      `NODE_ENV:production,` +
+        `TARGET:${target}` +
+        (formats ? `FORMATS:${formats}` : ``)
+    ],
+    { stdio: 'inherit' }
+  )
 
   const dtsOptions = {
     name: target === 'vue' ? target : `@vue/${target}`,
@@ -47,7 +70,7 @@ async function build (target) {
   await fs.remove(`${pkgDir}/dist/packages`)
 }
 
-function checkAllSizes (targets) {
+function checkAllSizes(targets) {
   console.log()
   for (const target of targets) {
     checkSize(target)
@@ -55,7 +78,7 @@ function checkAllSizes (targets) {
   console.log()
 }
 
-function checkSize (target) {
+function checkSize(target) {
   const pkgDir = path.resolve(`packages/${target}`)
   const esmProdBuild = `${pkgDir}/dist/${target}.esm-browser.prod.js`
   if (fs.existsSync(esmProdBuild)) {
@@ -63,8 +86,8 @@ function checkSize (target) {
     const minSize = (file.length / 1024).toFixed(2) + 'kb'
     const gzipped = zlib.gzipSync(file)
     const gzipSize = (gzipped.length / 1024).toFixed(2) + 'kb'
-    console.log(`${
+    console.log(
-      chalk.gray(chalk.bold(target))
+      `${chalk.gray(chalk.bold(target))} min:${minSize} / gzip:${gzipSize}`
-    } min:${minSize} / gzip:${gzipSize}`)
+    )
   }
 }

scripts/dev.js

@@ -1,24 +1,28 @@
-// Run Rollup in watch mode for a single package for development.
+/*
-// Only the ES modules format will be generated, as it is expected to be tested
+Run Rollup in watch mode for development.
-// in a modern browser using <script type="module">.
+
-// Defaults to watch the `vue` meta package.
+To specific the package to watch, simply pass its name and the desired build
-// To specific the package to watch, simply pass its name. e.g.
+formats to watch (defaults to "umd"):
-// ```
+
-// yarn dev observer
+```
-// ```
+# name supports fuzzy match. will watch all packages with name containing "dom"
+yarn dev dom
+
+# specify the format to output
+yarn dev core --formats cjs
+```
+*/
 
 const execa = require('execa')
 const { targets, fuzzyMatchTarget } = require('./utils')
 
-const target = fuzzyMatchTarget(process.argv[2] || 'runtime-dom')
+const args = require('minimist')(process.argv.slice(2))
+const target = fuzzyMatchTarget(args._[0] || 'runtime-dom')
+const formats = args.formats || args.f
 
 execa(
   'rollup',
-  [
+  ['-wc', '--environment', `TARGET:${target},FORMATS:${formats || 'umd'}`],
-    '-wc',
-    '--environment',
-    `TARGET:${target},FORMATS:umd`
-  ],
   {
     stdio: 'inherit'
   }