npm_npmscript_webpack_node應用

1.如何全局安裝一個 node 應用?

每個模塊可以“全局安裝”,也可以“本地安裝”。
“全局安裝”指的是將一個模塊安裝到系統目錄中,各個項目都可以調用。一般來說,全局安裝只適用于工具模塊,比如eslint和gulp。例如:/user/local/bin/目錄下。
“本地安裝”指的是將一個模塊下載到當前項目的node_modules子目錄,然后只有在項目目錄之中,才能調用這個模塊。例如:./node-modules/

本地安裝
npm install <package name>
卸載:npm uninstall -g XXX

全局安裝
npm install -g <package name

2.package.json 有什么作用?

npm init命令生成package.json文件,這個文件定義了項目所需的各種模板及相關配置信息(比如名稱、版本、許可證等元數據)。npm install命令根據這個配置文件,自動下載所需的模塊,也就是配置項目所需的運行和開發環境。

{
  "name": "cover_md",  //項目名稱
  "version": "1.0.6",  //項目版本號
  "description": "一個 markdown 轉 html 的小工具",  //入口文件
  "main": "index.js",  //指定了加載的入口文件,require('moduleName')就會加載這個文件。這個字段的默認值是模塊根目錄下面的index.js
  "bin": { 
// bin參數是{ 命令名:文件名 }的格式,指定了各個內部命令對應的可執行文件的位置,相當于在user/local/bin下創建一個快捷方式,映射到對應的文件,執行所映射的文件
// 執行`convert`命令時,將運行對應文件(./bin/server)
// ./bin/convert文件頭部需添加 #!/usr/bin/env node, 表示將以node運行這個文件

    "convert": "./bin/convert"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1" 
    "start" : "node app.js" //執行當前目錄下app.js
      //一般默認一個test的空文件夾、用作寫測試代碼,`npm test`即可運行。
      //自定義的命令名需加run才能與運行,`npm run make`
  },
  "keywords": [  //關鍵字,是一個字符串的數組,也有助于人們在npm搜索你的包
    "markdown",
    "html",
    "convert"
  ],
  "author": "wcon",  //作者名稱
  "license": "ISC", //協議
  "repository": {
    "type": "git",   //該包在github上的代碼托管倉庫地址
    "url": "git+https://github.com/wcongratulation/markdow.git"
  },
  "dependencies": {   // 正式使用時依賴的包, npm install --save xxx 生成
        "my_dep": "^1.0.0"
    },
  "devDependencies" : {  //開發或者測試時,依賴的包。npm install --save-dev xxx生成
        "my_test_framework": "^3.1.0"
    }
  "bugs": {
    "url": "https://github.com/wcongratulation/markdow/issues" //一個對象,包含url網址和郵箱,當使用者發現問題時,可以通過這兩種方式提交問題
  },
  "homepage": "https://github.com/wcongratulation/markdow#readme"  //主頁,項目主頁的地址
}

3.npm install --save app 與 npm install --save-dev app有什么區別?

如果將node_modules文件夾刪掉,則執行npm install默認會安裝dependencies字段和devDependencies字段中的所有模塊。

這兩條命令都會下載app到node_modules文件夾下面,不同之處在于:
npm install --save app:模塊名app將被添加到package.json下的dependencies。
npm install --save-dev app:模塊名app將被添加到package.json下的devDependencies。

此外:dependencies下的模塊,是我們生產環境中需要的依賴,devDependencies只用于開發階段完成集成測試等功能模塊依賴。因此,執行npm install server-mock時,只會下載它依賴層級dependencies下的模塊,而不會下載devDependencies的模塊,需要手動下載。

4.node_modules的查找路徑是怎樣的?

