基于 Webpack 的项目,项目的配置文件、package.json、环境变量文件发生了变更都需要手动重启项目,才可以在浏览器中看到效果。由于这些都是静态的配置文件,如果需要让他们的变更能够触发项目自动重启,就需要一个工具去监听他们的变化,这个时候nodemon
隆重登场了
nodemon
nodemon是一个工具,可在检测到目录中的文件更改时自动重新启动节点应用程序,从而帮助开发基于 Node.js 的应用程序。
nodemon
不需要对您的代码或开发方法进行任何额外的更改。要使用nodemon
,请在执行脚本时nodemon
替换命令行上的单词node
全局安装
npm i -g nodemon
局部安装
npm i -D nodemon
使用配置
启动命令配置
{ script:{ "serve-w":"nodemon --watch vue.config.js exec "vue-cli-service serve"" } }
在 package.json 中配置
在package.json
文件中添加nodemonConfig
节点:
{ "name": "nodemon", "...": "... other standard package.json values", "nodemonConfig": { "watch":["vue.config.js",".env"], "exec":"vue-cli-service serve" } }
再在package.json
添加启动命令:
{ "script":{ "serve-w":"nodemon" } }
项目根目录添加 nodemon.json 文件
{ "watch":["vue.config.js",".env"], "exec":"vue-cli-service serve" }
再在package.json
添加启动命令:
{ "script":{ "serve-w":"nodemon" } }
常用配置参数说明
参数名 | 参数描述 | 数据类型 |
---|---|---|
watch | 需要监听的文件或文件夹 | Array |
exec | 监听后需要启动的命令 | String |
ignore | 需要忽略监听的文件或文件夹 | Array |
delay | 延迟重启的时间,默认单位秒可传入精确单位如:2500ms | String,Number |
events | 当 nodemon 状态改变时触发事件,定义通知的文字 | String |
结语
经过这样子配置,一编辑被监听的文件,就会触发项目自动的重启,而项目启动的时长是与项目的大小成正相关的,如果项目很大,项目重启时间过长,这样也会减轻开发体验;这时就可以通过splitChunk
来减轻编译形成的包的大小,模块分包(静态模块预编译)来预先将部分 node_modules 包打包来降低编译的内容的大小,再通过开启 Webpack 的持久缓存和多进程编译来提升二次编译的速度,从而减少项目重启的时长