vue执行配置选项npm run serve运行开发服务器的本质

目录

vue执行配置选项npm run serve运行开发服务器的本质

一、启动开发服务器、调用“工具链”、编译、并运行当前工程

二、npm run serve内部原理分析

三、vue编译运行过程

喜欢的,就收藏并点个赞,便于观看下篇文章:


一、启动开发服务器、调用“工具链”、编译、并运行当前工程

npm run serve

        该命令的配置文件在当前工程的package.json文件中,随@vue/cli脚手架驱动产生的vue的工程默认自动生成: 

 (图1)

  (图2)

二、npm run serve内部原理分析

         打开“工程”下的node包依赖路径下的“可执行脚本”目录:node_modules\bin

   (图3)

         如 图3 所示,vue-cli-service.cmd文件,即 图1 所运行的实际脚本,运行其命令行帮助:

   (图4)

         得知其需要1些选项来执行命令( 如 图4 所示):

   (图5)

        分别打开 图5 所示的两个文件,得知vue-cli-service.cmd需要带1个“选项参数”来执行内部命令( 如 图6、图7 所示):

   (图6)

   (图7)

        通过分析 vue-cli-service.js 源码:

 (图8)

         得知,“选项参数” 的别名,分别为 build、 serve 、inspect :

#!/usr/bin/env node

const { semver, error } = require('@vue/cli-shared-utils')
const requiredVersion = require('../package.json').engines.node

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.`
  )
  process.exit(1)
}

const Service = require('../lib/Service')
const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())

const rawArgv = process.argv.slice(2)
const args = require('minimist')(rawArgv, {
  boolean: [
    // build
    'modern',
    'report',
    'report-json',
    'inline-vue',
    'watch',
    // serve
    'open',
    'copy',
    'https',
    // inspect
    'verbose'
  ]
})
const command = args._[0]

service.run(command, args, rawArgv).catch(err => {
  error(err)
  process.exit(1)
})



        因而,开发环境,npm run serve 的原生CLI命令行脚本为:

node .\node_modules\@vue\cli-service\bin\vue-cli-service.js serve

         同理,生产环境,进行分发时,npm run build 的原生CLI命令行脚本为:

node .\node_modules\@vue\cli-service\bin\vue-cli-service.js build

三、vue编译运行过程

        npm run serve、npm run build等“调试运行脚本”:仅仅是Vue默认在内部做了1个“命令行”封装而已!以包配置文件(package.json)的形式与用户交互。


# 过程大致如此:
#         INFO  Starting development server... 
# node调用各个相关模块并运行:
node.exe
# vue内置webpack开始启动开发服务器webpack-dev-server :
 .\node_modules\webpack-dev-server\client\index.js?http://192.168.3.242:8081&sockPath=/sockjs-node 
 .\node_modules\webpack\hot\dev-server.js
 .\node_modules\webpack-dev-server\client\index.js?http://192.168.3.242:8081&sockPath=/
# vue内置webpack调用cache-loader和babel-loader解析代码进行语法分析、依赖分析:
 .\node_modules\cache-loader\dist\cjs.js??ref--13-0!
 .\node_modules\babel-loader\lib\index.js!
# ...........
# vue-loader加载器启动选项:
 .\node_modules\vue-loader\lib\index.js??vue-loader-options!
# 对你的工程中的文件进行语法及依赖分析:
 .\node_modules\vue-loader\lib\index.js??vue-loader-options!.\src\App.vue?vue&type=te
 .\node_modules\vue-loader\lib\index.js??vue-loader-options!.\src\A
 .\node_modules\vue-loader\lib\index.js??vue-loader-options!.\src\components\Avatar.vue?vue&type=tem
 .\node_modules\vue-loader\lib\index.js??vue-loader-options!.\src\components\Avat
 .\node_modules\vue-loader\lib\index.js??vue-loader-options!.\src\A
 .\node_modules\vue-loader\lib\index.js??vue-loader-options!.\src\components\Avat
 .\node_modules\babel-loader\lib\index.js
 .\node_modules\cache-loader\dist\cjs.js??ref--13-0!
# ...........
# vue-loader开始调用index.js处理你的工程中的文件:
 .\node_modules\vue-loader\lib\index.js??vue-loader-options!.\src\App.vue?vue&type=te
 .\node_modules\vue-loader\lib\index.js??vue-loader-options!.\src\components\Avatar.vue?vue&type=tem
 .\node_modules\vue-loader\lib\index.js??vue-loader-options!.\src\components\Avatar.vue?vue&type=tem
 .\node_modules\vue-loader\lib\index.js??vue-loader-options!.\src\App.vue?vue&type=style&index=0&id=
 .\node_modules\vue-loader\lib\index.js??vue-loader-options!.\src\components\Avatar.vue?vue&type=style&index=0&id=5811d
 .\node_modules\vue-loader\lib\index.js??vue-loader-options!.\src\App.vue?vue&type=style&index=0&id=
 .\node_modules\vue-loader\lib\index.js??vue-loader-options!.\src\components\Avatar.vue?vue&type=style&index=0&id=5811d
 .\node_modules\vue-loader\lib\index.js??vue-loader-options!.\src\App.vue?vue&type=style&index=0&id=
 .\node_modules\vue-loader\lib\index.js??vue-loader-options!.\src\components\Avatar.vue?vue&type=style&index=0&id=5811d
 .\node_modules\vue-loader\lib\index.js??vue-loader-options!.\src\components\Avatar.vue?vue&type=style&index=0&id=5811d
 .\node_modules\vue-loader\lib\index.js??vue-loader-options!.\src\components\Avatar.vue?vue&type=style&index=0&id=5811d
 .\node_modules\vue-loader\lib\index.js??vue-loader-options!.\src\components\Avatar.vue?vue&type=style&index=0&id=5811d
# 完成“构建”并启动应用:
# 98% after emitting CopyPlugin
#  DONE  Compiled successfully in 5177ms                                                                                                                                                                                                                                                                                                   上午4:56:59
#   App running at:
#   - Local:   http://localhost:8081/
#   - Network: http://192.168.3.242:8081/
# 
#   Note that the development build is not optimized.
#   To create a production build, run npm run build.

喜欢的,就收藏并点个赞,便于观看下篇文章:

原生CLI指令构建npm run减少硬盘node_modules的开销_pulledup的博客-CSDN博客

vscode用户配置文件等的存取_pulledup的博客-CSDN博客_vscode配置文件在哪
 

关于vscode插件查询、备份与恢复_pulledup的博客-CSDN博客_vscode缓存文件内容恢复

推荐一款最流行的流程图及图表工具draw.io,老掉牙的工具已无人再用_pulledup的博客-CSDN博客_drawio 图库

http通讯及浏览器中的HTML编码、URL编码、base64编码及转义_pulledup的博客-CSDN博客

开发者实名认证的一般通行做法_pulledup的博客-CSDN博客

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