node中npm結構詳解以及自定義npm包上傳到npm教程

ITzhongzi發表於2017-04-07
NPM

1. package.json

作用:
    1.每個Node專案中及第三方包中都必須的
    2.它描述著Node專案或是第三方包的一些資訊
    3.透過這些資訊可以知道該Node專案或是第三方包執行起來要依賴於哪些第
    三方包
    4.還可以在裡面寫一些終端執行指令碼,在package.json的scripts中進行定義

使用步驟:
    1.開啟終端cmd或是powershell
    2.切換到該Node專案的根目錄下面去
    3.執行 npm init -y 或是 npm init 生成package.json
    4.在開發過程中安裝第三方包的時候這樣寫 npm install --save 或是 
    npm install --save-dev

注意:
    1.使用 npm init -y 的時候一定要注意,專案名稱不能是中文,否則報錯
    2.npm init 生成package.json的時候,按照要求一步一步來
    3.如果是開發階段需要的第三方包,使用 npm install --save-dev
    4.如果是執行階段需要的第三方包,使用 npm install --save

package.json一些重要屬性說明:
    name : 專案或是第三方包的名稱,也是其它專案匯入時require()中的名稱
    description : 這個專案或是第三方包功能的描述
    main : 專案或是第三方包的入口檔案
    license : 授權方式,一般寫MIT
    keywords : 釋出到npmjs中之後,其它開發者搜尋我們這個第三方包的關鍵
    字
    scripts : 以後在終端執行的指令碼
    devDependencies : 開發階段依賴的包
    dependencies : 執行階段依賴的包
    author : 作者
    version : 版本號

2. npm的介紹

npm是用來管理nodejs第三方包的一個工具,利用它可以
    1.安裝 本地包/全域性包 
    2.將自己寫的包釋出到npmjs上面去,供全世界的開發者使用

npm在安裝好node之後,就會自動安裝到node的安裝目錄中,一般是安裝在node根目錄的node_modules的子資料夾下,比如我的npm就安裝在 C:\Program Files\nodejs\node_modules

如何測試npm是否安裝成功,在終端中輸入 npm -v 如果能出現版本號就表示安裝成功

3. npm操作之從npmjs.com中安裝/下載包

安裝包/下載包分兩種

    本地安裝:用在當前專案中
        命令:npm install 本地包的名稱

    全域性安裝:以後在終端中使用
        命令:npm install -g 全域性包的名稱

        其它命令:
        1.檢視全域性包安裝路徑:npm root -g

        2.更改全部安裝包安裝路徑:npm config set fix "全域性包的路徑"
            當我們用 `npm install - g 全域性包的名稱` 這個指令的時候,有的時候全域性包可能會安裝在 C:\Users\你的電腦名稱\AppData\Roaming\npm\node_modules下面,這個時候如果你要更改全域性包的安裝路徑,可以使用

4. 釋出自己的框架到npm上面去【瞭解】

步驟:
    1.先建立一個以包命令的資料夾("注意：該包名必須是npmjs上面沒有的,否則後面上傳不上去哈")

    2.寫好你自己要釋出的包裡面的程式碼(書寫規範建議)
        2.1 個人建議將那些零散的程式碼放在一個 lib 資料夾下
        2.2 在包的更目錄下建立一個 index.js 入口js檔案
        2.3 包名稱必須小寫,這個是npmjs.com的規定

    3.在包的根目錄下設定好 package.json 裡面的內容
        建立package.json有兩種方式
            方式1：npm init -y (會生成好package.json,並且會在package.json中生成些預設的鍵值對)

            方式2：npm init (也會生成package.json,但是會提示你生成哪些需要的鍵值對,一般要生成的鍵值對有:name、version、main、description、keyword等等)

    4.可以在包的根目錄下建立一個README.md寫上你這個框架的介紹,以及如何使用

    5.開始上傳

        注意事項:在要釋出包的資料夾下，執行相關指令（開啟皮膚的執行路徑是和package.json在同一級就行）

        步驟:
            5.1 先登入到npmjs網站上面去: npm adduser
                會提示你輸入在npmjs網站上面的使用者名稱和密碼的,在這個過程中當你輸入了正確的使用者名稱和密碼之後,還可能提示你的使用者名稱和密碼錯誤,這個時候就需要檢視下當前的映象是否是淘寶

            5.2 登入成功之後,這個時候使用 npm publish 釋出到npmjs.com上面去

    6.撤銷(可選)
        步驟:
            6.1 先登入

            6.2 撤銷 npm unpublish 包名稱@版本號

    注意:
        1.登入之前要看下我們的映象是否是npmjs.com
        2.如果改了原始碼,要再發布,得更改下版本號,版本號只能遞增

