feat: build library with specified formats (#2583)

Author: tibramo

packages/@vue/cli-service/__tests__/buildLibFormats.spec.js

@@ -0,0 +1,51 @@
+jest.setTimeout(40000)
+
+const { defaultPreset } = require('@vue/cli/lib/options')
+const create = require('@vue/cli-test-utils/createTestProject')
+
+let project
+
+beforeAll(async () => {
+  project = await create('build-lib-formats', defaultPreset)
+})
+
+test('build as lib with default formats', async () => {
+  const { stdout } = await project.run('vue-cli-service build --target lib --name testLib src/components/HelloWorld.vue')
+  expect(stdout).toMatch('Build complete.')
+
+  expect(project.has('dist/demo.html')).toBe(true)
+  expect(project.has('dist/testLib.common.js')).toBe(true)
+  expect(project.has('dist/testLib.umd.js')).toBe(true)
+  expect(project.has('dist/testLib.umd.min.js')).toBe(true)
+  expect(project.has('dist/testLib.css')).toBe(true)
+})
+test('build as lib with formats commonjs and umd', async () => {
+  const { stdout } = await project.run('vue-cli-service build --target lib --formats commonjs,umd --name testLib src/components/HelloWorld.vue')
+  expect(stdout).toMatch('Build complete.')
+
+  expect(project.has('dist/demo.html')).toBe(true)
+  expect(project.has('dist/testLib.common.js')).toBe(true)
+  expect(project.has('dist/testLib.umd.js')).toBe(true)
+  expect(project.has('dist/testLib.umd.min.js')).toBe(false)
+  expect(project.has('dist/testLib.css')).toBe(true)
+})
+
+test('build as lib with format umd-min', async () => {
+  const { stdout } = await project.run('vue-cli-service build --target lib --formats umd-min --name testLib src/components/HelloWorld.vue')
+  expect(stdout).toMatch('Build complete.')
+
+  expect(project.has('dist/demo.html')).toBe(false)
+  expect(project.has('dist/testLib.common.js')).toBe(false)
+  expect(project.has('dist/testLib.umd.js')).toBe(false)
+  expect(project.has('dist/testLib.umd.min.js')).toBe(true)
+  expect(project.has('dist/testLib.css')).toBe(true)
+})
+
+test('build as lib with unknown formats throws an error', async () => {
+  try {
+    await project.run('vue-cli-service build --target lib --formats umd,x,y --name testLib src/components/HelloWorld.vue')
+  } catch (e) {
+    expect(e.code).toBe(1)
+    expect(e.failed).toBeTruthy()
+  }
+})

packages/@vue/cli-service/lib/commands/build/index.js

@@ -1,11 +1,12 @@
 const defaults = {
   clean: true,
   target: 'app',
+  formats: 'commonjs,umd,umd-min',
   'unsafe-inline': true
 }
 
 const buildModes = {
-  lib: 'library (commonjs + umd)',
+  lib: 'library',
   wc: 'web component',
   'wc-async': 'web component (async)'
 }
@@ -28,6 +29,7 @@ module.exports = (api, options) => {
       '--modern': `build app targeting modern browsers with auto fallback`,
       '--no-unsafe-inline': `build app without introducing inline scripts`,
       '--target': `app | lib | wc | wc-async (default: ${defaults.target})`,
+      '--formats': `list of output formats for library builds (default: ${defaults.formats})`,
       '--name': `name for lib or web-component mode (default: "name" in package.json or entry filename)`,
       '--no-clean': `do not remove the dist directory before building the project`,
       '--report': `generate report.html to help analyze bundle content`,
@@ -104,7 +106,8 @@ async function build (args, api, options) {
   } else {
     const buildMode = buildModes[args.target]
     if (buildMode) {
-      logWithSpinner(`Building for ${mode} as ${buildMode}...`)
+      const additionalParams = buildMode === 'library' ? ` (${args.formats})` : ``
+      logWithSpinner(`Building for ${mode} as ${buildMode}${additionalParams}...`)
     } else {
       throw new Error(`Unknown build target: ${args.target}`)
     }

packages/@vue/cli-service/lib/commands/build/resolveLibConfig.js

@@ -1,7 +1,7 @@
 const fs = require('fs')
 const path = require('path')
 
-module.exports = (api, { entry, name }, options) => {
+module.exports = (api, { entry, name, formats }, options) => {
   const { log, error } = require('@vue/cli-shared-utils')
   const abort = msg => {
     log()
@@ -114,9 +114,20 @@ module.exports = (api, { entry, name }, options) => {
     return rawConfig
   }
 
-  return [
-    genConfig('commonjs2', 'common'),
-    genConfig('umd', undefined, true),
-    genConfig('umd', 'umd.min')
-  ]
+  const configMap = {
+    commonjs: genConfig('commonjs2', 'common'),
+    umd: genConfig('umd', undefined, true),
+    'umd-min': genConfig('umd', 'umd.min')
+  }
+
+  const formatArray = (formats + '').split(',')
+  const configs = formatArray.map(format => configMap[format])
+  if (configs.indexOf(undefined) !== -1) {
+    const unknownFormats = formatArray.filter(f => configMap[f] === undefined).join(', ')
+    abort(
+      `Unknown library build formats: ${unknownFormats}`
+    )
+  }
+
+  return configs
 }