feat: bundle currentScript polyfill by default if library needs IE support (#3760)

Author: haoqunjiang

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.
 :::

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

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

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",

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"