5. require()載入規則

基本概念:
    1.核心模組、自定義模組(自己寫的模組)、第三方包都優先從快取載入
    2.在windows中載入一個自定義模組(自己寫的模組)要使用 ./ 或者 ../ 開頭

自定義模組(自己寫的模組)載入規則:
    一個自定義模組可以不寫副檔名， require()會自動依次按照 .js .node .json的順序進行補齊後載入，如果三個副檔名都沒有，則當做核心模組或者包載入，如果核心模組或者包都沒有，則報錯

    開發建議:自定義模組最好寫副檔名,提高查詢效率

require載入第三方包的規則：
    依次按照module.paths 陣列中的路徑，根據傳入require的識別符號名稱進行查詢，如果都沒有查詢到識別符號名稱的包，則報錯

    找到node_modules之後再載入具體第三方包(以xtpl為例)規則:
        1.如果包下有package.json 檔案，並且其中的main 屬性配置的檔案能夠找到，則載入此檔案
        2.如果package.json檔案沒有，或者它裡面main屬性配置的檔名不能找到，則預設載入當前資料夾下的index.js
        3.如果都沒有找到則報錯            

總結:require()載入node_modules的時候是按照module.paths 陣列中的路徑一個個查詢，直到找到為止

6. HTTP模組處理靜態資源

前提:
    以後所有的靜態資源(html,css,js,圖片)以及NodeJS寫的程式碼都是放在
    伺服器端的

如何訪問呢?
    當瀏覽器傳送請求,請求某個網頁之後,會將這個請求傳送到後臺伺服器
    node.exe,然後根據路由規則交給對應的js去處理,在js裡面就去將靜態資源
    讀取到記憶體,經過一番處理之後返回給瀏覽器去展示

    如果返回的網頁中,還需要進一步請求,比如網頁中要用到某個.css檔案,這個
    時候同樣會傳送網路請求給伺服器node.exe,伺服器同樣還是按照上面的步驟進行處理,先讀取到REPL環境中來,然後經過處理之後返回給瀏覽器

注意點:
    瀏覽器可能訪問的伺服器資源是不一樣的,比如瀏覽器可能需要html,可能需
    要css,也可能需要圖片,所以伺服器返回資源的時候一定要告訴瀏覽器
    我給你返回的到底是啥,這個時候就一定要在響應頭中增加一個鍵值對
    key就是Content-Type,值則根據你給瀏覽器返回的是啥,你就寫啥

7. http模組實現動態網頁

# 不使用模版
    1.去讀取模版的內容
    2.利用資料生成新的元素
    3.利用新的元素替換模版中的佔位符

    缺點：程式碼太多
         容易出錯


# 使用模版
    成套的模版，既包含前端也包含nodejs

    https://github.com/xtemplate/xtemplate/blob/master/docs/syntax-cn.md 網頁使用的

    https://github.com/xtemplate/xtpl NodeJS使用的

    注意:
        這個模版要配合起來使用，除了寫html裡面的模版，還要寫nodejs中的程式碼
        其它不懂的看文件

相關文章