写在后面
最近新部门的 React 我的项目要做多环境部署,参考了一下之前部门做的 Vue 我的项目,顺便把 vue-cli-service 的源码看了一下。看源码的时候还去看了下 Vue 源码,感觉挺有意思的,打算好好钻研下,这里继续更新自己的心得体会~
vue-cli-service 多环境
首先在 package.json
外面 script
上面增加如下内容:
"scripts": {
"serve": "vue-cli-service serve",
"serve:staging": "vue-cli-service serve --mode staging",
"serve:prod": "vue-cli-service serve --mode production",
"lint": "vue-cli-service lint",
"format": "vue-cli-service lint --formatter",
"inspect": "vue-cli-service inspect",
"build": "vue-cli-service build",
"build:staging": "vue-cli-service build --mode staging",
"build:prod": "vue-cli-service build --mode production"
},
vue-cli-service
源码在 node_modules/@vue/cli-service/bin/vue-cli-service.js 目录下
vue-cli-service.js
在第 14 行加载了 ../lib/Service.js
模块,这个模块在 151 行加载了 serve.js
模块
serve.js
在 node_modules/@vue/cli-service/lib/commands/serve.js 目录下
// serve.js 第 50 行
// 检测环境,只在开发环境引入热更新插件
// webpack 配置链式语法能够看一下
// configs that only matters for dev server
api.chainWebpack(webpackConfig => {if (process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test') {
webpackConfig
.devtool('cheap-module-eval-source-map')
webpackConfig
.plugin('hmr')
.use(require('webpack/lib/HotModuleReplacementPlugin'))
// https://github.com/webpack/webpack/issues/6642
// https://github.com/vuejs/vue-cli/issues/3539
webpackConfig
.output
.globalObject(`(typeof self !== 'undefined' ? self : this)`)
if (!process.env.VUE_CLI_TEST && options.devServer.progress !== false) {
webpackConfig
.plugin('progress')
.use(require('webpack/lib/ProgressPlugin'))
}
}
})
$nextTick 原理
Vue 外围源码都在 node_modules/vue/src/core 目录下
这个目录下还包含 vdom,observer,global-api 的实现,都能够看一下
$nextTick 的源码在 node_modules/vue/src/core/util/next-tick.js 目录下