[Test the Spartacus installation with schematics on Windows](https://github.com/SAP/spartacus/issues/14241)

本文介紹詳細步驟。

首先使用命令列安裝 verdaccio：

> Install verdaccio $ npm i -g verdaccio@4 (only for the first time)

Verdaccio 是一個簡單的、零配置要求的本地私有 NPM 登錄檔。 不需要整個資料庫就可以開始。 Verdaccio 開箱即用，帶有自己的小型資料庫，並且能夠代理其他登錄檔（例如 npmjs.org），還引入了快取下載模組的功能。 對於那些希望擴充套件其儲存能力的人，Verdaccio 支援各種社群製作的外掛來連線到服務，例如 Amazon 的 S3、Google Cloud Storage 或建立自己的外掛。

![](https://img-blog.csdnimg.cn/img_convert/108c4509323871a56916a6320064ed3a.png)
使用下面的命令列新增新使用者：

> npm adduser --registry http://localhost:4873
![](https://img-blog.csdnimg.cn/img_convert/37073cbd682091e03835f3b17968cfcf.png)
這樣，之後安裝 Spartacus 需要拖取依賴包時，可以從本地 verdaccio 資料庫裡讀取內容，而無需透過網路讀取。

錯誤1：lsof command not found

![](https://img-blog.csdnimg.cn/img_convert/3746ff79b93c4cbdf714e0a3986edf56.png)
lsof 命令用來檢查 verdaccio 是否已經正在執行了：

![](https://img-blog.csdnimg.cn/img_convert/2d599313d63fb04eadcf8678230871c1.png)
verdaccio 用來註冊新使用者，完成之後需要結束該程式。

上面指令碼的含義是，把 lsof 命令的結果存到變數 VERDACCIO_PID 裡，然後檢查該變數是否不為空。

-n 操作檢測後面的運算元是否為空。

if [ ! -n "$1" ] 的含義是，檢查第一個引數是否為空。-n 不為空，再用感嘆號加個反，表示空。

等價於：

```shell
[ -z "$1" ]
```

-z 檢測第一個輸入引數是否為空。

$1 $2 代表第一個和第二個輸入引數，例如下面的 shell 指令碼：
./foo bar baz

則 $1 為 bar，$2 為 baz

> An unhandled exception occurred: EPERM: operation not permitted, open 'C:\Users\I042416\.angular-config.json

![](https://img-blog.csdnimg.cn/img_convert/e60ff297aba762d9c009feeb0d7a4f79.png)

![](https://img-blog.csdnimg.cn/img_convert/236528609b85ae33c69ad5f9b6c71441.png)

![](https://img-blog.csdnimg.cn/img_convert/c96638fe86007df1575ed5e0574cb3c3.png)
在管理員模式下執行還是報同樣的錯誤。

![](https://img-blog.csdnimg.cn/img_convert/e4b90dbf442017482db2c1f175af4ae5.png)

也就是說，單獨執行這個命令都會報錯：

> npm i -g @angular/cli@12.0.5

結果打臉了，單獨執行上面的命令可以。這真是怪事。

![](https://img-blog.csdnimg.cn/img_convert/72517d9fb9942051891fdcd551a07dc2.png)

還是老問題，把這個 .angular-config.json 檔案的隱藏屬性去掉即可：

![](https://img-blog.csdnimg.cn/img_convert/056dda233262dd168e83c7b03ce3e6aa.png)

解決了這個問題之後，就開始 build 了：

![](https://img-blog.csdnimg.cn/img_convert/239adfa87116d2eeba6353e860d95946.png)

成功安裝：
![](https://img-blog.csdnimg.cn/img_convert/7b372811cccef6917d6f7f1c6ebacac1.png)

The installation will create two folders in the $BASE_DIR directory:

* apps (generated/executable apps)
* clone (cloned Spartacus repo)

FESM2015
UMD

開始構建了：

![](https://img-blog.csdnimg.cn/img_convert/2e64688c4719021a4743bb5974f6cdc4.png)

構建結果：

![](https://img-blog.csdnimg.cn/img_convert/73b9b5fa7a46e276c001f7f4b9884976.png)

執行的是這些 ng build 命令：

![](https://img-blog.csdnimg.cn/img_convert/43cce9c41a609d6365fc9cb4479c31db.png)

![](https://img-blog.csdnimg.cn/img_convert/cf32fe41f427ee3f5c57cdd835df43ec.png)

這裡多了一個 Schematics build：
![](https://img-blog.csdnimg.cn/img_convert/0ce863d01e63904f0d19baa72108a824.png)

![](https://img-blog.csdnimg.cn/img_convert/defea3a5eeb035a4424e900d468df881.png)

![](https://img-blog.csdnimg.cn/img_convert/4d4864fde7f78da3e6c4bec5237509fd.png)

這個綠色的方框正好只比包裹在裡面的字串多兩個字元：
![](https://img-blog.csdnimg.cn/img_convert/b2205e14c9d1dcbf67642b5647126477.png)

透過 printh 函式實現：

![](https://img-blog.csdnimg.cn/img_convert/161a2dcc087ab65e36d1de03679814ef.png)

![](https://img-blog.csdnimg.cn/img_convert/2e8d0da1511f82975ab1243d190b40bf.png)

publish 到一個私有的 npm 倉庫去，然後從這個私有的倉庫下載庫檔案進行 shell app 的安裝：

![](https://img-blog.csdnimg.cn/img_convert/5ab09d2fc5d2764bd697b612d8bcd400.png)

shell app 的安裝，在 create_apps 函式里完成：
![](https://img-blog.csdnimg.cn/img_convert/b9b698f73cb2ffe6d7b9de8c3ad6238a.png)

本地儲存的定義：

![](https://img-blog.csdnimg.cn/img_convert/a4a08fdbea58d8acbe26b9c5574e1b84.png)

本地 library：
![](https://img-blog.csdnimg.cn/img_convert/75668b087975a65e994a9479797256f8.png)

可以解壓檢視這些本地 library 內容：
![](https://img-blog.csdnimg.cn/img_convert/660ee0558f68ae42df39ba09bfdcc545.png)

完整的原始碼：
![](https://img-blog.csdnimg.cn/img_convert/4b45df820354676cdfd0055e2a29f22a.png)

![](https://img-blog.csdnimg.cn/img_convert/56898ce03cad9cd7a0f10da9890cb78d.png)

![](https://img-blog.csdnimg.cn/img_convert/8c10a1696dbc196ccaec8f03d6f1bd38.png)

使用指令碼進行 SAP Spartacus 安裝工作

相關文章