夏天夏 夏天夏
首页
  • 技术分享

    • 小白都能看懂的闭包
    • 关于后台管理应用
    • 关于技术的取舍
    • 前端工程化
    • 切换node版本
    • 如何优雅的写事件代理
    • 我所不了解的技术
    • 我喜欢的parcel
    • angular1使用
    • npm script打造前端工作流
  • 发布一个node插件

    • 发布一个npm包
    • 如何打包一个插件工具库
    • 打包工具的选择
  • 年终总结

    • 2019年总结
    • 2020年总结
    • 2021年总结
  • JavaScript
  • CSS
  • 框架
  • Node
  • 服务
  • web3
  • 其他
我的作品
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

夏天夏

我也不饶岁月
首页
  • 技术分享

    • 小白都能看懂的闭包
    • 关于后台管理应用
    • 关于技术的取舍
    • 前端工程化
    • 切换node版本
    • 如何优雅的写事件代理
    • 我所不了解的技术
    • 我喜欢的parcel
    • angular1使用
    • npm script打造前端工作流
  • 发布一个node插件

    • 发布一个npm包
    • 如何打包一个插件工具库
    • 打包工具的选择
  • 年终总结

    • 2019年总结
    • 2020年总结
    • 2021年总结
  • JavaScript
  • CSS
  • 框架
  • Node
  • 服务
  • web3
  • 其他
我的作品
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 技术分享

    • 小白都能看懂的闭包
    • 关于后台管理应用
    • 关于技术的取舍
    • 前端工程化
    • 切换node版本
    • 如何优雅的写事件代理
    • 我所不了解的技术
    • 我喜欢的parcel
    • angular1使用
    • 使用npm script打造前端工作流
      • 初始化npm项目
      • npm script中的内置命令
      • 执行多个npm script
        • 让多个 npm script 串行
        • 让多个 npm script 并行
      • 执行npm包命令
      • npm命令自动补全
      • 其他不错的命令行包
    • 发布一个npm包
    • 如何打包一个插件工具库
    • 打包工具的选择
  • 年终总结

  • 个人博客
  • 技术分享
夏天夏
2022-05-15
目录

使用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

# 执行多个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

# 其他不错的命令行包

  • 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)
#node#npm#script#脚本
上次更新: 2022/06/01, 18:02:31
angular1使用
发布一个npm包

← angular1使用 发布一个npm包→

最近更新
01
远程办公的个人思考
02-21
02
SEO
01-02
03
NFT的价值
12-27
更多文章>
Theme by Vdoing | Copyright © 2019-2025 夏天夏 | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式