feat(build): Add keepVueInstance config option to avoid externalization of Vue when build target is Lib.

romansp · romansp · commit 6e29d3e1edd2 · 2019-07-10T12:49:58.000+03:00
Resolves #4055.
diff --git a/packages/@vue/cli-service/__tests__/buildLib.spec.js b/packages/@vue/cli-service/__tests__/buildLib.spec.js
@@ -174,3 +174,65 @@ test('build as lib with --filename option', async () => {
     return window.testLib.bar
   })).toBe(2)
 })
+
+test('build as lib with keepVueInstance true', async () => {
+  const project = await create('build-lib-keep-vue-instance', defaultPreset)
+
+  await project.write('src/main-lib.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 Lib'
+          }
+        },
+      }
+    </script>
+  `)
+
+  await project.write('vue.config.js', `
+    module.exports = {
+      keepVueInstance: true
+    }
+  `)
+
+  const { stdout } = await project.run('vue-cli-service build --target lib --name testLib src/main-lib.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
+  const divText = await page.evaluate(() => {
+    return document.querySelector('div').textContent
+  })
+  expect(divText).toMatch('Hello from Lib')
+})
diff --git a/packages/@vue/cli-service/lib/commands/build/resolveLibConfig.js b/packages/@vue/cli-service/lib/commands/build/resolveLibConfig.js
@@ -54,15 +54,17 @@ module.exports = (api, { entry, name, formats, filename }, options) => {
     }
 
     // externalize Vue in case user imports it
-    config
-      .externals({
-        ...config.get('externals'),
+    // but avoid it, if config explicitly specify to keep it
+    config.externals({
+      ...config.get('externals'),
+      ...(!api.service.projectOptions.keepVueInstance ? {
         vue: {
           commonjs: 'vue',
           commonjs2: 'vue',
           root: 'Vue'
         }
-      })
+      } : {})
+    })
 
     // inject demo page for umd
     if (genHTML) {
diff --git a/packages/@vue/cli-service/lib/options.js b/packages/@vue/cli-service/lib/options.js
@@ -31,6 +31,7 @@ const schema = createSchema(joi => joi.object({
   ),
   crossorigin: joi.string().valid(['', 'anonymous', 'use-credentials']),
   integrity: joi.boolean(),
+  keepVueInstance: joi.boolean(),
 
   // css
   css: joi.object({
