厦门礼品网站商城制作案例,杨青个人博客wordpress,网站怎么打开,邵阳属于哪个省哪个市1.vue项目运行命令解析
在日常开发中#xff0c;vue 项目通过vue-cli-service脚手架包将项目运行起来#xff0c;常用的命令例如#xff1a; npm run serve npm run build 上述执行命令实际一般对应为项目中 package.json 文件的 scripts属性中编写的脚本命令#xff0c;在…1.vue项目运行命令解析
在日常开发中vue 项目通过vue-cli-service脚手架包将项目运行起来常用的命令例如 npm run serve npm run build 上述执行命令实际一般对应为项目中 package.json 文件的 scripts属性中编写的脚本命令在项目目录中的终端运行时即匹配到对应的脚本命令例如 匹配对应的脚本命令例如npm run serve 即运行 vue-cli-service serve 脚本命令此时会去加载项目中 node_modules 文件夹中的.bin 文件找到对应的执行文件如下 2.关于 node_modules 中 vue-cli-service 文件的加载过程
在加载 vue-cli-service 文件的过程我们知道mode_modules 中.bin 文件对应的是链接文件即实际会找到 node_modules 文件夹下的vue-cli-service 依赖包中的对应vue-cli-service.js文件加载运行
即找到 node_modules 文件夹下的vue包下面的cli-service包下的vue-cli-service.js 文件进行运行如下 可以看到.bin 文件中的 vue-cli-service 文件与vue/cli-service/bin/vue-cli-service.js 文件内容一致实际运行的也是vue/cli-service/bin/vue-cli-service.js可以发现文件中主要引入了../lib/Service文件并创建 service 类调用 service 类中的 run 方法接下来就是对应找到service 类中对应的 run 方法的运行内容。
注意传入 run 方法中的 command在运行 npm run serve时这时的 command即等于字符串 serve 即脚本命令中的后面的参数 我们找到/lib/Service 文件如下 可以看到 run 方法中主要调用了 fn 函数fn 从方法中的 command中取出command从 this.commands通过[name]取出即 this.commands[serve]但是在该文件中可以看到 commands 并没有什么初始化赋值操作如下 此时回到 run 方法中可以看到在执行 fn 函数前主要执行了这两个方法我们主要看 init 初始化函数setPluginsToSkip 方法主要是做对一些内置 plugins 进行忽略 // --skip-plugins arg may have plugins that should be skipped during init()// 需要忽略的默认 pluginsthis.setPluginsToSkip(args)// load env variables, load user config, apply pluginsthis.init(mode)找到 init() 方法 如下 在 init 方法中我们主要看这段代码其他代码是主要做一些配置处理实际主要是看 apply 方法的的调用 this.plugins.forEach(({ id, apply }) {if (this.pluginsToSkip.has(id)) returnapply(new PluginAPI(id, this), this.projectOptions)})
可以看到是对文件中的 this.plugins 进行循环结构每个 item 中的 apply 方法进行调用我们找到 plugins 的初始化如下 可以看到Service 类中初始化是对 plugins 赋值通过调用了 resolvePlugins 方法进行初始化如下 在resolvePlugins 方法中我们可以看到遍历了builtInPlugins进行赋值给 plugins 并返回 此时回到 init 方法中对 this.plugins的遍历即 apply 调用 我们即可得知apply 的调用是对 resolvePlugins方法中的的 require(id)调用如下 在 run serve的时候实际即对应 require(./commands/serve)去加载对应该文件我们进入到该文件 如下 查看./commands/serve文件可以看到文件主要导出了上述的回调函数回调函数内部调用了api.registerCommand函数关于为什么可以取到到 api.registerCommand调用我们就要回到apply() 函数调用的时候的传参如下 可以看到是创建了 PluginAPI这个类并把 id 传入./commands/serve等等及当前上下文 this,我们找到 PluginAPI的类文件如下 可以看到PluginAPI类中的定义了registerCommand方法而该方法的内容中可以看到对 this.service.commands[name] 赋值了{fnopts}对象这就解释了前面vue/cli-service/bin/vue-cli-service.js中的 run 方法为什么可以取出 fn 函数进行调用即下图: 此时我们最后来看 fn函数对应的是什么内容如下 最后我们去看 serve()函数内容 如下
3.找到 webpack加载文件处 可以看到熟悉的Starting development server...即项目运行时终端中会打印的信息继续往下查看该函数最终可以看到运用 webpack 包并传入config配置解析并使用 WebpackDevServer 这个 plugin即开启本地运行的插件 如下 函数的最后我们可以看到启动了 server 的监听函数即成功将项目编译完成开启本地服务运行如下 4.总结
通过解析vue-cli-serve的源码以上便是 vue-cli脚手架 运用 webpack 进行内部封装如何实现脚手架内将项目解析打包加载在内存中并拉起本地服务实现本地运行vue项目的流程。 npm run serve - vue-cli-service.js -service.run -service.init -apply -require(./commanmds/serve) -PluginAPI.registerCommand - serve()
