NodeJs添加代碼版權(quán)信息命令工具的設(shè)計(jì)與實(shí)現(xiàn)

張文豪

（廣東白云學(xué)院大數(shù)據(jù)與計(jì)算機(jī)學(xué)院，廣州 510450）

0 引言

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

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

1 相關(guān)技術(shù)

NodeJs是Ryan Dahl于2009年發(fā)起的一個(gè)開源項(xiàng)目，是一個(gè)基于Chrome V8 引擎，能夠快速構(gòu)建網(wǎng)絡(luò)服務(wù)與應(yīng)用的JavaScript 執(zhí)行平臺(tái)，目前被廣泛應(yīng)用到各種Web應(yīng)用的開發(fā)項(xiàng)目。

NPM 的全稱是NodeJs Package Manager，是一個(gè)NodeJs 包管理和分發(fā)工具，已經(jīng)成為非官方的發(fā)布NodeJs模塊（包）的標(biāo)準(zhǔn)。

package.json 是基于NPM 標(biāo)準(zhǔn)的NodeJs 模塊（包）必須存在的描述文件，包括模塊名稱、版本號(hào)、作者、模塊描述、關(guān)鍵字、軟件許可證、運(yùn)行腳本、軟件依賴包等信息。

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

GitHub 于2008 年正式上線，是一個(gè)面向開源及私有軟件項(xiàng)目的托管平臺(tái)［9］。

workflow文件是GitHub Actions 的配置文件，存放在代碼倉(cāng)庫(kù)的.github/workflows/目錄下。比如，寫一個(gè)npm_publish.yaml文件，存儲(chǔ)的目錄就是.github/workflows/publish.yaml。GitHub 只要發(fā)現(xiàn).github/workflows 目錄下里面有.yml 文件，就會(huì)自動(dòng)運(yùn)行該文件［10］。

2 設(shè)計(jì)方案

首先根據(jù)package.json 的信息自動(dòng)生成代碼版權(quán)信息，然后掃描項(xiàng)目構(gòu)建的代碼目錄，并將版權(quán)信息添加到代碼文件的頂部。

2.1 代碼版權(quán)信息描述模板

pkg 為解析package.json 文件后的對(duì)象，name 為模塊名稱/軟件名稱、version 為版本號(hào)、homepage 為官方主頁(yè)、author 為軟件作者、license 為軟件許可證、year 是根據(jù)當(dāng)前時(shí)間獲取的年份。

2.2 執(zhí)行流程

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

圖1 具體流程

3 實(shí)現(xiàn)

3.1 初始化模塊

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

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

3.2 程序?qū)崿F(xiàn)

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

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

（3）代碼實(shí)現(xiàn)。代碼實(shí)現(xiàn)可以到github 平臺(tái)查看：https://github.com/xqkeji/xq-banner。

3.3 發(fā)布

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

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

如圖2 所示，在New Access Token 頁(yè)面輸入Access Token 的name 屬性，然后選擇用于Publish，最后點(diǎn)擊‘Generate Token’后就會(huì)生成一個(gè)Access Token。

圖2 創(chuàng)建Access Token

（2）在xq-banner 的github 代碼庫(kù)新建一個(gè)工作流程（workflow）。

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

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

圖4 github代碼庫(kù)新建密鑰頁(yè)面

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

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

通過(guò)以上三個(gè)步驟后，只要在github代碼庫(kù)中新建一個(gè)版本標(biāo)簽，就會(huì)自動(dòng)將xq-banner 代碼庫(kù)的代碼也同時(shí)發(fā)布到npmjs 服務(wù)器上的xq-banner模塊。

4 應(yīng)用

（1）安裝。

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

圖5 安裝xq-banner

（2）使用。

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

執(zhí)行后構(gòu)建目錄dist下的所有代碼文件頂部都會(huì)自動(dòng)添加如下的版權(quán)信息。

5 結(jié)語(yǔ)

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