feat(build): Also --inline-vue flag for build when target is wc

vuejs · haoqunjiang · Aug 19, 2019 · Aug 16, 2019 · Aug 16, 2019 · Aug 16, 2019
commit 9c8b3d6a0180368fcc7c63ac0596983e1058bdaa
diff --git a/packages/@vue/cli-service/__tests__/buildLib.spec.js b/packages/@vue/cli-service/__tests__/buildLib.spec.js
@@ -216,7 +216,7 @@ test('build as lib without --name and --filename options (default to package nam
 })
 
 test('build as lib with --inline-vue', async () => {
-  const project = await create('build-lib-keep-vue-instance', defaultPreset)
+  const project = await create('build-lib-inline-vue', defaultPreset)
 
   await project.write('src/main-lib.js', `
     import Vue from 'vue'

diff --git a/packages/@vue/cli-service/__tests__/buildWc.spec.js b/packages/@vue/cli-service/__tests__/buildWc.spec.js
@@ -89,6 +89,61 @@ test('build as single wc', async () => {
   expect(h1Text).toMatch('Welcome to Your Vue.js App')
 })
 
+test('build as wc with --inline-vue', async () => {
+  const project = await create('build-wc-inline-vue', defaultPreset)
+
+  await project.write('src/main-wc.js', `
+    import Vue from 'vue'
+    import App from "./components/App.vue"
+
+    document.addEventListener("DOMContentLoaded", function() {
+      new Vue({
+        render: h => h(App),
+      }).$mount('body');
+    });
+  `)
+
+  await project.write('src/components/App.vue', `
+    <template>
+      <div>{{ message }}<div>
+    </template>
+    <script>
+      export default {
+        data() {
+          return {
+            message: 'Hello from Wc'
+          }
+        },
+      }
+    </script>
+  `)
+
+  const { stdout } = await project.run('vue-cli-service build --target wc --inline-vue --name single-wc src/main-wc.js')
+  expect(stdout).toMatch('Build complete.')
+
+  expect(project.has('dist/demo.html')).toBe(true)
+  expect(project.has('dist/single-wc.js')).toBe(true)
+  expect(project.has('dist/single-wc.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
+  const divText = await page.evaluate(() => {
+    return document.querySelector('div').textContent
+  })
+  expect(divText).toMatch('Hello from Wc')
+})
+
 afterEach(async () => {
   if (browser) {
     await browser.close()

diff --git a/packages/@vue/cli-service/lib/commands/build/index.js b/packages/@vue/cli-service/lib/commands/build/index.js
@@ -29,7 +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})`,
-      '--inline-vue': 'disable externalization of Vue for lib mode',
+      '--inline-vue': 'include the Vue module in the final bundle of library or web component 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)`,

diff --git a/packages/@vue/cli-service/lib/commands/build/resolveWcConfig.js b/packages/@vue/cli-service/lib/commands/build/resolveWcConfig.js
@@ -2,7 +2,7 @@ const path = require('path')
 const webpack = require('webpack')
 const { resolveEntry, fileToComponentName } = require('./resolveWcEntry')
 
-module.exports = (api, { target, entry, name }) => {
+module.exports = (api, { target, entry, name, 'inline-vue': inlineVue }) => {
   // Disable CSS extraction and turn on CSS shadow mode for vue-style-loader
   process.env.VUE_CLI_CSS_SHADOW_MODE = true
 
@@ -100,7 +100,9 @@ module.exports = (api, { target, entry, name }) => {
     rawConfig.externals = [
       ...(Array.isArray(rawConfig.externals) ? rawConfig.externals : [rawConfig.externals]),
       {
-        vue: 'Vue'
+        ...(!inlineVue ? {
+          vue: 'Vue'
+        } : {})
       }
     ].filter(Boolean)