feat: add --filename option to specify the output (lib) file name (#3703)

Author: NickeyLin

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

@@ -132,3 +132,45 @@ test('build as lib with webpackConfiguration depending on target (js)', async ()
   const commonContent = await project.read('dist/testLib.common.js')
   expect(commonContent).not.toContain(`foo: 'bar'`)
 })
+
+test('build as lib with --filename option', async () => {
+  const project = await create('build-lib-filename-option', defaultPreset)
+  await project.write('src/main.js', `
+      export default { foo: 1 }
+      export const bar = 2
+    `)
+  const { stdout } = await project.run('vue-cli-service build --target lib --name testLib --filename test-lib src/main.js')
+  expect(stdout).toMatch('Build complete.')
+
+  expect(project.has('dist/demo.html')).toBe(true)
+  expect(project.has('dist/test-lib.common.js')).toBe(true)
+  expect(project.has('dist/test-lib.umd.js')).toBe(true)
+  expect(project.has('dist/test-lib.umd.min.js')).toBe(true)
+
+  const port = await portfinder.getPortPromise()
+  server = createServer({ root: path.join(project.dir, 'dist') })
+
+  await new Promise((resolve, reject) => {
+    server.listen(port, err => {
+      if (err) return reject(err)
+      resolve()
+    })
+  })
+
+  const launched = await launchPuppeteer(`http://localhost:${port}/demo.html`)
+  browser = launched.browser
+  page = launched.page
+
+  expect(await page.evaluate(() => {
+    return window.document.title
+  })).toBe('testLib demo')
+
+  // should expose a module with default and named exports
+  expect(await page.evaluate(() => {
+    return window.testLib.default.foo
+  })).toBe(1)
+
+  expect(await page.evaluate(() => {
+    return window.testLib.bar
+  })).toBe(2)
+})

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

@@ -1,8 +1,8 @@
 <meta charset="utf-8">
 <title><%- htmlWebpackPlugin.options.libName %> demo</title>
-<script src="./<%- htmlWebpackPlugin.options.libName %>.umd.js"></script>
+<script src="./<%- htmlWebpackPlugin.options.assetsFileName %>.umd.js"></script>
 <% if (htmlWebpackPlugin.options.cssExtract) { %>
-<link rel="stylesheet" href="./<%- htmlWebpackPlugin.options.libName %>.css">
+<link rel="stylesheet" href="./<%- htmlWebpackPlugin.options.assetsFileName %>.css">
 <% } %>
 
 <script>

packages/@vue/cli-service/lib/commands/build/demo-lib.html

@@ -1,9 +1,9 @@
 <meta charset="utf-8">
 <title><%- htmlWebpackPlugin.options.libName %> demo</title>
 <script src="https://unpkg.com/vue"></script>
-<script src="./<%- htmlWebpackPlugin.options.libName %>.umd.js"></script>
+<script src="./<%- htmlWebpackPlugin.options.assetsFileName %>.umd.js"></script>
 <% if (htmlWebpackPlugin.options.cssExtract) { %>
-<link rel="stylesheet" href="./<%- htmlWebpackPlugin.options.libName %>.css">
+<link rel="stylesheet" href="./<%- htmlWebpackPlugin.options.assetsFileName %>.css">
 <% } %>
 
 <div id="app">

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

@@ -31,6 +31,7 @@ module.exports = (api, options) => {
       '--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)`,
+      '--filename': `file name for output, only usable for 'lib' target (default: value of --name)`,
       '--no-clean': `do not remove the dist directory before building the project`,
       '--report': `generate report.html to help analyze bundle content`,
       '--report-json': 'generate report.json to help analyze bundle content',

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, formats }, options) => {
+module.exports = (api, { entry, name, formats, filename }, options) => {
   const { log, error } = require('@vue/cli-shared-utils')
   const abort = msg => {
     log()
@@ -24,7 +24,7 @@ module.exports = (api, { entry, name, formats }, options) => {
     api.service.pkg.name ||
     path.basename(entry).replace(/\.(jsx?|vue)$/, '')
   )
-
+  filename = filename || libName
   function genConfig (format, postfix = format, genHTML) {
     const config = api.resolveChainableWebpackConfig()
 
@@ -43,7 +43,7 @@ module.exports = (api, { entry, name, formats }, options) => {
       config
         .plugin('extract-css')
           .tap(args => {
-            args[0].filename = `${libName}.css`
+            args[0].filename = `${filename}.css`
             return args
           })
     }
@@ -74,12 +74,13 @@ module.exports = (api, { entry, name, formats }, options) => {
             inject: false,
             filename: 'demo.html',
             libName,
+            assetsFileName: filename,
             cssExtract: config.plugins.has('extract-css')
           }])
     }
 
     // resolve entry/output
-    const entryName = `${libName}.${postfix}`
+    const entryName = `${filename}.${postfix}`
     config.resolve
       .alias
         .set('~entry', fullEntryPath)