1 安裝部署NodeJS+NPM
1.1 進(jìn)入nodejs官方網(wǎng)站下載軟件。
https://nodejs.org/en/
下載所需版本

1.2 下載完成后，雙擊默認(rèn)安裝，安裝程序會(huì)自動(dòng)添加環(huán)境變量。

1.3 檢查nodejs是否安裝成功。
打開cmd命令行，輸入node -v 顯示當(dāng)前版本號(hào)

1.4 檢查npm是否安裝。
由于新版的NodeJS已經(jīng)集成了npm，所以之前npm也一并安裝好了。同樣可以使用cmd命令行中鍵入npm -v

1.5 設(shè)置npm代理。（一般建議直接設(shè)置為國(guó)內(nèi)的registry，參考第7 Nmp的安裝錯(cuò)誤）
npm config set strict-ssl false關(guān)閉npm的https
npm config set registry “http://registry.npmjs.org/” 設(shè)置npm的獲取地址
npm config set proxy http://l00266782:密碼@proxycn2.huawei.com:8080 設(shè)置代理

檢查：
npm config ls

1.6 npm常用命令。
npm install 安裝nodejs的依賴包
npm install -g 將包安裝到全局環(huán)境中
npm install -save 安裝的同時(shí)，將信息寫入package.json中
npm ini 會(huì)引導(dǎo)你創(chuàng)建一個(gè)package.json文件，包括名稱、版本、作者這些信息等
npm remove 移除
npm update 更新
npm ls 列出當(dāng)前安裝了的所有包 (-g 列出全局的包 -gl 全局的包的詳細(xì)信息)
npm root 查看當(dāng)前包的安裝路徑
npm root -g 查看全局的包的安裝路徑
npm help 幫助，如果要單獨(dú)查看install命令的幫助，可以使用npm help install
更多參考http://www.npmjs.org/doc/
2 搭建編譯工具
2.1 使用Git下載nui-tools (git@code.huawei.com:febs/nui-tools.git)相關(guān)代碼

2.2 使用NPM命令啟動(dòng)febs項(xiàng)目
進(jìn)入目錄D:\workspace\febs\nui-tools
安裝nui-tools全局模塊 npm install -g
將nui-tools鏈接到全局模式下 npm link

檢查：
npm ls –g查看是否報(bào)錯(cuò)
2.3 配置nui-tools.config.js
路徑：建議在模塊工程根路徑。如：

內(nèi)容：
module.exports = {
flags: {
_common: {
babel: false,
},
client: {
entry: {
home: “./com.huawei.icto.commonsvc.portal.ui/src/main/webapp/frame/home/homeEntry.js”
layououtshow: “./com.huawei.icto.commonsvc.portal.ui/src/main/webapp/frame/layoutShow/layoutShowCtrl.js”
},
proxyModules: [‘icto-base’],
}
}
};

home和layououtshow:對(duì)應(yīng)PIU
proxyModules：依賴的PIU.icto-base內(nèi)含：jQuery 1.7.2和Angular 1.2.7

2.4 編譯
命令：nui-tools.config.js和package.json所在路徑
路徑：nui-tools run build
命令：nui-tools

3 配置npm工程
3.1 配置package.json
路徑：建議在模塊工程根路徑。如：

內(nèi)容：
{
“name”: “icto-portal”,
“version”: “1.0.0”,
“description”: “icto home demo”,
“main”: “./com.huawei.icto.commonsvc.portal.ui/src/main/webapp/frame/home/homeEntry.js”,
“scripts”: {
“build”: “nui-tools build --clean -o dist . node_modules/icto-base”,
“watch”: “nui-tools build --clean --watch -o dist . node_modules/icto-base”
},
“repository”: {
“type”: “git”,
“url”: "git@rnd-isourceb.huawei.com:SPO-NetworkOSS/icto_commsvc_service_portal.git"
},
“author”: {
“name”: “l(fā)ihongfeng”,
“email”: "lihongfeng@huawei.com"
},
“l(fā)icense”: “ISC”,
“bugs”: {
“url”: “http://rnd-isourceb.huawei.com/SPO-NetworkOSS/icto_commsvc_service_portal/issues?closed=0”
},
“dependencies”: {
“icto-base”: “git+ssh://git@code.huawei.com:l00266782/icto-base.git”
}
}

