Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update docs with edge case for building Staging environment with npm #5640

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions docs/guide/mode-and-env.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
8 changes: 7 additions & 1 deletion packages/@vue/babel-preset-app/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {}) => {
Expand Down
6 changes: 6 additions & 0 deletions packages/@vue/cli-plugin-typescript/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion packages/@vue/cli-service/bin/vue-cli-service.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.`
Expand Down
104 changes: 68 additions & 36 deletions packages/@vue/cli-service/lib/config/base.js
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -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')
Expand All @@ -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 -----------------------------------------------------------

Expand Down
5 changes: 5 additions & 0 deletions packages/@vue/cli-service/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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
},
Expand Down
2 changes: 1 addition & 1 deletion packages/@vue/cli/bin/vue.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.'
Expand Down
10 changes: 5 additions & 5 deletions packages/@vue/cli/lib/Generator.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,

Expand Down Expand Up @@ -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 }
)
}
Expand Down
6 changes: 3 additions & 3 deletions packages/@vue/cli/lib/GeneratorAPI.js
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down Expand Up @@ -395,12 +395,12 @@ class GeneratorAPI {
return
}

files[normalizedPath] = runCodemod(
codemod,
files[normalizedPath] = runTransformation(
{
path: this.resolve(normalizedPath),
source: files[normalizedPath]
},
codemod,
options
)
})
Expand Down
30 changes: 0 additions & 30 deletions packages/@vue/cli/lib/util/runCodemod.js

This file was deleted.

4 changes: 1 addition & 3 deletions packages/@vue/cli/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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": {
Expand Down
Loading