feat(build): Add --inline-vue flag for build command to avoid ext…

…ernalization of Vue when build target is Lib.Resolves #4055.
vuejs · haoqunjiang · Aug 19, 2019 · Aug 16, 2019 · Aug 16, 2019 · Aug 16, 2019
commit 39ce5ec056d845a081aab0cc8e9a37d76e9a9172
diff --git a/docs/guide/build-targets.md b/docs/guide/build-targets.md
@@ -15,6 +15,12 @@ App is the default build target. In this mode:
 
 ::: tip Note on Vue Dependency
 In lib mode, Vue is *externalized*. This means the bundle will not bundle Vue even if your code imports Vue. If the lib is used via a bundler, it will attempt to load Vue as a dependency through the bundler; otherwise, it falls back to a global `Vue` variable.
+
+You can avoid externalization of Vue by providing `--inline-vue` flag to `build` command.
+
+```
+vue-cli-service build --target lib --inline-vue -name myLib [entry]
+```
 :::
 
 You can build a single entry as a library using

diff --git a/docs/guide/cli-service.md b/docs/guide/cli-service.md
@@ -75,6 +75,7 @@ Options:
   --modern      build app targeting modern browsers with auto fallback
   --target      app | lib | wc | wc-async (default: app)
   --formats     list of output formats for library builds (default: commonjs,umd,umd-min)
+  --inline-vue  disable externalization of Vue for lib mode
   --name        name for lib or web-component mode (default: "name" in package.json or entry filename)
   --no-clean    do not remove the dist directory before building the project
   --report      generate report.html to help analyze bundle content

diff --git a/docs/ru/guide/build-targets.md b/docs/ru/guide/build-targets.md
@@ -19,6 +19,12 @@
 
 ::: tip Примечание о зависимости Vue
 В режиме библиотеки Vue *экстернализируется*. Это означает, что сборка не будет содержать Vue, даже если ваш код его импортирует. Если библиотека используется через сборщик, он должен попытаться загрузить Vue в качестве зависимости через сборщик; в противном случае, он должен вернуться к глобальной переменной `Vue`.
+
+Чтобы избежать экстернализиции Vue можно установить флаг `--inline-vue` для команды `build`.
+
+```
+vue-cli-service build --target lib --inline-vue -name myLib [entry]
+```
 :::
 
 Вы можете запустить сборку одной точки входа в качестве библиотеки с помощью:

diff --git a/docs/ru/guide/cli-service.md b/docs/ru/guide/cli-service.md
@@ -67,6 +67,7 @@ npx vue-cli-service serve
   --dest        определить каталог сборки (по умолчанию: dist)
   --modern      собирать приложение для современных браузеров с авто-фоллбэком для старых
   --target      app | lib | wc | wc-async (по умолчанию: app)
+  --inline-vue  отключить экстернализицию Vue для lib сборки
   --name        имя библиотеки или режим веб-компонента (по умолчанию: "name" в package.json или имя файла точки входа)
   --no-clean    не удалять каталог dist перед сборкой проекта
   --report      сгенерировать report.html для анализа содержимого сборки

diff --git a/packages/@vue/cli-service/__tests__/buildLib.spec.js b/packages/@vue/cli-service/__tests__/buildLib.spec.js
@@ -214,3 +214,59 @@ test('build as lib without --name and --filename options (default to package nam
   expect(project.has('dist/test-lib.umd.js')).toBe(true)
   expect(project.has('dist/test-lib.umd.min.js')).toBe(true)
 })
+
+test('build as lib with --inline-vue', 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>
+  `)
+
+  const { stdout } = await project.run('vue-cli-service build --target lib --inline-vue --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/bin/vue-cli-service.js b/packages/@vue/cli-service/bin/vue-cli-service.js
@@ -22,6 +22,7 @@ const args = require('minimist')(rawArgv, {
     'modern',
     'report',
     'report-json',
+    'inline-vue',
     'watch',
     // serve
     'open',

diff --git a/packages/@vue/cli-service/lib/commands/build/index.js b/packages/@vue/cli-service/lib/commands/build/index.js
@@ -29,6 +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',
       '--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/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, filename }, options) => {
+module.exports = (api, { entry, name, formats, filename, 'inline-vue': inlineVue }, options) => {
   const { log, error } = require('@vue/cli-shared-utils')
   const abort = msg => {
     log()
@@ -97,11 +97,13 @@ module.exports = (api, { entry, name, formats, filename }, options) => {
     rawConfig.externals = [
       ...(Array.isArray(rawConfig.externals) ? rawConfig.externals : [rawConfig.externals]),
       {
-        vue: {
-          commonjs: 'vue',
-          commonjs2: 'vue',
-          root: 'Vue'
-        }
+        ...(!inlineVue ? {
+          vue: {
+            commonjs: 'vue',
+            commonjs2: 'vue',
+            root: 'Vue'
+          }
+        } : {})
       }
     ].filter(Boolean)