“name”: “icto-portal”, 模塊名稱
“version”: “1.0.0”, 版本，規(guī)范參見：http://code.huawei.com/febs/docs/blob/master/src/zh-cn/項(xiàng)目版本號(hào)規(guī)范.md
“main”: “./com.huawei.icto.commonsvc.portal.ui/src/main/webapp/frame/home/homeEntry.js”,主類，對(duì)我們無意義。

4 切換內(nèi)容

4.1 菜單加載
JSON格式：http://code.huawei.com/febs/docs/blob/master/src/zh-cn/接口文檔/FEBS服務(wù)端基于CloudSOP的文件接口.md
注：目前平臺(tái)未完成相關(guān)接口，使用REST注冊(cè)進(jìn)行聯(lián)調(diào)。各業(yè)務(wù)填寫JSON，由平臺(tái)預(yù)置進(jìn)去。
URL: /i/febs/apps/{abbr}
JSON:
{
“version” : “1.0.0”,
“abbr” : “SO Monitor”,
“title” : “SO Monitor”,
“url” : “https://10.67.252.85:31943/SOMonitor/themes/default/views/somonitorRule.etpl”,
“tags” : [“business”],
“icon” : “serviceMonitor”,
“l(fā)ocales” : {
“zh-cn” : {
“title” : “監(jiān)控”,
“isearch” : “jiankong”
}
}
}

4.2 HTML切換

// 會(huì)話服務(wù) // febs加載 // 頁頭加載

Body中增加如下內(nèi)容，用于業(yè)務(wù)顯示。

Home PIU加載：

4.3 PIU切換
homeEntry.js
Prel.start(‘icto-portal-home’, ‘1.0.0’, [’$dom’], function home(piu, st){
Object.assign(require(‘xmodules’), piu.deps);
return require(’./home’)(piu, st);
}, function (piu) {
webpack_public_path = piu.config.base + ‘/’; // eslint-disable-line camelcase
});

‘icto-portal-home’：PIU名稱。規(guī)范：icto-模塊-名稱
‘1.0.0’:版本號(hào)
[’$dom’]：依賴的狀態(tài)
return require(’./home’)(piu, st);：PIU承載實(shí)體，’./home’相對(duì)路徑

home.js

邏輯路徑改造為相對(duì)路徑：

seaJS寫法改造：

angularJS和eView改造：
// eView引用
require("…/cbb/plat/eview.basic.min.js");

// 綁定控制類
angular.module(‘a(chǎn)’, [‘eviewWidgets’]).controller(‘testBt’, ['$scop{e}^{\prime },function($scope) {
console.log(‘success’);
}]);
// DOMLoad加載變?yōu)?#xff0c;運(yùn)行期加載
angular.bootstrap(document.getElementById(‘test_button’), [‘a(chǎn)’]);

PIU設(shè)置狀態(tài)：
piu.setup({“icto-portal-test”: “”})
piu.set(“icto-portal-test”, elem);

PIU監(jiān)聽狀態(tài)：
piu.attach(piu, {
“stateChange”: {
“icto-portal-test”: function (aaa) {
console.log(“test”);
console.log(aaa);
}
}
});

PIU注冊(cè)依賴關(guān)系：
URL: /i/febs/v1/assets
JSON:
{
// PIU名稱@版本號(hào)
“icto-base@1.0.0”: {
“config”: {
// 基礎(chǔ)路徑
“base”: “https://10.67.252.68:31943/ServicePortal”
},
“assets”: [
// 和base路徑拼裝為成js完成訪問路徑
// 前綴為css時(shí)， 為加載css
// 此部分內(nèi)容會(huì)記在到HTML的

[規(guī)避]this指針引用沖突規(guī)避方案：
angular.bootstrap(document.getElementById(‘test_button’), [‘a(chǎn)’]);
Function.prototype.bind = function(scope) {
var self = this;
var args = Array.prototype.slice.call(arguments, 1);
return function() {
var args2 = args.slice();
args2.push.apply(args2, arguments);
return self.apply(scope, args2);
};
};

其他說明：

webpack屬于靜態(tài)編譯，原使用動(dòng)態(tài)加載JS集成方式，使用PIU的設(shè)置狀態(tài)、監(jiān)聽和依賴解決。

5 求助

Nui-tools工具的編譯流程

6 遺留問題

Febs切換后檢查。Angular和jQuery遺留問題的全局污染。

原Portal的依賴。
a) Messager提示。 --Cloud Portal
b) Framelet編譯。 --Cloud Portal
c) CSS依賴。 --Cloud Portal
d) I18n依賴。
e) 菜單注冊(cè)。
i. JSON問題形式提供加載形式。–Cloud SOP/Febs
ii. REST接口何時(shí)注銷，如何注銷？ --Febs
iii. 一級(jí)菜單的URL在Febs無法提供和達(dá)成一致。 --Febs

