Update docs with edge case for building Staging environment with npm

docs/guide/mode-and-env.md

@@ -88,6 +88,11 @@ VUE_APP_TITLE=My App (staging)
 
 In both cases, the app is built as a production app because of the `NODE_ENV`, but in the staging version, `process.env.VUE_APP_TITLE` is overwritten with a different value.
 
+::: warning NPM usage
+If you use the command `npm run build` you need to use the following command: `npm run build -- --mode staging`
+All arguments before -- are considered npm arguments and arguments after -- are passed to vue-cli-service
+:::
+
 ### Using Env Variables in Client-side Code
 
 You can access env variables in your application code:

packages/@vue/babel-preset-app/index.js

@@ -81,7 +81,13 @@ function getPolyfills (targets, includes) {
  }
 
  const compatData = require('core-js-compat').data
- return includes.filter(item => isRequired(item, targets, { compatData }))
+ return includes.filter(item => {
+ if (!compatData[item]) {
+ throw new Error(`Cannot find polyfill ${item}, please refer to 'core-js-compat' for a complete list of available modules`)
+ }
+
+ return isRequired(item, targets, { compatData })
+ })
 }
 
 module.exports = (context, options = {}) => {

packages/@vue/cli-plugin-typescript/package.json

@@ -36,8 +36,14 @@
  },
  "peerDependencies": {
  "@vue/cli-service": "^3.0.0 || ^4.0.0-0",
+ "@vue/compiler-sfc": "^3.0.0-beta.14",
  "typescript": ">=2"
  },
