无需安装任何环境,用PowerShell一键启动、部署前后端项目

3,417 阅读4分钟

看完本文,你将解锁

  1. 终端输入一个字符启动、测试、打包前后端项目
  2. 兼容前后端环境,无需切换命令
  3. 以及更多强大的 Power Shell 功能等待你的发掘

现况

大多数前端开发者,每天上班第一件事
就是打开终端,输入

npm run serve

# 或者
npm run dev

而后端开发,以 Java 为例,则是用 IDEA 点一下项目启动
当接口改变又要手动重启


接下来我要做的就是,终端里输入一个字符,自动启动项目
如果是 Spring Boot 项目,则会在你修改 controller 时,自动重启项目
无需担心改了接口不生效

而且这个命令可作用于多个前后端项目,无需记住冗余的命令

了解 Power Shell 配置

首先你要是 window 的话,直接用就完了,系统自带的
Mac 用户的话,我没用过🤤,你们应该用的是 shell 脚本吧

  1. 按下 win + x,然后你点击也好,快捷键也罢,打开 Power Shell

    image.png

  2. 输入 $profile,下面就会出现你 Power Shell 的配置路径地址,你去看一眼,没有的话就自己建一个

    image.png
  3. 打开这个文件,如果你装了 VScode,那么你可以用 code $profile 直接在 VSCode 打开这个文件,
    没装的话,你就老老实实的用记事本打开,命令是 notepad $profile

  4. 接下来我们在这个配置文件里写个函数,这个大家都看得懂吧,就是打印

    function test {
        echo "i am a test output"
    }
    
  5. 接下来你需要重启你的 Power Shell,然后你可以输入函数名,就会执行函数

    image.png

诶,这下是不是懂了,那可以做的事可太多了,Power Shell 可是能编程的

如果你执行失败了,那么你要设置一下权限,记得用管理员模式

Set-ExecutionPolicy Unrestricted

配置函数

function i {
    pnpm i $args
}

function u {
    pnpm update $args
}

这个 $args 就是接收你传递的所有参数,有了他,就可以简化很多操作
这里定义了两个函数,iu
分别对应着安装和更新 node_modules

接下来,重启你的终端,输入对应的命令,就可以执行了

image.png

这么一来,就可以简化很多操作了,这里是最简单的例子

我来解释一下吧,你在终端输入 i

首先会去环境变量找,然后没找到
接着去你的配置文件看,然后就找到了函数(这段查找顺序我没验证过,大家理解即可)

你输入了 i vite,这个 i 就是函数名,vite 就是你传递的参数
于是就变成了 pnpm i vite

怎么样,是不是很简单

配置通用开发命令

接下来我们来配置前后端都能执行的开发命令
这里后端以 spring boot 为例

首先就是要区分环境,到底是前端还是后端
这时仅需要查看项目的关键文件即可,也就是

  • package.json
  • pom.xml

现在只需要查一下 Power Shell 的 API 即可,经过我的查询

命令为:Test-Path

Power Shell 的命令都是 动词 + 名词 组合,非常利于阅读
于是就可以写出如下的代码

function d {
    if (Test-Path ./package.json) {
        pnpm dev
    } elseif (Test-Path ./pom.xml) {
        mvn spring-boot:run
    } else {
        echo "No package.json or pom.xml found"
    }
}

这个大家一看就懂了吧,来上个图给你们看看

image.png

配置 spring boot 自动重启

接下来需要安装一个工具,用来监听文件

这里我选择的是 nodemon,是一个用 node 写的命令行工具
可以监听指定文件并执行你要的操作

当然你选别的也行,或者 Power Shell 说不定也有这种功能,仅作为抛砖引玉


首先全局安装一下,前提是你有 node 环境,这个大家都有吧,别说我标题党啊

npm i -g nodemon

然后修改函数,我来解析一下 nodemon 的参数

  • -w 监听,这里用 glob 表达式匹配所有 controller
  • -e 指定要监听的扩展名,就是后缀,这里选择 java
  • -x 指定要执行的命令
function d {
    if (Test-Path ./package.json) {
        pnpm dev
    } elseif (Test-Path ./pom.xml) {
        # 用 nodemon 监听所有 controller 下的 java 文件,改变时自动重启
        nodemon -w /controller/**/* -e "java" -x "mvn spring-boot:run"
    } else {
        echo "No package.json or pom.xml found"
    }
}

这不就启动起来了吗,当我修改 controller,还会自动重启
如果你用的是 IDEA,那么默认自动保存,也就是说你按一下就会重启一下
所以你要关掉自动保存,VSCode 默认关闭自动保存的

image.png

VSCode 的原因,有以下 5 点

  1. 免费开源,不用付钱
  2. 轻量高性能,项目秒开,内存占用也小
  3. 多语言支持,只要下载插件就能开发任何语言
  4. JSON 配置很方便,也很直观
  5. 好看,插件也好开发,我的主题就是自己写的

当然,写 Java 的话,仅有 Idea 的 8.5 成功力
前提是需要你精通 VSCode 的配置

其他命令

  • Start

这是一个启动应用程序或者打开网页的命令,用法还有其他的,我还未深入发掘

function bing {
    Start "http://www.bing.com/search?q=$($args -join ' ')"
}
function github {
    Start "https://github.com/search?q=$($args -join ' ')&type=repositories"
}

上面的命令,可以快速搜索 Github 和 bing 的内容
比如

bing vite
github vite

那么他就会从浏览器打开对应的链接


此外还可以打开 应用程序,加上你的地址即可
比如我这个是启动 redis,你也可以打开 VSCode、Idea ...

function redis {
    Start "D:\Dev\redis\redis-server.exe"
}

剩下的内容,大家可以继续发掘