AUTOLOAD注冊(cè)機(jī)制。多實(shí)例的情況下，無法感知服務(wù)上線和下線。 – Cloud SOP。

7 Npm的安裝錯(cuò)誤
1.1 項(xiàng)目拷到本地，然后cd進(jìn)入項(xiàng)目目錄，npm install安裝，報(bào)錯(cuò)了（①卡住不動(dòng) ②unexpected end of file ③ cb() never called等），可以嘗試以下方法：

首先確定自己使用的包的下載源是公司內(nèi)的（可以通過npm config list查看自己包的下載源，如果是默認(rèn)官方的話，建議改成公司內(nèi)的，方法：npm config set registry http://szxy1.artifactory.cd-cloud-artifact.tools.huawei.com/artifactory/api/npm/sz-npm-public），不存在因?yàn)榫W(wǎng)絡(luò)導(dǎo)致依賴包下載緩慢的安裝失敗問題，如果遇到安裝一半卡住不動(dòng)的小伙伴可以嘗試一下這種方法。

然后，使用npm cache clean --force清除緩存，并將安裝失敗的項(xiàng)目中的node_modules文件夾刪除，重新npm install。

再次，可能由于node版本或npm版本太老導(dǎo)致，那就升級(jí)版本。查看node和npm版本的命令分別為node -v、npm -v。
一點(diǎn)要提到的是，如果更新node版本的話，那么連帶npm版本也會(huì)一同更新了，所以如果你只是想更新npm版本，那么只需運(yùn)行npm install npm -g就可以單獨(dú)更新npm版本，而不需要更新node版本，這里注意npm要全局安裝。如果要更新node版本的話，發(fā)現(xiàn)網(wǎng)上的很多方法有問題，linux平臺(tái)的話可以嘗試一下這種更新方式（首先清除cache，npm cache clean --force，然后安裝n模塊，該模塊專門用來管理nodejs的版本，命令為npm install -g n， 然后直接輸入n stable更新到最新版本，若要更新到指定版本的話，那么就n 對(duì)應(yīng)版本號(hào)，例如n 8.11.3即更新到8.11.3的版本），但是windows平臺(tái)不支持n，網(wǎng)上說的換成nvm的方式試過了也沒用。
然后本人采用的更新方式如下（覆蓋安裝）：
① 在官網(wǎng)（https://nodejs.org/zh-cn/）上下載對(duì)應(yīng)要更新版本的安裝包；
② 使用命令行where node查看原來版本的node安裝地址，然后再安裝新版本時(shí)，將node安裝到老版本所在的目錄下即可。
③ 然后再嘗試以上的解決辦法。本來以為重新安裝了node會(huì)導(dǎo)致之前安裝的全局包這些丟失，結(jié)果覆蓋安裝后發(fā)現(xiàn)原來安裝的全局包還都在，小驚喜~不用再重新下載那些包了。

網(wǎng)上也有提到一種方法：使用npm cache clean --force清除緩存，然后將安裝失敗的項(xiàng)目中的node_modules文件夾以及package-lock.json文件刪除（package-lock.json是在npm install安裝時(shí)生成的一份文件，用以記錄當(dāng)前狀態(tài)下實(shí)際安裝的各個(gè)npm package的具體來源和版本號(hào)，如果沒有這個(gè)文件的話，那么npm install將下載大版本下的最新的包，具體可參考：https://www.cnblogs.com/cangqinglang/p/8336754.html），然后再npm install。

總結(jié)

以上是生活随笔為你收集整理的WEB端工程环境安装的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。