vxiao

悟已往之不谏，知来者之可追。实迷途其未远，觉今是而昨非。

0%

前端项目批量打包

发表于 更新于 分类于
  • 打包环境:npm+webpack
  • 使用powershell编写脚本

场景

业务系统拆分为多个前端项目，每次产品迭代，需打开每个项目执行打包命令，人力重复。

思路

通过命令行脚本，进入到每个项目目录下 执行git pull和npm run build操作。将生成的文件
复制到指定目录下，生成压缩包。

实现

首次运行.bat

windows下需解除powershell脚本禁用，在cmd窗口下输入powershell切换到powershell命令行

1
2
3
4
5
6
7
8
9
10
11
12
13
@echo off

echo ::::::::::::::::::::::::::::::::::::::::::::::::
echo.
echo 首次执行请解除powershell脚本禁用   
echo.
echo.请输入: set-executionpolicy remotesigned
echo.
echo ::::::::::::::::::::::::::::::::::::::::::::::::

powershell

pause;

运行.bat

通过批处理程序(.bat)执行powershell脚本(.ps1)

cd /d %~dp0表示更改当前目录为批处理本身的目录

1
2
3
4
5
cd /d %~dp0

PowerShell.exe -file shell.ps1

pause

config.txt

用于记录项目地址与打包后的输出地址

其中@为分隔符，@前表示生成的文件夹名，@后表示项目地址

1
2
3
4
5
6
7
8
9
10
[Output Config]
D:\lo9.0部署

[Url Config]
onlineform@F:\LO9.0\Release-v1.0.1\onlineform\src\frontend\onlineform
onlineform_mobile@F:\LO9.0\Release-v1.0.1\onlineform\src\mobile\onlineform
Navigation@F:\LO9.0\Release-v1.0.1\glkportal\src\frontend\Navigation
taskcenter@F:\LO9.0\Release-v1.0.1\glkportal\src\frontend\TaskCenter
newportal@F:\LO9.0\Release-v1.0.1\glkportal\src\frontend\NewPortal
taskcenter_mobile@F:\LO9.0\Release-v1.0.1\glkportal\src\mobile

shell.ps1

默认vue项目打包后，文件生成在dist文件夹下。可根据情况，在打包前加入npm install等。

windows自带编辑器PowerShell ISE 开发的.ps1文件为gb2312编码，若用UTF-8编码方式打开中文会乱码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
Write-Host "
┌────────────────────────────────────┐

  vue+webpack 项目批量打包工具

  author: guof

  说明：

  1.vue+webpack项目自动打包

  2.打包后自动压缩

  3.完成后打开目标文件夹

└────────────────────────────────────┘
" -Foreground "yellow"

#powershell版本

if( $PSVersionTable.PSVersion.Major -lt 5){
    Write-Host "提示: 检测到powershell版本过低..." -Foreground "yellow"
    Write-Host ""
    $op = Read-Host "如果跳过回复【y】,其余键跳转到v5下载链接"
    if($op -ne "y"){
      Start-Process -FilePath  https://www.microsoft.com/en-us/download/details.aspx?id=54616
      Write-Host ""
      Write-Host "请在浏览器中下载...." -Foreground "Green"
      exit
    }
}

#字符串分割方法
function Get-Argument
{
  param
  (
    $CommandLine
  )
   
  $result = 1 | Select-Object -Property Command, Argument
 
  if ($CommandLine.StartsWith('"'))
  {
    $index = $CommandLine.IndexOf('"', 1)
    if ($index -gt 0)
    {
      $result.Command = $CommandLine.SubString(0, $index).Trim('"')
      $result.Argument = $CommandLine.SubString($index+1).Trim()
      $result
    }
  }
  else
  {
    $index = $CommandLine.IndexOf('@')
    if ($index -gt 0)
    {
      $result.Command = $CommandLine.SubString(0, $index)
      $result.Argument = $CommandLine.SubString($index+1).Trim()
      $result
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
#读取配置文件
Write-Host "正在读取配置文件..." -Foreground "Green"
$config=gc ".\config.txt";
$o_index=[array]::IndexOf($config,"[Output Config]")
$u_index=[array]::IndexOf($config,"[Url Config]")
$outset = $config[$o_index+1]
$url =$config[($u_index+1)..($config.Length)]

#读取配置项
Write-Host "正在加载配置项..." -Foreground "Green"
$newList =New-Object -TypeName System.Collections.ArrayList
foreach($link in $url){
  $temp = Get-Argument -CommandLine  $link
  $value = $newList.Add($temp)
}

#执行打包
Write-Host "批量打包中..." -Foreground "Green"
$output = $outset + "\source"

#判断文件是否存在
Write-Host ("源包输出 "+ $output + "...") -Foreground "Green"
if([io.Directory]::Exists($output)){
del $output -Recurse
}

#每次清空之前的打包
$target = New-Item -path $outset -name "\source" -type directory

#批量打包
foreach($folderItem in $newList){
Write-Host ("正在打包工程【" + $folderItem.Command + "】") -Foreground "Green"
$path = New-Item -path $output -name $folderItem.Command -type directory
 cd $folderItem.Argument
 git pull
 npm run build
 Copy-Item  ($folderItem.Argument + '\dist\index.html')  -Destination $path
 Copy-Item  ($folderItem.Argument + '\dist\static')  -Recurse   -Destination $path
}

#判断powershell版本是否支持压缩
Write-Host "压缩中..." -Foreground "Green"
$psv = $PSVersionTable.PSVersion.Major
if($psv -ge 5){
    Compress-Archive -Path $outset  -DestinationPath ($outset+"\"+(Get-Date).ToString('yyyy-MM-dd hh-mm-ss') + ".zip")
    explorer.exe $outset
} else{
    Write-Host "目前仅支持v5版本压缩..." -Foreground "Red"
}
Write-Host "批量打包完成..." -Foreground "Green"
if($psv -ge 5){
pause;
}