From b97deb15d13b3023caa5722f5d36b2f246b0acd7 Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Fri, 5 Apr 2019 21:48:05 +0800 Subject: [PATCH 1/2] feat: bundle currentScript polyfill by default if library needs IE support --- .../cli-service/lib/commands/build/resolveLibConfig.js | 10 ++++++++++ .../cli-service/lib/commands/build/setPublicPath.js | 4 ++++ packages/@vue/cli-service/package.json | 2 ++ yarn.lock | 5 +++++ 4 files changed, 21 insertions(+) diff --git a/packages/@vue/cli-service/lib/commands/build/resolveLibConfig.js b/packages/@vue/cli-service/lib/commands/build/resolveLibConfig.js index 56b6bca016..0e79bfc0ad 100644 --- a/packages/@vue/cli-service/lib/commands/build/resolveLibConfig.js +++ b/packages/@vue/cli-service/lib/commands/build/resolveLibConfig.js @@ -28,6 +28,16 @@ module.exports = (api, { entry, name, formats }, options) => { function genConfig (format, postfix = format, genHTML) { const config = api.resolveChainableWebpackConfig() + const browserslist = require('browserslist') + const targets = browserslist(undefined, { path: fullEntryPath }) + const supportsIE = targets.some(agent => agent.includes('ie')) + + const webpack = require('webpack') + config.plugin('need-current-script-polyfill') + .use(webpack.DefinePlugin, [{ + 'process.env.NEED_CURRENTSCRIPT_POLYFILL': JSON.stringify(supportsIE) + }]) + // adjust css output name so they write to the same file if (config.plugins.has('extract-css')) { config diff --git a/packages/@vue/cli-service/lib/commands/build/setPublicPath.js b/packages/@vue/cli-service/lib/commands/build/setPublicPath.js index 6efcb2fc03..8968ca36be 100644 --- a/packages/@vue/cli-service/lib/commands/build/setPublicPath.js +++ b/packages/@vue/cli-service/lib/commands/build/setPublicPath.js @@ -1,6 +1,10 @@ // This file is imported into lib/wc client bundles. if (typeof window !== 'undefined') { + if (process.env.NEED_CURRENTSCRIPT_POLYFILL) { + require('current-script-polyfill') + } + var i if ((i = window.document.currentScript) && (i = i.src.match(/(.+\/)[^/]+\.js(\?.*)?$/))) { __webpack_public_path__ = i[1] // eslint-disable-line diff --git a/packages/@vue/cli-service/package.json b/packages/@vue/cli-service/package.json index 6f75aca1a5..998ef252ea 100644 --- a/packages/@vue/cli-service/package.json +++ b/packages/@vue/cli-service/package.json @@ -34,6 +34,7 @@ "acorn-walk": "^6.1.1", "address": "^1.0.3", "autoprefixer": "^9.4.8", + "browserslist": "^4.5.4", "cache-loader": "^2.0.1", "case-sensitive-paths-webpack-plugin": "^2.2.0", "chalk": "^2.4.2", @@ -42,6 +43,7 @@ "copy-webpack-plugin": "^4.6.0", "css-loader": "^1.0.1", "cssnano": "^4.1.10", + "current-script-polyfill": "^1.0.0", "debug": "^4.1.1", "dotenv": "^6.2.0", "dotenv-expand": "^4.2.0", diff --git a/yarn.lock b/yarn.lock index 3e306469b7..c6c8dc188e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5309,6 +5309,11 @@ csv-parser@^1.6.0: minimist "^1.2.0" ndjson "^1.4.0" +current-script-polyfill@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/current-script-polyfill/-/current-script-polyfill-1.0.0.tgz#f31cf7e4f3e218b0726e738ca92a02d3488ef615" + integrity sha1-8xz35PPiGLBybnOMqSoC00iO9hU= + currently-unhandled@^0.4.1: version "0.4.1" resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea" From 074380e0aa13709cde550509730830507ea88a9b Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Fri, 5 Apr 2019 21:53:18 +0800 Subject: [PATCH 2/2] docs: remove IE compatibility note --- docs/guide/build-targets.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/docs/guide/build-targets.md b/docs/guide/build-targets.md index 351d7ff23d..04d61a9483 100644 --- a/docs/guide/build-targets.md +++ b/docs/guide/build-targets.md @@ -13,10 +13,6 @@ App is the default build target. In this mode: ## Library -::: tip Note on IE Compatibility -In lib mode, the public path is [dynamically determined](https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/commands/build/setPublicPath.js) based on the URL from which the main js file is loaded (to enable dynamic assets loading). However, this feature requires `document.currentScript` support, which is missing in IE. So it's recommended to include the [current-script-polyfill](https://www.npmjs.com/package/current-script-polyfill) in the final web page before the library is imported, if IE support is a requirement. -::: - ::: 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. :::