From 5fa42a34cacd7d67a8771790bbf96033631ce1a6 Mon Sep 17 00:00:00 2001 From: "Nick.Lin" Date: Mon, 25 Mar 2019 15:19:14 +0800 Subject: [PATCH] feat(cli-service): add --filename option to specify the output file name; --- .../cli-service/__tests__/buildLib.spec.js | 42 +++++++++++++++++++ .../lib/commands/build/demo-lib-js.html | 4 +- .../lib/commands/build/demo-lib.html | 4 +- .../cli-service/lib/commands/build/index.js | 1 + .../lib/commands/build/resolveLibConfig.js | 9 ++-- 5 files changed, 52 insertions(+), 8 deletions(-) diff --git a/packages/@vue/cli-service/__tests__/buildLib.spec.js b/packages/@vue/cli-service/__tests__/buildLib.spec.js index efb1e8a405..1acc6940cf 100644 --- a/packages/@vue/cli-service/__tests__/buildLib.spec.js +++ b/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) +}) diff --git a/packages/@vue/cli-service/lib/commands/build/demo-lib-js.html b/packages/@vue/cli-service/lib/commands/build/demo-lib-js.html index af52086787..74ce7b4844 100644 --- a/packages/@vue/cli-service/lib/commands/build/demo-lib-js.html +++ b/packages/@vue/cli-service/lib/commands/build/demo-lib-js.html @@ -1,8 +1,8 @@ <%- htmlWebpackPlugin.options.libName %> demo - + <% if (htmlWebpackPlugin.options.cssExtract) { %> - + <% } %> - + <% if (htmlWebpackPlugin.options.cssExtract) { %> - + <% } %>
diff --git a/packages/@vue/cli-service/lib/commands/build/index.js b/packages/@vue/cli-service/lib/commands/build/index.js index 50698a98da..aa6e3fb0ac 100644 --- a/packages/@vue/cli-service/lib/commands/build/index.js +++ b/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', diff --git a/packages/@vue/cli-service/lib/commands/build/resolveLibConfig.js b/packages/@vue/cli-service/lib/commands/build/resolveLibConfig.js index 56b6bca016..00324bf276 100644 --- a/packages/@vue/cli-service/lib/commands/build/resolveLibConfig.js +++ b/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() @@ -33,7 +33,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 }) } @@ -64,12 +64,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)