Web前端开发环境搭建以及公司私服搭建

web前端开发基础

参考网址：http://www.w2bc.com/Article/50764

                    http://www.cnblogs.com/samwu/p/5003809.html

1.      安装nodejs

下载地址：https://nodejs.org/en/

安装完成后，进入dos环境输入node –v 显示版本号，即安装成功。

2.      创建web项目

（1）      切换盘如（D:），按回车键切换。

（2）      切换到指定盘后，通过cd指令到指定目录下。如：

注：输入目录时，可通过tab键自动补全。

3.      初始化项目开发环境

（1）输入指令npm  init 回车后，会让你输入基本信息。

“name”：模块名称，该参数认真填写。该参数名，将做为发布组件和安装组件的唯一标识。

“version”：版本号，该参数认真填写。相同模块每发布一版，需要修改版本号。否则会出错。

“main”：打包的入口文件。require引入模块时，会指到这个文件。

其它参数暂无特殊要求，完成后，会生成package.json文件。

4.      安装webpack

输入指令npminstall -g webpack --save-dev

5.      安装依赖的包

npm install jsx-loader --save-dev

npm install babel-loader --save-dev

npm install babel-core --save-dev

npm install react-dom --save-dev

npm install react --save-dev

npm install less-loader --save-dev

npm install less --save-dev

npm install css-loader -save-dev

npm install style-loader --save-dev

npm install -g webpack --save-dev

6.      webpack打包

组件开发完成后，对项目进行打包，并上传web前端私服

webpack：普通打包指令

webpack--display-error-details：打包并输出详细错误信息

webpack--config XXX.js ：使用另一份配置文件（比如webpack.config2.js）来打包

webpack--watch ：监听变动并自动打包

webpack-p   ：/压缩混淆脚本，这个非常非常重要！

webpack-d   ：生成map映射文件，告知哪些模块被最终打包到哪里了

公司私服前端组件上传配置

1.      安装registry管理工具nrm

(1)    npm install –g nrm

(2)    nrm add mynpm http://172.16.86.144:4873

添加公司私服代理。http://172.16.86.144:4873为公司web前端私服地址。

(3)    nrm use mynpm 

use指令指定当前nrm 使用哪一个代理。使用use指令使各个代理进行切换

(4)    nrm ls

列出所有的本地registry

(5)    nrm use npm

nrm切换到npm代理

注：nrm只作为registry管理工具，指定正常使用npm。

2.      上传组件

（1）      登录私服npm login 输入用户名、密码。如图登录成功。

（2）      上传组件 npm publish，如图上传成功。

在浏览器中输入http://172.16.86.144:4873 会显示上传的组件

（3）      安装组件npm install 组件名–save-dev。如图成功引入组件。

 

sinopia私服搭建及安全性配置

服务器安装sinopia

(1)    安装sinopia

npm install –gsinopia

(2)    启动sinopia（默认端口为4873）

sinopia：只能通过http://localhost:4873访问。

sinopia -l ip:端口 ：对外提供访问地址。如公司为sinopia-lhttp://172.16.86.144:4873

(3)    添加用户

npm adduser

安全性配置

(1)    修改安装目录下config.yaml文件

Ø   修改仓库保存的路径：storage: E:/web_components/storage

Ø   这里我们将最大用户数(如：max_users: -1)设置为－1，表示禁用 npm adduser 命令来创建用户，不过我们仍然可以通过当前目录下的 htpasswd 文件来初始化用户

参考内容：http://www.wtoutiao.com/p/1f0pl01.html