web前端開發基礎

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

1.      安裝nodejs

安裝完成後，進入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

(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，如圖上傳成功。

（3）      安裝元件npm install 元件名–save-dev。如圖成功引入元件。

sinopia私服搭建及安全性配置

伺服器安裝sinopia

(1)    安裝sinopia

npm install –gsinopia

(2)    啟動sinopia（預設埠為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