Skip to content

Commit 6816554

Browse files
yyx990803yyx990803
committed
further tweak vue-cli-serivce serve
1 parent 88b47fa commit 6816554

21 files changed

+370
-63
lines changed

‎.eslintignore

+1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
node_modules
22
files
3+
packages/test

‎packages/@vue/cli-service/lib/PluginAPI.js

+9
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,11 @@ module.exports = class PluginAPI {
1010
return path.resolve(this.service.context, _path)
1111
}
1212

13+
setEnv (env) {
14+
process.env.NODE_ENV = env
15+
process.env.BABEL_ENV = env === 'production' ? env : 'development'
16+
}
17+
1318
registerCommand (name, fn) {
1419
this.service.commands[name] = fn
1520
}
@@ -21,4 +26,8 @@ module.exports = class PluginAPI {
2126
configureWebpack (fn) {
2227
this.service.webpackRawConfigFns.push(fn)
2328
}
29+
30+
resolveWebpackConfig () {
31+
return this.service.resolveWebpackConfig()
32+
}
2433
}

‎packages/@vue/cli-service/lib/Service.js

+7-7
Original file line numberDiff line numberDiff line change
@@ -44,19 +44,19 @@ module.exports = class Service {
4444
}
4545

4646
run (command, args) {
47-
if (this.commands[command]) {
47+
const runner = this.commands[command]
48+
if (runner) {
4849
args._.shift() // remove command itself
49-
this.commands[command].call(
50-
null,
51-
this.getWebpackConfig.bind(this),
52-
args
53-
)
50+
runner(args)
5451
} else {
5552
// TODO warn unknown command
5653
}
5754
}
5855

59-
getWebpackConfig () {
56+
resolveWebpackConfig (env) {
57+
if (env) {
58+
process.env.NODE_ENV = env
59+
}
6060
// apply chains
6161
this.webpackChainFns.forEach(fn => fn(this.webpackConfig))
6262
// to raw config

‎packages/@vue/cli-service/lib/command-plugins/build.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
module.exports = api => {
2-
api.registerCommand('build', (getWebpackConfig, projectOptions, inlineArgs) => {
3-
1+
module.exports = (api, options) => {
2+
api.registerCommand('build', args => {
3+
// TODO
44
})
55
}

‎packages/@vue/cli-service/lib/command-plugins/inspect.js

+17-7
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,22 @@
11
module.exports = (api, options) => {
2-
api.registerCommand('inspect', (getWebpackConfig, args) => {
3-
if (args.env) {
4-
process.env.NODE_ENV = args.env
5-
}
2+
api.registerCommand('inspect', args => {
3+
api.setEnv(args.env || 'development')
4+
65
const stringify = require('javascript-stringify')
7-
const config = getWebpackConfig()
8-
const key = args._[0]
6+
const config = api.resolveWebpackConfig()
7+
const keys = args._
8+
9+
let res
10+
if (keys.length) {
11+
res = {}
12+
keys.forEach(key => {
13+
res[key] = config[key]
14+
})
15+
} else {
16+
res = config
17+
}
918

10-
console.log(stringify(key ? config[key] : config, null, 2))
19+
// TODO improve stringification for loaders, plugins etc.
20+
console.log(stringify(res, null, 2))
1121
})
1222
}

‎packages/@vue/cli-service/lib/command-plugins/serve.js

+92-28
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,98 @@
11
module.exports = (api, options) => {
2-
api.registerCommand('serve', (getWebpackConfig, args) => {
3-
process.env.NODE_ENV = args.prod ? 'production' : 'development'
4-
5-
// TODO use port-finder
6-
const port = options.port || 8080
7-
const host = options.host || '127.0.0.1'
8-
9-
api.chainWebpack(config => {
10-
config
11-
.entry('app')
12-
.add(`webpack-dev-server/client/index.js?http://${host}:${port}`)
13-
.add(`webpack/hot/dev-server`)
14-
})
2+
api.registerCommand('serve', args => {
3+
// TODO improve log formatting
4+
console.log('[vue-cli] starting dev server, hang tight...')
5+
6+
api.setEnv(args.env || 'development')
157

8+
const chalk = require('chalk')
169
const webpack = require('webpack')
1710
const WebpackDevServer = require('webpack-dev-server')
18-
const webpackConfig = getWebpackConfig()
19-
20-
const compiler = webpack(webpackConfig)
21-
const server = new WebpackDevServer(compiler, Object.assign({
22-
clientLogLevel: 'warning',
23-
historyApiFallback: true,
24-
hot: true,
25-
compress: true,
26-
open: true,
27-
overlay: { warnings: false, errors: true },
28-
publicPath: '/',
29-
quiet: true
30-
}, options.devServer))
31-
32-
server.listen(port, host)
11+
const portfinder = require('portfinder')
12+
const openBrowser = require('../util/openBrowser')
13+
const prepareURLs = require('../util/prepareURLs')
14+
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
15+
16+
const useHttps = args.https || options.https
17+
const host = args.host || process.env.HOST || options.host || '0.0.0.0'
18+
portfinder.basePort = args.port || process.env.PORT || options.port || 8080
19+
20+
portfinder.getPort((err, port) => {
21+
if (err) {
22+
return console.error(err)
23+
}
24+
25+
const webpackConfig = api.resolveWebpackConfig()
26+
const projectDevServerOptions = options.devServer || {}
27+
const urls = prepareURLs(
28+
useHttps ? 'https' : 'http',
29+
host,
30+
port
31+
)
32+
33+
// inject friendly errors
34+
webpackConfig.plugins.push(new FriendlyErrorsPlugin({
35+
compilationSuccessInfo: {
36+
messages: [
37+
`App running at:`,
38+
`- Local: ${urls.localUrlForTerminal}`,
39+
`- Network: ${urls.lanUrlForTerminal}`
40+
],
41+
notes: [
42+
`Note that the development build is not optimized.`,
43+
`To create a production build, run ${chalk.cyan(`npm run build`)} or ${chalk.cyan(`yarn build`)}.`
44+
]
45+
}
46+
}))
47+
48+
// inject dev/hot client
49+
addDevClientToEntry(webpackConfig, [
50+
`webpack-dev-server/client/?${urls.localUrlForBrowser}`,
51+
projectDevServerOptions.hotOnly
52+
? 'webpack/hot/dev-server'
53+
: 'webpack/hot/only-dev-server'
54+
])
55+
56+
const compiler = webpack(webpackConfig)
57+
const server = new WebpackDevServer(compiler, Object.assign({
58+
clientLogLevel: 'none',
59+
historyApiFallback: {
60+
disableDotRule: true
61+
},
62+
contentBase: api.resolve('public'),
63+
watchContentBase: true,
64+
https: useHttps,
65+
hot: true,
66+
quiet: true,
67+
compress: true,
68+
publicPath: webpackConfig.output.publicPath,
69+
// TODO use custom overlay w/ open-in-editor
70+
overlay: { warnings: false, errors: true },
71+
// TODO handle proxy
72+
proxy: {}
73+
}, projectDevServerOptions))
74+
75+
server.listen(port, host, err => {
76+
if (err) {
77+
return console.error(err)
78+
}
79+
// TODO avoid duplicate opening
80+
// TODO avoid opening when compilation fails
81+
openBrowser(urls.localUrlForBrowser)
82+
})
83+
})
3384
})
3485
}
86+
87+
function addDevClientToEntry (config, devClient) {
88+
const { entry } = config
89+
if (typeof entry === 'object' && !Array.isArray(entry)) {
90+
Object.keys(entry).forEach((key) => {
91+
entry[key] = devClient.concat(entry[key])
92+
})
93+
} else if (typeof entry === 'function') {
94+
config.entry = entry(devClient)
95+
} else {
96+
config.entry = devClient.concat(entry)
97+
}
98+
}

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

+7-9
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
const webpack = require('webpack')
2-
const { ownDir } = require('../util')
2+
const resolveLocal = require('../util/resolveLocal')
3+
const resolveClientEnv = require('../util/resolveClientEnv')
34

45
module.exports = (api, options) => {
56
api.chainWebpack(webpackConfig => {
@@ -19,9 +20,9 @@ module.exports = (api, options) => {
1920
.merge(['.js', '.jsx', '.vue', '.json'])
2021
.end()
2122
.modules
22-
.add(api.resolve('node_modules'))
2323
.add('node_modules')
24-
.add(ownDir('node_modules'))
24+
.add(api.resolve('node_modules'))
25+
.add(resolveLocal('node_modules'))
2526
.end()
2627
.alias
2728
.set('@', api.resolve('src'))
@@ -31,9 +32,9 @@ module.exports = (api, options) => {
3132
webpackConfig.resolveLoader
3233
.set('symlinks', true)
3334
.modules
34-
.add(api.resolve('node_modules'))
3535
.add('node_modules')
36-
.add(ownDir('node_modules'))
36+
.add(api.resolve('node_modules'))
37+
.add(resolveLocal('node_modules'))
3738

3839
// js is handled by cli-plugin-bable
3940

@@ -99,12 +100,9 @@ module.exports = (api, options) => {
99100
child_process: 'empty'
100101
})
101102

102-
// TODO properly handle .env
103103
webpackConfig
104104
.plugin('define')
105-
.use(webpack.DefinePlugin, [{
106-
'process.env': { NODE_ENV: JSON.stringify(process.env.NODE_ENV) }
107-
}])
105+
.use(webpack.DefinePlugin, [resolveClientEnv()])
108106

109107
// TODO
110108
// timefix

‎packages/@vue/cli-service/lib/config-plugins/css.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
module.exports = api => {
22
api.chainWebpack(webpackConfig => {
3-
3+
// TODO
44
})
55
}

‎packages/@vue/cli-service/lib/config-plugins/dev.js

-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
const webpack = require('webpack')
22
const HTMLPlugin = require('html-webpack-plugin')
3-
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
43

54
module.exports = api => {
65
api.chainWebpack(webpackConfig => {
@@ -22,10 +21,6 @@ module.exports = api => {
2221

2322
// TODO WatchMissingNodeModulesPlugin
2423

25-
webpackConfig
26-
.plugin('friendly-errors')
27-
.use(FriendlyErrorsPlugin) // TODO port message?
28-
2924
// TODO InterpolateHtmlPlugin
3025

3126
webpackConfig

‎packages/@vue/cli-service/lib/config-plugins/prod.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
module.exports = api => {
22
api.chainWebpack(webpackConfig => {
3-
3+
// TODO
44
})
55
}

‎packages/@vue/cli-service/index.js renamed to ‎packages/@vue/cli-service/lib/util/log.js

File renamed without changes.

0 commit comments

Comments
 (0)