+ "peerDependenciesMeta": {
+ "@vue/compiler-sfc": {
+ "optional": true
+ }
+ },
  "devDependencies": {
  "@types/chai": "^4.2.11",
  "@types/jest": "^24.0.19",

packages/@vue/cli-service/bin/vue-cli-service.js

@@ -3,7 +3,7 @@
 const { semver, error } = require('@vue/cli-shared-utils')
 const requiredVersion = require('../package.json').engines.node
 
-if (!semver.satisfies(process.version, requiredVersion)) {
+if (!semver.satisfies(process.version, requiredVersion, { includePrerelease: true })) {
  error(
  `You are using Node ${process.version}, but vue-cli-service ` +
  `requires Node ${requiredVersion}.\nPlease upgrade your Node version.`

packages/@vue/cli-service/lib/config/base.js

@@ -1,3 +1,5 @@
+const { semver, loadModule } = require('@vue/cli-shared-utils')
+
 module.exports = (api, options) => {
  api.chainWebpack(webpackConfig => {
  const isLegacyBundle = process.env.VUE_CLI_MODERN_MODE && !process.env.VUE_CLI_MODERN_BUILD
@@ -51,12 +53,6 @@ module.exports = (api, options) => {
  .end()
  .alias
  .set('@', api.resolve('src'))
- .set(
- 'vue$',
- options.runtimeCompiler
- ? 'vue/dist/vue.esm.js'
- : 'vue/dist/vue.runtime.esm.js'
- )
 
  webpackConfig.resolveLoader
  .plugin('pnp-loaders')
@@ -73,40 +69,76 @@ module.exports = (api, options) => {
  // js is handled by cli-plugin-babel ---------------------------------------
 
  // vue-loader --------------------------------------------------------------
- const vueLoaderCacheIdentifier = {
- 'vue-loader': require('vue-loader/package.json').version
- }
+ const vue = loadModule('vue', api.service.context)
+
+ if (semver.major(vue.version) === 2) {
+ // for Vue 2 projects
+ const vueLoaderCacheConfig = api.genCacheConfig('vue-loader', {
+ 'vue-loader': require('vue-loader/package.json').version,
+ '@vue/component-compiler-utils': require('@vue/component-compiler-utils/package.json').version,
+ 'vue-template-compiler': require('vue-template-compiler/package.json').version
+ })
 
- // The following 2 deps are sure to exist in Vue 2 projects.
- // But once we switch to Vue 3, they're no longer mandatory.
- // (In Vue 3 they are replaced by @vue/compiler-sfc)
- // So wrap them in a try catch block.
- try {
- vueLoaderCacheIdentifier['@vue/component-compiler-utils'] =
- require('@vue/component-compiler-utils/package.json').version
- vueLoaderCacheIdentifier['vue-template-compiler'] =
- require('vue-template-compiler/package.json').version
- } catch (e) {}
- const vueLoaderCacheConfig = api.genCacheConfig('vue-loader', vueLoaderCacheIdentifier)
+ webpackConfig.resolve
+ .alias
+ .set(
+ 'vue$',
+ options.runtimeCompiler
+ ? 'vue/dist/vue.esm.js'
+ : 'vue/dist/vue.runtime.esm.js'
+ )
+
+ webpackConfig.module
+ .rule('vue')
+ .test(/\.vue$/)
+ .use('cache-loader')
+ .loader(require.resolve('cache-loader'))
+ .options(vueLoaderCacheConfig)
+ .end()
+ .use('vue-loader')
+ .loader(require.resolve('vue-loader'))
+ .options(Object.assign({
+ compilerOptions: {
+ whitespace: 'condense'
+ }
+ }, vueLoaderCacheConfig))
+
+ webpackConfig
+ .plugin('vue-loader')
+ .use(require('vue-loader').VueLoaderPlugin)
+ } else if (semver.major(vue.version) === 3) {
+ // for Vue 3 projects
+ const vueLoaderCacheConfig = api.genCacheConfig('vue-loader', {
+ 'vue-loader': require('vue-loader-v16/package.json').version,
+ '@vue/compiler-sfc': require('@vue/compiler-sfc/package.json').version
+ })
 
- webpackConfig.module
- .rule('vue')
- .test(/\.vue$/)
- .use('cache-loader')
- .loader(require.resolve('cache-loader'))
- .options(vueLoaderCacheConfig)
+ webpackConfig.resolve
+ .alias
+ .set(
+ 'vue$',
+ options.runtimeCompiler
+ ? 'vue/dist/vue.esm-bundler.js'
+ : '@vue/runtime-dom'
+ )
+
+ webpackConfig.module
+ .rule('vue')
+ .test(/\.vue$/)
+ .use('cache-loader')
+ .loader(require.resolve('cache-loader'))
+ .options(vueLoaderCacheConfig)
+ .end()
+ .use('vue-loader')
+ .loader(require.resolve('vue-loader'))
+ .options(vueLoaderCacheConfig)
+ .end()
  .end()
- .use('vue-loader')
- .loader(require.resolve('vue-loader'))
- .options(Object.assign({
- compilerOptions: {
- whitespace: 'condense'
- }
- }, vueLoaderCacheConfig))
 
- webpackConfig
- .plugin('vue-loader')
- .use(require('vue-loader/lib/plugin'))
+ webpackConfig
+ .plugin('vue-loader')
+ .use(require('vue-loader-v16').VueLoaderPlugin)
+ }
 
  // static assets -----------------------------------------------------------
 

packages/@vue/cli-service/package.json

@@ -69,6 +69,7 @@
  "thread-loader": "^2.1.3",
  "url-loader": "^2.2.0",
  "vue-loader": "^15.9.2",
+ "vue-loader-v16": "npm:vue-loader@^16.0.0-beta.3",
  "vue-style-loader": "^4.1.2",
  "webpack": "^4.0.0",
  "webpack-bundle-analyzer": "^3.8.0",
@@ -77,9 +78,13 @@
  "webpack-merge": "^4.2.2"
  },
  "peerDependencies": {
+ "@vue/compiler-sfc": "^3.0.0-beta.14",
  "vue-template-compiler": "^2.0.0"
  },
  "peerDependenciesMeta": {
+ "@vue/compiler-sfc": {
+ "optional": true
+ },
  "less-loader": {
  "optional": true
  },

packages/@vue/cli/bin/vue.js

@@ -8,7 +8,7 @@ const requiredVersion = require('../package.json').engines.node
 const leven = require('leven')
 
 function checkNodeVersion (wanted, id) {
- if (!semver.satisfies(process.version, wanted)) {
+ if (!semver.satisfies(process.version, wanted, { includePrerelease: true })) {
  console.log(chalk.red(
  'You are using Node ' + process.version + ', but this version of ' + id +
  ' requires Node ' + wanted + '.\nPlease upgrade your Node version.'

packages/@vue/cli/lib/Generator.js

@@ -6,7 +6,7 @@ const sortObject = require('./util/sortObject')
 const writeFileTree = require('./util/writeFileTree')
 const inferRootOptions = require('./util/inferRootOptions')
 const normalizeFilePaths = require('./util/normalizeFilePaths')
-const runCodemod = require('./util/runCodemod')
+const { runTransformation } = require('vue-codemod')
 const {
  semver,
 
@@ -277,19 +277,19 @@ module.exports = class Generator {
  let imports = this.imports[file]
  imports = imports instanceof Set ? Array.from(imports) : imports
  if (imports && imports.length > 0) {
- files[file] = runCodemod(
- require('./util/codemods/injectImports'),
+ files[file] = runTransformation(
  { path: file, source: files[file] },
+ require('./util/codemods/injectImports'),
  { imports }
  )
  }
 
  let injections = this.rootOptions[file]
  injections = injections instanceof Set ? Array.from(injections) : injections
  if (injections && injections.length > 0) {
- files[file] = runCodemod(
- require('./util/codemods/injectOptions'),
+ files[file] = runTransformation(
  { path: file, source: files[file] },
+ require('./util/codemods/injectOptions'),
  { injections }
  )
  }

packages/@vue/cli/lib/GeneratorAPI.js

@@ -5,7 +5,7 @@ const deepmerge = require('deepmerge')
 const resolve = require('resolve')
 const { isBinaryFileSync } = require('isbinaryfile')
 const mergeDeps = require('./util/mergeDeps')
-const runCodemod = require('./util/runCodemod')
+const { runTransformation } = require('vue-codemod')
 const stringifyJS = require('./util/stringifyJS')
 const ConfigTransform = require('./ConfigTransform')
 const { semver, error, getPluginLink, toShortPluginId, loadModule } = require('@vue/cli-shared-utils')
@@ -395,12 +395,12 @@ class GeneratorAPI {
  return
  }
 
- files[normalizedPath] = runCodemod(
- codemod,
+ files[normalizedPath] = runTransformation(
  {
  path: this.resolve(normalizedPath),
  source: files[normalizedPath]
  },
+ codemod,
  options
  )
  })

packages/@vue/cli/package.json

@@ -24,7 +24,6 @@
  "access": "public"
  },
  "dependencies": {
- "@babel/preset-env": "^7.9.6",
  "@vue/cli-shared-utils": "^4.4.6",
  "@vue/cli-ui": "^4.4.6",
  "@vue/cli-ui-addon-webpack": "^4.4.6",
@@ -45,7 +44,6 @@
  "isbinaryfile": "^4.0.6",
  "javascript-stringify": "^1.6.0",
  "js-yaml": "^3.13.1",
- "jscodeshift": "^0.10.0",
  "leven": "^3.1.0",
  "lodash.clonedeep": "^4.5.0",
  "lru-cache": "^5.1.1",
@@ -56,7 +54,7 @@
  "slash": "^3.0.0",
  "validate-npm-package-name": "^3.0.0",
  "vue": "^2.6.11",
- "vue-jscodeshift-adapter": "^2.1.0",
+ "vue-codemod": "^0.0.4",
  "yaml-front-matter": "^3.4.1"
  },
  "engines": {