项目开发中,常遇到需要并行处理多个任务的情况,比如一个命令负责启动本地开发服务器、一个命令负责打包静态资源js、css等,这种需求在Micro frontends里更加明显:同时启动多个单独的微应用。本文介绍一个解决这种需求的工具.
项目结构
一个前后端分离的项目,包含了server端和前端。
server端提供接口服务,前端则由另一个项目编译成静态资源(由webpack的监听打包),二者统一由express托管:
目录结构是:
外层是一个express项目,里面的子目录里包含一个独立的前端项目
我们有两个要做的任务:
- express需要一个命令来运行express服务
- 前端需要一个命令来运行webpack的监听自动打包功能。
我们可以开两个独立的终端,分别运行这两个命令,但这不够便捷。
如何在一个终端里同时运行多条命令呢?
使用concurrently!
concurrently是一款npm包,可以让开发者在一个终端里同时运行多条命令。
使用步骤:
-
- 安装 npm i concurrently -D
-
- 配置package.json文件,在外层的package.json里配置执行 内层项目的脚本(设置--prefix + 项目的目录) 内层package.json文件内容:
{
"scripts":{
"dev":"webpack --watch"
}
}
外层package.json文件内容:
{
"scripts":{
"client":"npm run dev --prefix front-end-proj-dir",
"server":"node./index.js",
"start":"concurrently\"npm run client\" \"npm run server\""
}
}
不同的命令以双引号包起来,字符里双引号必须进行转移处理,否则concurrently会按照默认的方式command1 args command2 args来解析命令
最后在外层的项目里运行:
npm run start