WEB端工程环境安装

1 安装部署NodeJS+NPM
1.1 进入nodejs官方网站下载软件。
https://nodejs.org/en/
下载所需版本

1.2 下载完成后，双击默认安装，安装程序会自动添加环境变量。

1.3 检查nodejs是否安装成功。
打开cmd命令行，输入node -v 显示当前版本号

1.4 检查npm是否安装。
由于新版的NodeJS已经集成了npm，所以之前npm也一并安装好了。同样可以使用cmd命令行中键入npm -v

1.5 设置npm代理。（一般建议直接设置为国内的registry，参考第7 Nmp的安装错误）
npm config set strict-ssl false关闭npm的https
npm config set registry “http://registry.npmjs.org/” 设置npm的获取地址
npm config set proxy http://l00266782:密码@proxycn2.huawei.com:8080 设置代理

检查：
npm config ls

1.6 npm常用命令。
npm install 安装nodejs的依赖包
npm install -g 将包安装到全局环境中
npm install -save 安装的同时，将信息写入package.json中
npm ini 会引导你创建一个package.json文件，包括名称、版本、作者这些信息等
npm remove 移除
npm update 更新
npm ls 列出当前安装了的所有包 (-g 列出全局的包 -gl 全局的包的详细信息)
npm root 查看当前包的安装路径
npm root -g 查看全局的包的安装路径
npm help 帮助，如果要单独查看install命令的帮助，可以使用npm help install
更多参考http://www.npmjs.org/doc/
2 搭建编译工具
2.1 使用Git下载nui-tools (git@code.huawei.com:febs/nui-tools.git)相关代码

2.2 使用NPM命令启动febs项目
进入目录D:\workspace\febs\nui-tools
安装nui-tools全局模块 npm install -g
将nui-tools链接到全局模式下 npm link

检查：
npm ls –g查看是否报错
2.3 配置nui-tools.config.js
路径：建议在模块工程根路径。如：

内容：
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:对应PIU
proxyModules：依赖的PIU.icto-base内含：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
路径：建议在模块工程根路径。如：

内容：
{
“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”: “lihongfeng”,
“email”: "lihongfeng@huawei.com"
},
“license”: “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”, 版本，规范参见：http://code.huawei.com/febs/docs/blob/master/src/zh-cn/项目版本号规范.md
“main”: “./com.huawei.icto.commonsvc.portal.ui/src/main/webapp/frame/home/homeEntry.js”,主类，对我们无意义。

4 切换内容

4.1 菜单加载
JSON格式：http://code.huawei.com/febs/docs/blob/master/src/zh-cn/接口文档/FEBS服务端基于CloudSOP的文件接口.md
注：目前平台未完成相关接口，使用REST注册进行联调。各业务填写JSON，由平台预置进去。
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”,
“locales” : {
“zh-cn” : {
“title” : “监控”,
“isearch” : “jiankong”
}
}
}

4.2 HTML切换

// 会话服务 // febs加载 // 页头加载

Body中增加如下内容，用于业务显示。

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名称。规范：icto-模块-名称
‘1.0.0’:版本号
[’$dom’]：依赖的状态
return require(’./home’)(piu, st);：PIU承载实体，’./home’相对路径

home.js

逻辑路径改造为相对路径：

seaJS写法改造：

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

// 绑定控制类
angular.module(‘a’, [‘eviewWidgets’]).controller(‘testBt’, ['scope′,function(scope', function (scope′,function(scope) {
console.log(‘success’);
}]);
// DOMLoad加载变为，运行期加载
angular.bootstrap(document.getElementById(‘test_button’), [‘a’]);

PIU设置状态：
piu.setup({“icto-portal-test”: “”})
piu.set(“icto-portal-test”, elem);

PIU监听状态：
piu.attach(piu, {
“stateChange”: {
“icto-portal-test”: function (aaa) {
console.log(“test”);
console.log(aaa);
}
}
});

PIU注册依赖关系：
URL: /i/febs/v1/assets
JSON:
{
// PIU名称@版本号
“icto-base@1.0.0”: {
“config”: {
// 基础路径
“base”: “https://10.67.252.68:31943/ServicePortal”
},
“assets”: [
// 和base路径拼装为成js完成访问路径
// 前缀为css时，为加载css
// 此部分内容会记在到HTML的

[规避]this指针引用冲突规避方案：
angular.bootstrap(document.getElementById(‘test_button’), [‘a’]);
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属于静态编译，原使用动态加载JS集成方式，使用PIU的设置状态、监听和依赖解决。

5 求助

Nui-tools工具的编译流程

6 遗留问题

Febs切换后检查。Angular和jQuery遗留问题的全局污染。
原Portal的依赖。
a) Messager提示。 --Cloud Portal
b) Framelet编译。 --Cloud Portal
c) CSS依赖。 --Cloud Portal
d) I18n依赖。
e) 菜单注册。
i. JSON问题形式提供加载形式。–Cloud SOP/Febs
ii. REST接口何时注销，如何注销？ --Febs
iii. 一级菜单的URL在Febs无法提供和达成一致。 --Febs
AUTOLOAD注册机制。多实例的情况下，无法感知服务上线和下线。 – Cloud SOP。

7 Npm的安装错误
1.1 项目拷到本地，然后cd进入项目目录，npm install安装，报错了（①卡住不动 ②unexpected end of file ③ cb() never called等），可以尝试以下方法：

