node.js npm 操做 模塊化開發 cnpm鏡像安裝

　　模塊（包）

　　傳統引入 js 的缺點

　　　　整個網頁，咱們寫了一個 js 文件，全部的特效都在裏面

　　　　耦合度過高，代碼之間關聯性太強，不便於後期維護

　　　　變量容易 全局污染

　　若是將 複雜的 js 文件，拆成多個功能的 js 文件

　　　　缺點：

　　　　　　發生的請求過多，依賴模糊，難於維護

　　這是傳統的開發模式，都被拋棄掉了

　　因此咱們使用 模塊化的開發模式

　　爲何使用模塊化

　　　　減小代碼之間的關聯度

　　　　部署方便

　　　　更好的進行分離，按需加載，避免了命名衝突，容易維護

　　什麼是模塊化

　　　　 node 自帶的規範（模塊） commonjs 規範

　　node -v　檢測 mode 版本

　　node 是 JavaScript 的環境，在 node 裏面能夠運行 js 文件，幹服務器　　指令： node 文件名

　　commonjs 模塊，是 node 的規範運行，在服務端，不是瀏覽器端，若是使用在瀏覽器端，須要使用對該文件進行打包編譯（借鑑工具 browserify　　webpack　　gulp 等）

　　暴露的本質是對象

　　每一個 js 文件，都必須對外暴露接口

　　書寫模塊的時候，對外暴露接口，modele.exports={}　或　exports.xxx= 

　　引入模塊 require()　　參數：路徑　　路徑注意 ：若是是當前文件，前面必須加 ./  。若是隻寫了文件名，則是在node_modules文件下

　　commonjs 暴露的本質是一個角 exports 的對象

　　module.exports={} 和 exports.xxx= 的區別？

　　　　兩者暴露本質是同樣的，都是暴露一個 exports 對象　　前者會將原有的 exports 的內存地址覆蓋，後者會在原有的 exports 的基礎上進行添加

　　commonjs 是同步加載，是 node 的規範，同步加載在瀏覽器是一個大坑，只要一個環節卡住了，後面的就無法執行，因此不建議使用，若是非要使用，要須要編輯打包

　　對於 web 端，每一個 js 都是一模塊，每一個模塊都必須暴露一個接口，每一個 js 文件，有一個全局 require() 方法，用來引入模塊

　　模塊：

　　　　1.node 自帶的包（模塊）， path　　url　　fs

　　　　2.第三方模塊 weui / jquery / axios / zepto

　　　　3.自定義模塊：咱們寫的　　　　

　　配置模塊說明文件，npm iinit 就會生成一個包 package.json 的文件

　　version：版本號

　　desciption：說明

　　main：index.js 文件　　咱們主文件 index.js 文件，剩下的都是子模塊

　　在瀏覽器說 require ：is not defined

　　說明瀏覽器不支持 commonjs，須要借鑑打包工具

　　　　1.browserify 

　　npm（全稱爲：node package manager）翻譯過來爲 node 模塊包管理工具

　　node 自帶的集成環境

　　對 npm 包管理工具的增刪查改

　　下載：

　　　　npm install -g jquery --save(生產環境)    -g(表明全局下載，不然表明當前目錄)

　　刪除：

　　　　npm uninstall jquery

　　查找：

　　　　npm search jquery

　　修改：

　　　　npm update jquery  

　　對於咱們開發者來講，只須要一個下載就能夠了，刪除的話，咱們能夠直接刪除文件

　　www.npmjs.com　　包管理工具的官方網站

　　下載的存放位置

　　　　全局下載，在任何一個文件下都能使用這個包，（在計算機的任何位置使用）

　　　　局部下載，智能在當前目錄下使用

　　可是 npm 是國外的網站，因此下載會很慢，咱們能夠安裝淘寶 npm 鏡像  （稱爲：cnpm ）

　　配置：npm install -g cnpm --registry=https://registry.npm.taobao.org

　　案例：

　　　　全局安裝：jQuery（不推薦，可能不生效）

　　　　國內　　cnpm install -g jquery --save

　　　　國外　　npm install -g jquery --save

　　終止程序：ctrl+c

　　局部安裝：npm install jquery --save　　就會在目錄生成一個 node_modules 的文件夾

　　文件下：var $=require("jquery")　　

　　當前文件要加./ 　， 沒有 ./ 的話，默認在 node_modules 裏面找 

　　index.js 是這個包的輸出文件，即使刪除了package.json 只要不改變 index.js 的文件名就沒事，一旦改了就報錯，是由於包的輸出文件是 index.js

　　npm install jquery --save （這個是下載運行環境（生產環境）的包） 好比 jQuery swiper

　　npm install browserify --save-dev （這個是下載開發環境的包） 好比 npm browserify 上線不依賴他們

　　兩者的區別？

　　　　前者 --save 是上線時，會被壓縮的包，後者時 --save-dev 上線時被拋棄的包

　　dependecies：生產環境，依賴的包

　　devdependencies：開發環境，依賴的包

　　指定版本上線：

　　　　npm install jquery @3.2.1 --save (必填，生產環境)

　　刪除：npm uninstall jquery （基本上不用，直接刪除文件也能達到這樣的效果）

　　在瀏覽器 不支持 require() 方法，須要 browserify 工具

　　1. npm install -g browserify

　　2.編譯打包：

　　　　browserify 主文件>編譯文件　　（名字就能夠）　　> 兩側不能出現空格，不然就會中文就會出現亂碼

　　若是咱們擁有了 package.json 文件，可是他裏面的文件丟失？

　　　　咱們能夠用     npm i    指令在 npm 上下載回來　　只下載 node_modules 的內容

　　npm 下載的操做 細節處理（重要 ！），package.json 這樣的配置應該屬於局部（猜想。。。）

　　如 jQuery / swiper 這樣的代碼，缺乏他們 網頁便運行不了，因此須要生產環境，且須要在局部配置操做，

　　像 npm / browserify 這樣的代碼，上線後便不須要了，因此這個是在開發環境， 因此在全局配置上會好一點，