張文豪

（廣東白云學院大數據與計算機學院，廣州 510450）

0 引言

隨著Web 技術的發(fā)展，軟件項目中前端代碼越來越多，前端技術在軟件項目中的作用越來越重要，HTML、Javascript、Css 等前端技術成為軟件開發(fā)必備的技能［1］。2009 年5 月Ryan Dahl發(fā)布了NodeJs，是一個基于Chrome V8引擎的JavaScript 運行環(huán)境，讓JavaScript 運行在服務端的開發(fā)平臺，也使JavaScript 成為了全球應用最廣泛的開發(fā)語言［2］。2010 年1 月，NodeJs軟件包管理工具NPM 也正式上線，使得NodeJs在項目中的應用更加方便［3］。當前幾乎所有前端項目都離不開NodeJs 的相關技術，也形成了很多優(yōu)秀的前端項目構建工具，如Vite、Webpack、Rollup 等，并且也已經存在很多可以自動添加代碼版權信息的插件，但是仍存在需要自己配置好版權信息才能完成的問題［4-6］。由于package.json 文件已經包含了主要的版權信息，如軟件名稱、版本號、作者、開源協(xié)議等，每個NodeJs 模塊軟件包又都必須包含一個package.json 文件，可以通過package.json 文件來直接獲取版權信息［7］。

本文提出通過獲取package.json 文件里的相關版權信息來自動生成代碼文件的版權信息，實現開箱即用的效果，無需任何配置就能自動添加代碼的版權信息，同時考慮到前端項目構建工具眾多，將該工具開發(fā)為一個NodeJs 的命令行工具，能讓該工具在所有前端項目中使用，可以有效提高該工具的通用性。

1 相關技術

NodeJs是Ryan Dahl于2009年發(fā)起的一個開源項目，是一個基于Chrome V8 引擎，能夠快速構建網絡服務與應用的JavaScript 執(zhí)行平臺，目前被廣泛應用到各種Web應用的開發(fā)項目。

NPM 的全稱是NodeJs Package Manager，是一個NodeJs 包管理和分發(fā)工具，已經成為非官方的發(fā)布NodeJs模塊（包）的標準。

package.json 是基于NPM 標準的NodeJs 模塊（包）必須存在的描述文件，包括模塊名稱、版本號、作者、模塊描述、關鍵字、軟件許可證、運行腳本、軟件依賴包等信息。

npx 的全稱是execute npm package binaries，是NPM5.2 以后新增的命令工具，是一個NPM包的執(zhí)行器，可以用于執(zhí)行各種命令［8］。

GitHub 于2008 年正式上線，是一個面向開源及私有軟件項目的托管平臺［9］。

workflow文件是GitHub Actions 的配置文件，存放在代碼倉庫的.github/workflows/目錄下。比如，寫一個npm_publish.yaml文件，存儲的目錄就是.github/workflows/publish.yaml。GitHub 只要發(fā)現.github/workflows 目錄下里面有.yml 文件，就會自動運行該文件［10］。

2 設計方案

首先根據package.json 的信息自動生成代碼版權信息，然后掃描項目構建的代碼目錄，并將版權信息添加到代碼文件的頂部。

2.1 代碼版權信息描述模板

pkg 為解析package.json 文件后的對象，name 為模塊名稱/軟件名稱、version 為版本號、homepage 為官方主頁、author 為軟件作者、license 為軟件許可證、year 是根據當前時間獲取的年份。

2.2 執(zhí)行流程

通過NPM 發(fā)布NodeJs 模塊通常都是指定dist目錄（構建完成的代碼目錄）進行發(fā)布，可以默認掃描dist 目錄下所有代碼文件，并添加代碼版權信息就可以滿足大部分的需求，同時也允許用戶通過參數增加需要掃描的目錄，來增加其通用性，如圖1所示。

圖1 具體流程

3 實現

3.1 初始化模塊

打開命令行終端，使用mkdir新建模塊目錄xq-banner，使用cd 命令進入模塊目錄，執(zhí)行npm init 初始化模塊，按照提示完成相應信息的填寫，系統(tǒng)自動完成package.json 的創(chuàng)建，最后再根據模塊實際情況調整后的package.json 內容如下：

