使用npm script打造前端工作流
# 初始化npm项目
一般初始化一个项目,我们只需要执行npm init
之后会要你输入一些项目信息,如果想跳过输入信息的过程你也可以执行npm init -y
或者 npm init -f
# npm script中的内置命令
在npm中的script中的内置命令可以简写去掉'run'
比如 npm run test
可以简写为npm test
也可以简写为npm t
npm run start
可以简写为npm start
如果不带任何参数执行 npm run,它会列出可执行的所有命令
Lifecycle scripts included in hello-npm-script:
test
echo "Error: no test specified" && exit 1
1
2
3
4
2
3
4
# 执行多个npm script
# 让多个 npm script 串行
一般我们需要执行多个npm命令可以使用&&
符号把多条 npm script 按先后顺序串起来即可,需要注意的是,串行执行的时候如果前序命令失败(通常进程退出码非0),后续全部命令都会终止
# 让多个 npm script 并行
命令的运行从串行改成并行使用&
符号,需要注意的是它只负责触发多条命令,而不管结果的收集,如果并行的命令执行时间差异非常大,我们可以在最后面添加& wait
等待所有结果返回之后,才打印命令运行的结果。不然会直接输出结果,而不会等待其中时间较长的运行命令。不过& wait
只能在Linux中执行,如果想要解决此问题或者项目中的npm script非常臃肿的话建议使用npm i npm-run-all -D
来管理。
# 执行npm包命令
当我们需要执行某个npm命令行工具时,我们可以执行npx packageName
他的底层是在./node_modules/.bin/packageName.js这个目录中执行这个文件
如果你写在npm script中就可以直接写packageName
可以省略npx
这个命令了
# npm命令自动补全
npm completion >> ~/.bashrc
npm completion >> ~/.zshrc
1
2
2
# 其他不错的命令行包
- onchange (opens new window) 文件变化时自动运行 npm script
- nodemon (opens new window) 启动node服务并且监控文件自动更新
- shelljs (opens new window) 可以吧shell脚本写成node脚本
- chalk (opens new window) 修改控制台中字符串的样式
- scripty (opens new window) 将 npm script 剥离到单独的文件中,从而把复杂性隔到单独的模块里面,让代码整体看起来更加清晰。
- opn-cli (opens new window) 打开 html 文件的工具
- open (opens new window) 是能够打开任意程序的工具的命令行版本
- cross-env (opens new window) node全局变量
- livereload (opens new window) 实现自动刷新
编辑 (opens new window)
上次更新: 2022/06/01, 18:02:31