chore: merge remote-tracking branch 'upstream/dev' into plugin-order

Author: fangbinwei

Diff for: docs/guide/browser-compatibility.md

@@ -71,13 +71,6 @@ For a Hello World app, the modern bundle is already 16% smaller. In production,
 ::: tip
 `<script type="module">` is loaded [with CORS always enabled](https://jakearchibald.com/2017/es-modules-in-browsers/#always-cors). This means your server must return valid CORS headers such as `Access-Control-Allow-Origin: *`. If you want to fetch the scripts with credentials, set the [crossorigin](../config/#crossorigin) option to `use-credentials`.
 
-Also, modern mode uses an inline script to avoid Safari 10 loading both bundles, so if you are using a strict CSP, you will need to explicitly allow the inline script with:
-
-```
-Content-Security-Policy: script-src 'self' 'sha256-4RS22DYeB7U14dra4KcQYxmwt5HkOInieXK1NUMBmQI='
-```
-:::
-
 ::: tip Detecting the Current Mode in Config
 Sometimes you may need to change the webpack config only for the legacy build, or only for the modern build.
 

Diff for: docs/guide/cli-service.md

@@ -75,7 +75,6 @@ Options:
   --mode         specify env mode (default: production)
   --dest         specify output directory (default: dist)
   --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: app)
   --formats      list of output formats for library builds (default: commonjs,umd,umd-min)
   --inline-vue   include the Vue module in the final bundle of library or web component target

Diff for: docs/zh/guide/browser-compatibility.md

