前端开发可能忽略的技术之脚本

_无名_
1,020 阅读3分钟

一、概述

1. 场景

  • 当前开发的项目依赖于另外一个项目中的某个包或者组件
  • 当项目build之后需要做一些复制操作
  • ......

2、声明

首先声明：以上问题通过node都可以得到解决。但是本文是还是想给大家提供另外一种思路去解决以上类似的问题，这种思路或许可以助你把复杂的问题简单化，或者至少给你提供一个解决问题的思路。这种思路就是脚本，本文的示例都是windows脚本，如果想实现类Linux脚本可以参考实现。

3、脚本

脚本是一种包含一系列命令或指令的文件，通常用于自动化执行一系列任务。脚本可以包含各种编程语言的代码，例如Shell脚本、Python脚本、JavaScript脚本等。通过运行脚本，用户可以按照预先定义的顺序和逻辑执行一系列操作，从而简化重复性任务的执行。

二、如何运行脚本

1、一个实现文件复制的脚本

文件以.cmd或者.bat结尾

set root=%~dp0

echo 拷贝前端编辑工具
xcopy  %root%custom-pro-app-front\custom-pro-app-components-front\lib %root%app_d4jdl4div2 /e  /y

if errorlevel 1 goto fail

:fail
echo 执行出错,请检查提示
exit /b

2、windows脚本是什么样的？

image.png

3、如何运行

  • 双击运行

  • 通过cmd命令执行

    通过./脚本名字，比如

    .\copyFrontendLib.cmd

三、脚本实例

1、软链

以下功能是将当前目录下的page-code文件软链到当前目录下的custom-pro-app-front\custom-pro-app-components-front\packages\controls\page-code目录

set root=%~dp0

:: 只能创建一次软连接
:: 创建软连接，将运行中的静态资源路径切换到项目静态资源目录中
mklink /d /j    %root%custom-pro-app-front\custom-pro-app-components-front\packages\controls\page-code %root%page-code

2、ftp上传

以下功能是把当前目录下的app_d4jdl4div2上传到服务器的/home/yandi-component目录下

set root=%~dp0

set uploadFile= %root%app_d4jdl4div2
set serverAddress=root@192.168.1.XXX
set targetDir=/home/yandi-component

:: REM 使用scp命令上传文件到服务器
scp -r  %uploadFile% %serverAddress%:%targetDir%

3、下载文件并解压

功能：从远程服务器下载压缩文件，并解压缩，最后删除

@echo off

:: REM 设置远程服务器信息和文件路径
set serverAddress=192.168.1.XXX
set username=root
set remoteFilePath=/home/pro-app-front.zip
set localDir=C:\shell\test

:: REM 使用 pscp 下载文件到本地目录
scp %username%@%serverAddress%:%remoteFilePath% %localDir%

:: REM 解压文件
tar -xf %localDir%\pro-app-front.zip -C %localDir%

del %localDir%\pro-app-front.zip

4、npm安装依赖

npm config set registry https://npmmirror.com/mirrors/npm/
npm install --unsafe-perm node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
npm install --unsafe-perm

5、运行前端服务

set root=%~dp0

cd %root%custom-pro-app-front/
echo 启动
npm run serve
if errorlevel 1 goto fail


:fail
echo 执行出错,请检查提示
exit /b 1

6、编译之后复制到其他位置

set root=%~dp0

echo cmd to component directory
cd %root%custom-pro-app-front/custom-pro-app-components-front/

echo start build lib 
start /wait cmd /c  npm run build-lib

if errorlevel 1 goto fail

echo build is completed

echo copy lib to specified directory
xcopy  %root%custom-pro-app-front\custom-pro-app-components-front\lib %root%app_d4jdl4div2 /e  /y
if errorlevel 1 goto fail

xcopy  %root%custom-pro-app-front\custom-pro-app-components-front\packages\controls\page-code\page-schema.js %root%app_d4jdl4div2\ /e  /y
if errorlevel 1 goto fail

exit /b 0

:fail
echo Execution error, please check.
exit /b 1

Tips:脚本执行node服务之后会中断后面的执行，因此用了start命令令起一个cmd执行，等待完成之后继续执行下面的脚本。

四、总结

技术和工具是多样的，在合适的时机和场景选择合适的技术和工具或许能带来事半功倍的效果。

avatar
文章
阅读
粉丝