Files
vue-cli/packages/@vue/cli-service/__tests__/buildLib.spec.js
Evan You 1dc47eb955 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`.
2018-06-05 11:58:17 -04:00

91 lines
2.8 KiB
JavaScript

jest.setTimeout(40000)
const path = require('path')
const portfinder = require('portfinder')
const { createServer } = require('http-server')
const { defaultPreset } = require('@vue/cli/lib/options')
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)
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)
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
const h1Text = await page.evaluate(() => {
return document.querySelector('h1').textContent
})
expect(h1Text).toMatch('') // no props given
const h3Text = await page.evaluate(() => {
return document.querySelector('h3').textContent
})
expect(h3Text).toMatch('Installed CLI Plugins')
})
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)
})