@@ -71,13 +71,6 @@ Vue CLI 会产生两个应用的版本：一个现代版的包，面向支持 [E
 ::: tip 提示
 `<script type="module">` [需要配合始终开启的 CORS 进行加载](https://jakearchibald.com/2017/es-modules-in-browsers/#always-cors)。这意味着你的服务器必须返回诸如 `Access-Control-Allow-Origin: *` 的有效的 CORS 头。如果你想要通过认证来获取脚本，可使将 [crossorigin](../config/#crossorigin) 选项设置为 `use-credentials`。
 
-同时，现代浏览器使用一段内联脚本来避免 Safari 10 重复加载脚本包，所以如果你在使用一套严格的 CSP，你需要这样显性地允许内联脚本：
-
-```
-Content-Security-Policy: script-src 'self' 'sha256-4RS22DYeB7U14dra4KcQYxmwt5HkOInieXK1NUMBmQI='
-```
-:::
-
 [autoprefixer]: https://github.com/postcss/autoprefixer
 [babel-preset-env]: https://new.babeljs.io/docs/en/next/babel-preset-env.html
 [babel-preset-app]: https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/babel-preset-app

Diff for: package.json

@@ -6,7 +6,7 @@
     "packages/vue-cli-version-marker"
   ],
   "scripts": {
-    "test": "node scripts/test.js",
+    "test": "node --experimental-vm-modules scripts/test.js",
     "pretest": "yarn clean",
     "lint": "eslint --fix packages/**/*.js packages/**/bin/*",
     "lint-without-fix": "eslint packages/**/*.js packages/**/bin/*",

Diff for: packages/@vue/babel-preset-app/__tests__/babel-preset.spec.js

@@ -3,7 +3,7 @@ const babel = require('@babel/core')
 const preset = require('../index')
 const defaultOptions = {
   babelrc: false,
-  presets: [preset],
+  presets: [[preset, { targets: { ie: 9 } }]],
   filename: 'test-entry-file.js'
 }
 
@@ -161,6 +161,7 @@ test('disable absoluteRuntime', () => {
   `.trim(), {
     babelrc: false,
     presets: [[preset, {
+      targets: { ie: 9 },
       absoluteRuntime: false
     }]],
     filename: 'test-entry-file.js'
@@ -183,6 +184,7 @@ test('should inject polyfills / helpers using "require" statements for a umd mod
   `.trim(), {
     babelrc: false,
     presets: [[preset, {
+      targets: { ie: 9 },
       absoluteRuntime: false
     }]],
     filename: 'test-entry-file.js'
@@ -200,6 +202,7 @@ test('should inject polyfills / helpers using "import" statements for an es modu
   `.trim(), {
     babelrc: false,
     presets: [[preset, {
+      targets: { ie: 9 },
       absoluteRuntime: false
     }]],
     filename: 'test-entry-file.js'

Diff for: packages/@vue/babel-preset-app/index.js

@@ -19,6 +19,10 @@ const {
   isRequired
 } = require('@babel/helper-compilation-targets')
 
+// We'll no longer need this logic in Babel 8 as it's the default behavior
+// See discussions at:
+// https://github.com/babel/rfcs/pull/2#issuecomment-714785228
+// https://github.com/babel/babel/pull/12189
 function getIntersectionTargets (targets, constraintTargets) {
   const intersection = Object.keys(constraintTargets).reduce(
     (results, browser) => {
@@ -43,14 +47,14 @@ function getIntersectionTargets (targets, constraintTargets) {
   return intersection
 }
 
-function getModernTargets (targets) {
-  const allModernTargets = getTargets(
+function getModuleTargets (targets) {
+  const allModuleTargets = getTargets(
     { esmodules: true },
     { ignoreBrowserslistConfig: true }
   )
 
   // use the intersection of modern mode browsers and user defined targets config
-  return getIntersectionTargets(targets, allModernTargets)
+  return getIntersectionTargets(targets, allModuleTargets)
 }
 
 function getWCTargets (targets) {
@@ -177,7 +181,7 @@ module.exports = (context, options = {}) => {
     targets = getWCTargets(targets)
   } else if (process.env.VUE_CLI_MODERN_BUILD) {
     // targeting browsers that at least support <script type="module">
-    targets = getModernTargets(targets)
+    targets = getModuleTargets(targets)
   }
 
   // included-by-default polyfills. These are common polyfills that 3rd party

Diff for: packages/@vue/cli-plugin-babel/__tests__/transpileDependencies.spec.js

@@ -13,6 +13,12 @@ async function readVendorFile () {
   return project.read(`dist/js/${filename}`)
 }
 
+async function readLegacyVendorFile () {
+  const files = await fs.readdir(path.join(project.dir, 'dist/js'))
+  const filename = files.find(f => /chunk-vendors-legacy\.[^.]+\.js$/.test(f))
+  return project.read(`dist/js/${filename}`)
+}
+
 beforeAll(async () => {
   project = await create('babel-transpile-deps', defaultPreset)
 
@@ -39,6 +45,8 @@ beforeAll(async () => {
   let $packageJson = await project.read('package.json')
 
   $packageJson = JSON.parse($packageJson)
+  $packageJson.browserslist.push('ie 11') // to ensure arrow function transformation is enabled
+  $packageJson.browserslist.push('safari 11') // to ensure optional chaining transformation is enabled
   $packageJson.dependencies['external-dep'] = '1.0.0'
   $packageJson.dependencies['@scope/external-dep'] = '1.0.0'
   $packageJson = JSON.stringify($packageJson)
@@ -70,7 +78,7 @@ afterAll(async () => {
 
 test('dep from node_modules should not been transpiled by default', async () => {
   await project.run('vue-cli-service build')
-  expect(await readVendorFile()).toMatch('() => "__TEST__"')
+  expect(await readLegacyVendorFile()).toMatch('() => "__TEST__"')
 })
 
 test('dep from node_modules should been transpiled when matched by transpileDependencies', async () => {
@@ -79,9 +87,9 @@ test('dep from node_modules should been transpiled when matched by transpileDepe
     `module.exports = { transpileDependencies: ['external-dep', '@scope/external-dep'] }`
   )
   await project.run('vue-cli-service build')
-  expect(await readVendorFile()).toMatch('return "__TEST__"')
+  expect(await readLegacyVendorFile()).toMatch('return "__TEST__"')
 
-  expect(await readVendorFile()).toMatch('return "__SCOPE_TEST__"')
+  expect(await readLegacyVendorFile()).toMatch('return "__SCOPE_TEST__"')
 })
 
 test('dep from node_modules should been transpiled when transpileDependencies is true', async () => {
@@ -90,9 +98,9 @@ test('dep from node_modules should been transpiled when transpileDependencies is
     `module.exports = { transpileDependencies: true }`
   )
   await project.run('vue-cli-service build')
-  expect(await readVendorFile()).toMatch('return "__TEST__"')
+  expect(await readLegacyVendorFile()).toMatch('return "__TEST__"')
 
-  expect(await readVendorFile()).toMatch('return "__SCOPE_TEST__"')
+  expect(await readLegacyVendorFile()).toMatch('return "__SCOPE_TEST__"')
 })
 
 // https://github.com/vuejs/vue-cli/issues/3057
@@ -104,6 +112,24 @@ test('only transpile package with same name specified in transpileDependencies',
   try {
     await project.run('vue-cli-service build')
   } catch (e) {}
-  expect(await readVendorFile()).toMatch('() => "__TEST__"')
-  expect(await readVendorFile()).toMatch('() => "__SCOPE_TEST__"')
+  expect(await readLegacyVendorFile()).toMatch('() => "__TEST__"')
+  expect(await readLegacyVendorFile()).toMatch('() => "__SCOPE_TEST__"')
+})
+
+test('when transpileDependencies is on, the module build should also include transpiled code (with a different target)', async () => {
+  await project.write(
+    'vue.config.js',
+    `module.exports = { transpileDependencies: true }`
+  )
+  await project.write(
+    'node_modules/external-dep/index.js',
+    `const test = (x) => x?.y?.z;\nexport default test`
+  )
+
+  await project.run('vue-cli-service build')
+  const file = await readVendorFile()
+  // module build won't need arrow function transformation
+  expect(file).toMatch('() => "__SCOPE_TEST__"')
+  // but still needs optional chaining transformation
+  expect(file).not.toMatch('x?.y?.z')
 })

Diff for: packages/@vue/cli-plugin-typescript/__tests__/tsPluginBabel.spec.js

@@ -4,7 +4,7 @@ const Service = require('@vue/cli-service/lib/Service')
 const create = require('@vue/cli-test-utils/createTestProject')
 const { assertServe, assertBuild } = require('./tsPlugin.helper')
 
-test('using correct loader', () => {
+test('using correct loader', async () => {
   const service = new Service('/', {
     pkg: {},
     plugins: [
@@ -13,7 +13,7 @@ test('using correct loader', () => {
     ]
   })
 
-  service.init()
+  await service.init()
   const config = service.resolveWebpackConfig()
   // eslint-disable-next-line no-shadow
   const rule = config.module.rules.find(rule => rule.test.test('foo.ts'))

Diff for: packages/@vue/cli-plugin-unit-jest/presets/default/jest-preset.js

@@ -1,3 +1,10 @@
+let vueJest = null
+try {
+  vueJest = require.resolve('vue-jest')
+} catch (e) {
+  throw new Error('Cannot resolve "vue-jest" module. Please make sure you have installed "vue-jest" as a dev dependency.')
+}
+
 module.exports = {
   moduleFileExtensions: [
     'js',
@@ -8,7 +15,7 @@ module.exports = {
   ],
   transform: {
     // process *.vue files with vue-jest
-    '^.+\\.vue$': require.resolve('vue-jest'),
+    '^.+\\.vue$': vueJest,
     '.+\\.(css|styl|less|sass|scss|jpg|jpeg|png|svg|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
     require.resolve('jest-transform-stub'),
     '^.+\\.jsx?$': require.resolve('babel-jest')

Diff for: packages/@vue/cli-plugin-unit-jest/presets/typescript/jest-preset.js

@@ -1,12 +1,19 @@
 const deepmerge = require('deepmerge')
 const defaultPreset = require('../default/jest-preset')
 
+let tsJest = null
+try {
+  tsJest = require.resolve('ts-jest')
+} catch (e) {
+  throw new Error('Cannot resolve "ts-jest" module. Typescript preset requires "ts-jest" to be installed.')
+}
+
 module.exports = deepmerge(
   defaultPreset,
   {
     moduleFileExtensions: ['ts', 'tsx'],
     transform: {
-      '^.+\\.tsx?$': require.resolve('ts-jest')
+      '^.+\\.tsx?$': tsJest
     }
   }
 )

Diff for: packages/@vue/cli-plugin-webpack-4/index.js

@@ -134,6 +134,17 @@ module.exports = (api, rootOptions) => {
           })
       )
 
+      if (shouldExtract) {
+        const CssMinimizerPluginV1 = require('css-minimizer-webpack-plugin')
+        config.optimization.minimizer('css').init(
+          (Plugin, [cssMinimizerOptions]) =>
+            new CssMinimizerPluginV1({
+              sourceMap: rootOptions.productionSourceMap,
+              ...cssMinimizerOptions
+            })
+        )
+      }
+
       // DeterministicModuleIdsPlugin is only available in webpack 5
       // (and enabled by default in production mode).
 

Diff for: packages/@vue/cli-plugin-webpack-4/package.json

@@ -25,6 +25,7 @@
   "dependencies": {
     "@vue/cli-shared-utils": "^5.0.0-alpha.8",
     "copy-webpack-plugin": "^6.4.1",
+    "css-minimizer-webpack-plugin": "^1.2.0",
     "hash-sum": "^2.0.0",
     "html-webpack-plugin": "^4.5.1",
     "module-alias": "^2.2.2",