forked from vuejs/vue-cli
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
19 changed files
with
718 additions
and
225 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,23 +1,70 @@ | ||
// TODO handle alternative build targets | ||
|
||
const defaults = { | ||
mode: 'production', | ||
target: 'app', | ||
extractCSS: true, | ||
sourceMap: true, | ||
cssSourceMap: false | ||
target: 'app' | ||
} | ||
|
||
module.exports = (api, options) => { | ||
api.registerCommand('build', { | ||
description: 'build for production', | ||
usage: 'vue-cli-service build', | ||
usage: 'vue-cli-service build [options]', | ||
options: { | ||
'--mode': `specify env mode (default: ${defaults.mode})`, | ||
'--target': `app | library | web-component (default: ${defaults.target})`, | ||
'--extractCSS': `extract component CSS into one file. (default: ${defaults.extractCSS})`, | ||
'--sourceMap': `generate source map (default: ${defaults.sourceMap})`, | ||
'--cssSourceMap': `generate source map for CSS (default: ${defaults.cssSourceMap})` | ||
'--target': `app | library | web-component (default: ${defaults.target})` | ||
} | ||
}, args => { | ||
api.setMode(args.mode || defaults.mode) | ||
|
||
const chalk = require('chalk') | ||
const rimraf = require('rimraf') | ||
const webpack = require('webpack') | ||
const { | ||
done, | ||
info, | ||
hasYarn, | ||
logWithSpinner, | ||
stopSpinner | ||
} = require('@vue/cli-shared-utils') | ||
|
||
console.log() | ||
logWithSpinner(`Building for production...`) | ||
|
||
return new Promise((resolve, reject) => { | ||
const targetDir = api.resolve(options.outputDir) | ||
rimraf(targetDir, err => { | ||
if (err) { | ||
return reject(err) | ||
} | ||
const webpackConfig = api.resolveWebpackConfig() | ||
webpack(webpackConfig, (err, stats) => { | ||
stopSpinner(false) | ||
if (err) { | ||
return reject(err) | ||
} | ||
process.stdout.write(stats.toString({ | ||
colors: true, | ||
modules: false, | ||
// TODO set this to true if using TS | ||
children: false, | ||
chunks: false, | ||
chunkModules: false | ||
}) + '\n\n') | ||
|
||
if (stats.hasErrors()) { | ||
return reject(`Build failed with errors.`) | ||
} | ||
|
||
done(`Build complete. The ${chalk.cyan(options.outputDir)} directory is ready to be deployed.\n`) | ||
const previewCommand = chalk.cyan(`${hasYarn ? 'yarn' : 'npm'} start`) | ||
info(`You can preview the production app by running ${previewCommand}.\n`) | ||
if (options.base === '/') { | ||
info(`The app is built assuming that it will be deployed at the root of a domain.`) | ||
info(`If you intend to deploy it under a subpath, update the ${chalk.green('base')} option`) | ||
info(`in your project config (${chalk.cyan(`vue.config.js`)} or ${chalk.green('"vue"')} field in ${chalk.cyan(`package.json`)}).\n`) | ||
} | ||
}) | ||
}) | ||
}) | ||
}) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,151 @@ | ||
const { | ||
info, | ||
error, | ||
hasYarn, | ||
clearConsole | ||
} = require('@vue/cli-shared-utils') | ||
|
||
const defaults = { | ||
mode: 'development', | ||
host: '0.0.0.0', | ||
port: 8080, | ||
https: false | ||
} | ||
|
||
module.exports = (api, options) => { | ||
api.registerCommand('dev', { | ||
description: 'start development server', | ||
usage: 'vue-cli-service dev [options]', | ||
options: { | ||
'--open': `open browser on server start`, | ||
'--mode': `specify env mode (default: ${defaults.mode})`, | ||
'--host': `specify host (default: ${defaults.host})`, | ||
'--port': `specify port (default: ${defaults.port})`, | ||
'--https': `use https (default: ${defaults.https})` | ||
} | ||
}, args => { | ||
clearConsole() | ||
info('Starting development server...') | ||
|
||
api.setMode(args.mode || defaults.mode) | ||
|
||
const chalk = require('chalk') | ||
const webpack = require('webpack') | ||
const WebpackDevServer = require('webpack-dev-server') | ||
const portfinder = require('portfinder') | ||
const openBrowser = require('../util/openBrowser') | ||
const prepareURLs = require('../util/prepareURLs') | ||
const prepareProxy = require('../util/prepareProxy') | ||
const overlayMiddleware = require('@vue/cli-overlay/middleware') | ||
|
||
const projectDevServerOptions = options.devServer || {} | ||
const useHttps = args.https || projectDevServerOptions.https || defaults.https | ||
const host = args.host || process.env.HOST || projectDevServerOptions.host || defaults.host | ||
portfinder.basePort = args.port || process.env.PORT || projectDevServerOptions.port || defaults.port | ||
|
||
portfinder.getPort((err, port) => { | ||
if (err) { | ||
return error(err) | ||
} | ||
|
||
const webpackConfig = api.resolveWebpackConfig() | ||
|
||
const urls = prepareURLs( | ||
useHttps ? 'https' : 'http', | ||
host, | ||
port | ||
) | ||
|
||
// inject dev/hot client | ||
addDevClientToEntry(webpackConfig, [ | ||
// dev server client | ||
`webpack-dev-server/client/?${urls.localUrlForBrowser}`, | ||
// hmr client | ||
projectDevServerOptions.hotOnly | ||
? 'webpack/hot/dev-server' | ||
: 'webpack/hot/only-dev-server', | ||
// custom overlay client | ||
`@vue/cli-overlay/dist/client` | ||
]) | ||
|
||
const compiler = webpack(webpackConfig) | ||
|
||
// log instructions & open browser on first compilation complete | ||
let isFirstCompile = true | ||
compiler.plugin('done', stats => { | ||
if (stats.hasErrors()) { | ||
return | ||
} | ||
|
||
console.log([ | ||
` App running at:`, | ||
` - Local: ${chalk.cyan(urls.localUrlForTerminal)}`, | ||
` - Network: ${chalk.cyan(urls.lanUrlForTerminal)}` | ||
].join('\n')) | ||
console.log() | ||
|
||
if (isFirstCompile) { | ||
isFirstCompile = false | ||
const buildCommand = hasYarn ? `yarn build` : `npm run build` | ||
console.log([ | ||
` Note that the development build is not optimized.`, | ||
` To create a production build, run ${chalk.cyan(buildCommand)}.` | ||
].join('\n')) | ||
console.log() | ||
|
||
if (args.open || projectDevServerOptions.open) { | ||
openBrowser(urls.localUrlForBrowser) | ||
} | ||
} | ||
}) | ||
|
||
const proxySettings = prepareProxy( | ||
projectDevServerOptions.proxy, | ||
api.resolve('public') | ||
) | ||
|
||
const server = new WebpackDevServer(compiler, Object.assign({ | ||
clientLogLevel: 'none', | ||
historyApiFallback: { | ||
disableDotRule: true | ||
}, | ||
contentBase: api.resolve('public'), | ||
watchContentBase: true, | ||
hot: true, | ||
quiet: true, | ||
compress: true, | ||
publicPath: webpackConfig.output.publicPath | ||
}, projectDevServerOptions, { | ||
https: useHttps, | ||
proxy: proxySettings, | ||
before (app) { | ||
// overlay | ||
app.use(overlayMiddleware()) | ||
// allow other plugins to register middlewares, e.g. PWA | ||
api.service.devServerConfigFns.forEach(fn => fn(app)) | ||
// apply in project middlewares | ||
projectDevServerOptions.before && projectDevServerOptions.before(app) | ||
} | ||
})) | ||
|
||
server.listen(port, host, err => { | ||
if (err) { | ||
return error(err) | ||
} | ||
}) | ||
}) | ||
}) | ||
} | ||
|
||
function addDevClientToEntry (config, devClient) { | ||
const { entry } = config | ||
if (typeof entry === 'object' && !Array.isArray(entry)) { | ||
Object.keys(entry).forEach((key) => { | ||
entry[key] = devClient.concat(entry[key]) | ||
}) | ||
} else if (typeof entry === 'function') { | ||
config.entry = entry(devClient) | ||
} else { | ||
config.entry = devClient.concat(entry) | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.