Sentinel控制台前端開發環境搭建

Sentinel：分布式系統的流量防衛兵。
官網：https://sentinelguard.io
Github：https://github.com/alibaba/sentinel
Wiki：https://github.com/alibaba/sentinel/wiki
FAQ：https://github.com/alibaba/Sentinel/wiki/FAQ

---

Sentinel控制台：https://github.com/alibaba/Sentinel/wiki/控制台
它是一個標准的SpringBoot應用。
其中，前端使用了AngularJS v1.4.8，需要搭建Node開發環境。

步驟

1. 安裝node.js
   官網：https://nodejs.org/en/
   
   選擇10.16.0 LTS穩定版下載，下載后雙擊安裝即可。
   安裝完成后，打開cmd輸入node -v查看版本為：v10.6.0

2. 安裝cnpm
   淘寶 NPM 鏡像 https://npm.taobao.org/
   npm install -g cnpm --registry=https://registry.npm.taobao.org
   然后就可以使用cnpm了。
   PS：如果網速較快，這一步可以省略，直接用npm就好。

3. npm install
   因為安裝了cnpm，這里使用cnpm install，注意在Sentinel\sentinel-dashboard\src\main\webapp\resources目錄下執行。

4. 本地開發
   cnpm start

5. 前端構建
   cnpm run build

打開package.json：

"scripts": {
    "test": "echo no test case",
    "build": "gulp build",
    "start": "gulp"
 }

我們發現這里start實際執行的是gulp，build執行的是gulp build。

打開gulpfile.js，可以看到具體執行的任務。
其中，

// 打開瀏覽器
  setTimeout(() => {
    open('http://localhost:8080/index_dev.htm')
  }, 200);

如果不想每次都自動打開瀏覽器，可以注釋掉：）

js驗證

如果在IDEA里有js文件顯示紅色波浪線，打開Settings->Languages & Frameworks->javaScript，
修改JavaScript language version默認的ECMAScript5.1改為6即可。

js、html縮進

發現項目中的js、html文件里的縮進格式跟java文件4個空格不同，它們是2個空格。
在Setting中進行設置：

至此就可以開始前端頁面、腳本的開發了。

---

參考：
https://github.com/alibaba/Sentinel/blob/master/sentinel-dashboard/src/main/webapp/resources/README_zh.md