1.如果require的內容以./或者../開頭的按照正常的查找路徑。
2.require內容不加./或者../查找的js文件。比如需要查找的依賴包叫“easytpl”,它會先在當前目錄下查找node_module, 看有沒有easytpl文件夾(即easytpl包),如果有的話,會讀取easytpl文件夾下的package.json,找到里面的main參數,加載main里對應的路徑的文件。如果當前目錄下沒有node_module,或當前目錄下的node_module沒找到easytpl,便向上級目錄中查詢,直到系統根目錄。
3.node全局安裝在系統根目錄下,所以全局安裝后可在所有目錄下使用。

 如果當前文件是'/home/ry/projects/foo.js' 然后require('bar.js'), 那么node將會按照以下路徑查找
/home/ry/projects/node_modules/bar.js
/home/ry/node_modules/bar.js
/home/node_modules/bar.js
/node_modules/bar.js

nodejs路徑repuire的路徑規則

5.npm3與 npm2相比有什么改進?yarn和 npm 相比有什么優勢? (選做題目)

npm2和npm3有一個很大的區別, 就是組織包的結構. npm2組織依賴的包是按照樹形組織的. npm3將其改進為扁平結構。
npm2會將所依賴的包存放到當前目錄的./node_modules/目錄下. 而被安裝的包又會依賴其他的包的話, 則會存放到該包的./node_modules下. 所以, 當依賴結構很復雜的時候, 目錄結構會非常深. 不管是性能還是操作上, 體驗都不怎么好。
而在npm3中, 采用扁平的目錄結構, 二級依賴會放到當前目錄的node_modules的里, 與一級包在同一目錄。
例如:
比如,有一個模塊A,依賴 B。npm3會將模塊B放置到與A同級目錄下,而npm2會將B放置到A的依賴模塊目錄下

Paste_Image.png

npm2,一個 App 里模塊 A 和 C 都依賴B,無論被依賴的 B 是否是同一個版本,都會生成對應結構。
npm3,npm install 時會按照 package.json 里依賴的順序依次解析,遇到新的包就把它放在第一級目錄,后面如果遇到一級目錄已經存在的包,會先判斷版本,如果版本一樣則忽略,否則會按照 npm2 的方式依次掛在依賴包目錄下


Paste_Image.png

npm3也存在開發環境和測試環境的 node_modules 目錄結構不一樣以及其他的問題,因此FaceBook搞了 yarn 用來替代 npm

  • 快速—會緩存已經下載過的包,避免重復下載
  • 安全 — 下載前會檢查簽名及包的完整性

yarn 構建步驟如下:

  • Resolution: 向倉庫請求依賴關系
  • Fetching: 看看本地緩存了沒有,否則把包拉到緩存里
  • Linking: 直接全部從緩存里構建好目錄樹放到 node_modules 里
    參考 npm2 npm3 yarn 的故事

6.webpack是什么?和其他同類型工具比有什么優勢?

WebPack是一個模塊化加載器兼打包工具,它同時支持AMD、CMD等加載規范。
它能夠打包WebHTML、js、CSS以及各種靜態文件(圖片、字體等)。
對于不同類型的資源,webpack有對應的模塊加載器。
webpack模塊打包器會分析模塊間的依賴關系,最后 生成了優化且合并后的靜態資源。
優勢:
1.代碼分割:按需加載模塊
2.Loaders:通過加載器我們可以將其他類型的資源轉換為JS輸出
3.webpack提供了強大的插件系統,當webpack內置的功能不能滿足我們的構建需求時,我們可以通過使用插件來提高工作效率。因為它可以加載幾乎所有的第三方庫

7.npm scripts 是什么?如何使用?

npm script 是 package.json 中的一個屬性
可以在這個屬性中自定義 npm 命令,輸入這個命令就會執行指定的操作
如:

// 在 package.json 中
{
  ...
  'script': {
    'create': 'mkdir app'
  }
  ...
}

// 在命令行中輸入:
$ npm run create
// 就會運行指令 mkdir app, 表示創建一個文件app

使用 webpack 替換 入門-任務15中模塊化使用的 requriejs

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容