首先确定自己使用的包的下载源是公司内的（可以通过npm config list查看自己包的下载源，如果是默认官方的话，建议改成公司内的，方法：npm config set registry http://szxy1.artifactory.cd-cloud-artifact.tools.huawei.com/artifactory/api/npm/sz-npm-public），不存在因为网络导致依赖包下载缓慢的安装失败问题，如果遇到安装一半卡住不动的小伙伴可以尝试一下这种方法。
然后，使用npm cache clean --force清除缓存，并将安装失败的项目中的node_modules文件夹删除，重新npm install。
再次，可能由于node版本或npm版本太老导致，那就升级版本。查看node和npm版本的命令分别为node -v、npm -v。
一点要提到的是，如果更新node版本的话，那么连带npm版本也会一同更新了，所以如果你只是想更新npm版本，那么只需运行npm install npm -g就可以单独更新npm版本，而不需要更新node版本，这里注意npm要全局安装。如果要更新node版本的话，发现网上的很多方法有问题，linux平台的话可以尝试一下这种更新方式（首先清除cache，npm cache clean --force，然后安装n模块，该模块专门用来管理nodejs的版本，命令为npm install -g n，然后直接输入n stable更新到最新版本，若要更新到指定版本的话，那么就n 对应版本号，例如n 8.11.3即更新到8.11.3的版本），但是windows平台不支持n，网上说的换成nvm的方式试过了也没用。
然后本人采用的更新方式如下（覆盖安装）：
① 在官网（https://nodejs.org/zh-cn/）上下载对应要更新版本的安装包；
② 使用命令行where node查看原来版本的node安装地址，然后再安装新版本时，将node安装到老版本所在的目录下即可。
③ 然后再尝试以上的解决办法。本来以为重新安装了node会导致之前安装的全局包这些丢失，结果覆盖安装后发现原来安装的全局包还都在，小惊喜~不用再重新下载那些包了。
网上也有提到一种方法：使用npm cache clean --force清除缓存，然后将安装失败的项目中的node_modules文件夹以及package-lock.json文件删除（package-lock.json是在npm install安装时生成的一份文件，用以记录当前状态下实际安装的各个npm package的具体来源和版本号，如果没有这个文件的话，那么npm install将下载大版本下的最新的包，具体可参考：https://www.cnblogs.com/cangqinglang/p/8336754.html），然后再npm install。

WEB端工程环境安装相关推荐

好嗨哟之 Mac OS 搭建 Eclipse + Tomcat + Maven Web 端开发环境。。。
LZ-Says:是过往云烟,还是回眸一笑,自在人心. 前言从上周三临近下班时,接收到接下来要开发接口. 回归 Java 莫名的兴奋,多少还是有点不舍,不过多掌握几门,还是比较不错的. 至少相比曾经的 ...
web端实现rtsp实时推流视频播放可行性方案分析
1.webrtc 1.1 什么是WebRTC 百度概念:WebRTC (Web Real-Time Communications) 是一项实时通讯技术,它允许网络应用或者站点,在不借助中间媒介的情况下 ...
web端启动本地exe客户端
1. 背景项目中常用浏览器有Chrome和IE,对于web端启动本地exe客户端.早期,Chrome和IE都提供了ActiveXObject对象,以它的exec接口,只需传入本地exe客户端所在安装 ...
多种方式实现web端截屏录屏
本文通过使用webrtc.dom监听.使用插件三种方式实现截屏,使用webrtc.dom监听来实现录屏使用webrtc实现截屏录屏 ①实现录屏 // 音频或视频流 let mediaStreamTr ...
windows下安装及配置 golang 的Web框架Beego环境
1.首先需要安装配置 go and git,参考如下链接 https://www.cnblogs.com/zjwgo/p/9356280.html 2.安装配置 beego 前提: 安装并配置成功go ...
在centos服务器上安装配置私人邮箱，并在web端管理邮件
我的个人博客:逐步前行STEP 出于技术上的好(zhuang)奇(bi),我想搭建一个自己的邮箱服务器,这样的话,以后的个人资料上面可以带上一个自己域名的邮箱,再也不怕简历带qq邮箱被嫌弃了. 首先是 ...
Django环境安装和创建工程
环境安装 1. 创建虚拟环境 mkvirtualenv dj_python -p python3 注意需要联网,虚拟环境名为dj_python,其中- p指定python版本为python3 # 虚拟 ...
WEB 端批量移动设备管理控制工具 STF 的环境搭建和运行
最近项目涉及到较多设备批量管理的需求,发现一工具,可以批量对大量设备进行WEB端管理,工具主页:https://openstf.github.io/ 工具名STF(Smartphone Test Fa ...
环境搭建(windows): 1.rabbitmq安装 2.web GUI管理插件安装 3.erlang版本和rabbitmq版本之间对应关系
1)环境搭建参考: https://www.cnblogs.com/wuzhiyuan/p/6845230.html 一:安装RabbitMQ需要先安装Erlang语言开发包,百度网盘地 ...
windows环境下MySQL服务端和客户端安装，超详细
windows环境下MySQL服务端和客户端安装,超详细 MySQL简介 MySQL的安装步骤服务端安装客户端安装 MySQL简介 MySQL是关系型数据库,由n张互相关联的表组成.一般是c或c+ ...

WEB端工程环境安装

WEB端工程环境安装相关推荐

最新文章

热门文章