From 1dc47eb955eaefe2a62d2706b1449b8e4d21788b Mon Sep 17 00:00:00 2001 From: Evan You Date: Tue, 5 Jun 2018 11:58:17 -0400 Subject: [PATCH] feat(build): support named exports when building --target lib with js/ts entry close #1436 BREAKING CHANGE: When building a js/ts entry file with --target lib, the library now exposes a Module with both default and named exports. This means in the UMD build, the default export now needs to be accessed as `window.yourLib.default`, and in the CommonJS build as `const yourLib = require('yourLib').default`. If you don't have named exports and want to retain the previous behavior, you can configure webpack to use `output.libraryExport: 'default'` in `vue.config.js`. --- .../cli-service/__tests__/buildLib.spec.js | 47 +++++++++++++++++-- .../lib/commands/build/demo-lib-js.html | 7 +++ .../lib/commands/build/resolveLibConfig.js | 21 +++++---- 3 files changed, 62 insertions(+), 13 deletions(-) create mode 100644 packages/@vue/cli-service/lib/commands/build/demo-lib-js.html diff --git a/packages/@vue/cli-service/__tests__/buildLib.spec.js b/packages/@vue/cli-service/__tests__/buildLib.spec.js index 2b94caece7..177b39511f 100644 --- a/packages/@vue/cli-service/__tests__/buildLib.spec.js +++ b/packages/@vue/cli-service/__tests__/buildLib.spec.js @@ -1,4 +1,4 @@ -jest.setTimeout(30000) +jest.setTimeout(40000) const path = require('path') const portfinder = require('portfinder') @@ -8,6 +8,12 @@ const create = require('@vue/cli-test-utils/createTestProject') const launchPuppeteer = require('@vue/cli-test-utils/launchPuppeteer') let server, browser, page + +afterEach(async () => { + await browser.close() + server.close() +}) + test('build as lib', async () => { const project = await create('build-lib', defaultPreset) @@ -45,7 +51,40 @@ test('build as lib', async () => { expect(h3Text).toMatch('Installed CLI Plugins') }) -afterAll(async () => { - await browser.close() - server.close() +test('build as lib (js)', async () => { + const project = await create('build-lib-js', 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 src/main.js') + 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) + + 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 + + // 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 new file mode 100644 index 0000000000..368b0d02dd --- /dev/null +++ b/packages/@vue/cli-service/lib/commands/build/demo-lib-js.html @@ -0,0 +1,7 @@ +<%- htmlWebpackPlugin.options.libName %> demo + + + + diff --git a/packages/@vue/cli-service/lib/commands/build/resolveLibConfig.js b/packages/@vue/cli-service/lib/commands/build/resolveLibConfig.js index 3daca74852..107c3b0c1d 100644 --- a/packages/@vue/cli-service/lib/commands/build/resolveLibConfig.js +++ b/packages/@vue/cli-service/lib/commands/build/resolveLibConfig.js @@ -21,6 +21,7 @@ module.exports = (api, { entry, name }, options) => { ) } + const isVueEntry = /\.vue$/.test(entry) const libName = ( name || api.service.pkg.name || @@ -57,10 +58,11 @@ module.exports = (api, { entry, name }, options) => { // inject demo page for umd if (genHTML) { + const template = isVueEntry ? 'demo-lib.html' : 'demo-lib-js.html' config .plugin('demo-html') .use(require('html-webpack-plugin'), [{ - template: path.resolve(__dirname, './demo-lib.html'), + template: path.resolve(__dirname, template), inject: false, filename: 'demo.html', libName @@ -80,21 +82,22 @@ module.exports = (api, { entry, name }, options) => { [entryName]: require.resolve('./entry-lib.js') } - Object.assign(rawConfig.output, { - filename: `${entryName}.js`, - chunkFilename: `${entryName}.[name].js`, + rawConfig.output = Object.assign({ library: libName, - libraryExport: 'default', + libraryExport: isVueEntry ? 'default' : undefined, libraryTarget: format, - // use dynamic publicPath so this can be deployed anywhere - // the actual path will be determined at runtime by checking - // document.currentScript.src. - publicPath: '', // preserve UDM header from webpack 3 until webpack provides either // libraryTarget: 'esm' or target: 'universal' // https://github.com/webpack/webpack/issues/6522 // https://github.com/webpack/webpack/issues/6525 globalObject: `typeof self !== 'undefined' ? self : this` + }, rawConfig.output, { + filename: `${entryName}.js`, + chunkFilename: `${entryName}.[name].js`, + // use dynamic publicPath so this can be deployed anywhere + // the actual path will be determined at runtime by checking + // document.currentScript.src. + publicPath: '' }) return rawConfig