屬性name 要保證在npm 模塊包中是唯一的，才能發(fā)布成功。同時由于本文實現的是一個NodeJs 的命令工具，必須指定bin 屬性的值，該屬性由鍵值對組成，鍵表示命令，值表示對應的程序文件，例如｛“xq-banner”：“./bin/banner.js”｝，表示該模塊存在xq-banner 命令，執(zhí)行xq-banner命令時，就是執(zhí)行‘./bin/banner.js’的程序文件。

3.2 程序實現

（1）確定package.json 路徑。用戶安裝本文實現的xq-banner 模塊時，會將程序安裝在用戶模塊下的node_modules 目錄，同時xq-banner 命令執(zhí)行的是‘./bin/banner.js’文件，banner.js 文件在用戶模塊目錄的路徑為：‘node_modules/xq-banner/bin/banner.js’，因此用戶模塊的package.json 路徑相對于banner.js 文件的路徑為：‘../../../package.json’。

（2）生成代碼版權信息。確定package.json路徑后，使用JSON 工具包解析package.json 的文件，可以得到package.json 的所有信息。同時使用日期工具，根據程序執(zhí)行時間得到當前的年份。最后按照2.1節(jié)生成代碼版權的信息。

（3）代碼實現。代碼實現可以到github 平臺查看：https://github.com/xqkeji/xq-banner。

3.3 發(fā)布

通常開發(fā)完成一個NPM 模塊后，可以使用npm publish 命令來完成發(fā)布，但是一般的項目代碼都是托管到github 平臺上，因此可以利用github 的工作流來完成自動發(fā)布到https://www.npmjs.com/服務器上。

（1）登錄npmjs 的賬戶，并創(chuàng)建一個Access Token。

如圖2 所示，在New Access Token 頁面輸入Access Token 的name 屬性，然后選擇用于Publish，最后點擊‘Generate Token’后就會生成一個Access Token。

圖2 創(chuàng)建Access Token

（2）在xq-banner 的github 代碼庫新建一個工作流程（workflow）。

如圖3所示，模塊發(fā)布工作流程的代碼是相對固定的，只有$｛｛secrets.npm_token｝｝是動態(tài)的，代表npmjs服務器上的Access Token值。

圖3 模塊發(fā)布工作流程代碼

圖4 github代碼庫新建密鑰頁面

（3）在xq-banner的github代碼庫新建密鑰。

Name 為密鑰名稱，與工作流程代碼里的$｛｛secrets.npm_token｝｝名稱保持一致。Secret 填寫npmjs服務器上生成的Access Token的值。

通過以上三個步驟后，只要在github代碼庫中新建一個版本標簽，就會自動將xq-banner 代碼庫的代碼也同時發(fā)布到npmjs 服務器上的xq-banner模塊。

4 應用

（1）安裝。

在需要自動添加代碼版權信息的npm模塊目錄下，執(zhí)行命令：npm i xq-banner，安裝xq-banner模塊。如圖5所示。

圖5 安裝xq-banner

（2）使用。

安裝xq-banner 模塊后，可以直接執(zhí)行npx xq-banner命令為dist目錄下的所有代碼添加版權信息，也可以將npx xq-banner 命令串聯(lián)到package.json的構建命令后面，構建完成后自動執(zhí)行。package.json 執(zhí)行構建腳本示例：｛“build”：“npx unbuild && npm run convert && npm run min &&npx xq-banner”｝。構建執(zhí)行效果如圖6所示。

執(zhí)行后構建目錄dist下的所有代碼文件頂部都會自動添加如下的版權信息。

5 結語

本文使用NPM 模塊的標準，開發(fā)了一個可以通過命令執(zhí)行xq-banner 模塊，該模塊默認實現了將dist目錄下的所有代碼文件頂部自動添加版權信息，也可以通過命令行參數指定其他目錄來為代碼自動添加版權信息。只要安裝xqbanner 模塊，就能實現無需任何配置，開箱即用的效果，同時xq-banner 是一個NodeJs 命令行模塊，適用于任何的前端項目，具有很強的通用性。