[toc]
>[success] # npm
1. npm 全稱'**node package managemen**t',是**nodejs內置的軟件包管理器**。雖然它起初是作為**下載和管理 Node.js 包依賴的方式**,但其現在也已成為前端 JavaScript 中使用的工具。
>[danger] ##### 為什么會出現包管理工具
1. 很多語言都有這種**包管理工具**,**Python的pip,Java的Maven一樣的作用**,包管理,最初的時候Node.js 是一個在德國工作的美國程序員 Ryan Dahl 寫的。他寫了 Node.js,但是 Node.js 缺少一個包管理器,于是他和 npm 的作者(Isaaz)一拍即合、抱團取暖,**最終 Node.js 內置了 npm**
>[danger] ##### npm 能做什么
1. 允許用戶從 npm 服務器**下載別人編寫的第三方包到本地使用**。
2. 允許用戶從 npm 服務器**下載并安裝別人編寫的命令行程序到本地使用**。
3. 允許用戶將自己**編寫的包或命令行程序上傳到 npm 服務器供別人使用**。
* npm 的背后,**是基于 couchdb 的一個數據庫**,詳細記錄了每個包的信息,包括**作者、版本、依賴、授權信息等**。它的一個很重要的作用就是:將開發者從繁瑣的包管理工作(版本、依賴等)中解放出來,更加專注于功能的開發。
>[danger] ##### npm 構成
1. npm 由**三個獨立的部分組成**:
1.1. '**網站**' -- https://www.npmjs.com/, 使用該網站發現軟件包,設置配置文件以及管理npm體驗的其他方面。例如,可以設置組織(組織)來管理對公共或私有軟件包的問。
1.2. '**注冊表**'(registry)-- https://www.npmjs.com/signup, 該注冊表是JavaScript軟件及其周圍的元信息的大型公共數據庫(注冊賬號后在npm網站自行發布npm包)
1.3. '**命令行工具**' (CLI) -- 開發者運行npm命令的工具,可以理解成通過命令行或終端運行。開發者通過 CLI 與 npm 打交道。
>[danger] ##### npm-cli
~~~
1.三個構成部分中對npm-cli 是日常開發中接觸最多,例如'npm install'、'npm ls'等,
那是如何執行這部分指令的呢?
1.1.首先需要找到'node' 的安裝位置,windows 可以在cmd 輸入'where node',找的效果如圖'node 目錄'
1.2.在'node' 目錄下如果你是windows用戶可以 查看'npm.cmd' 文件,里面內容如圖'腳本代碼' ,通過這段
腳本可以發現當在控制臺輸入'npm'的時候實際執行的命令為 'node \node_modules\npm\bin\npm-cli.js'
1.3.找到' \node_modules\npm\bin\npm-cli.js' 文件后如圖'npm-cli.js'
打開'npm/bin/npm-cli.js'主要看下圖這段代碼,發現一段'npm.commands'變量調用,可以發現這個變量定義
其中'npm' 這個變量是通過 "var npm = require('../lib/npm.js')" 引入的 找到 '/lib/npm.js' 文件找到變量'commands'
這個指令集合往上推大概在'node_modules\npm\lib' 文件下找到對應指令的js 文件,就可以發現如圖'對應指令'
總結:'所以到目前為止,我們可以知道當在命令行輸入npm時,其實是在node環境中,執行了一段npm-cli.js代碼',
我們輸入類似'npm ci' 這種指令的時候在'npm-cli.js' 執行了一個變量'npm.commands'的調用
~~~
* node 目錄

* 腳本代碼

* npm-cli.js

* 對應指令

>[danger] ##### 安裝
~~~
1.npm 不需要單獨安裝。在安裝 Node 的時候,會連帶一起安裝 npm
~~~
* 或者 npm install npm -g
~~~
1. 為什么可以自己安裝自己? npm 本身與 Node 的其他模塊沒有區別,他也僅僅是一個
一個在node環境運行的js
~~~
>[danger] ##### 更新
~~~
1.npm install npm@latest -g -- 這將安裝最新的官方測試版 npm。
2.npm install npm@next -g -- 要安裝將來發布的版本
~~~
>[info] ## 參考文章
[npm基本用法及原理(10000+) - 漫漫字節|漫漫編程 (mmbyte.com)](https://www.mmbyte.com/article/185966.html)
[Vue筆記——npm詳細教程 - 簡書 (jianshu.com)](https://www.jianshu.com/p/dee4a84e5961)
- 工程化 -- Node
- vscode -- 插件
- vscode -- 代碼片段
- 前端學會調試
- 谷歌瀏覽器調試技巧
- 權限驗證
- 包管理工具 -- npm
- 常見的 npm ci 指令
- npm -- npm install安裝包
- npm -- package.json
- npm -- 查看包版本信息
- npm - package-lock.json
- npm -- node_modules 層級
- npm -- 依賴包規則
- npm -- install 安裝流程
- npx
- npm -- 發布自己的包
- 包管理工具 -- pnpm
- 模擬數據 -- Mock
- 頁面渲染
- 渲染分析
- core.js && babel
- core.js -- 到底是什么
- 編譯器那些術語
- 詞法解析 -- tokenize
- 語法解析 -- ast
- 遍歷節點 -- traverser
- 轉換階段、生成階段略
- babel
- babel -- 初步上手之了解
- babel -- 初步上手之各種配置(preset-env)
- babel -- 初步上手之各種配置@babel/helpers
- babel -- 初步上手之各種配置@babel/runtime
- babel -- 初步上手之各種配置@babel/plugin-transform-runtime
- babel -- 初步上手之各種配置(babel-polyfills )(未來)
- babel -- 初步上手之各種配置 polyfill-service
- babel -- 初步上手之各種配置(@babel/polyfill )(過去式)
- babel -- 總結
- 各種工具
- 前端 -- 工程化
- 了解 -- Yeoman
- 使用 -- Yeoman
- 了解 -- Plop
- node cli -- 開發自己的腳手架工具
- 自動化構建工具
- Gulp
- 模塊化打包工具為什么出現
- 模塊化打包工具(新) -- webpack
- 簡單使用 -- webpack
- 了解配置 -- webpack.config.js
- webpack -- loader 淺解
- loader -- 配置css模塊解析
- loader -- 圖片和字體(4.x)
- loader -- 圖片和字體(5.x)
- loader -- 圖片優化loader
- loader -- 配置解析js/ts
- webpack -- plugins 淺解
- eslit
- plugins -- CleanWebpackPlugin(4.x)
- plugins -- CleanWebpackPlugin(5.x)
- plugin -- HtmlWebpackPlugin
- plugin -- DefinePlugin 注入全局成員
- webapck -- 模塊解析配置
- webpack -- 文件指紋了解
- webpack -- 開發環境運行構建
- webpack -- 項目環境劃分
- 模塊化打包工具 -- webpack
- webpack -- 打包文件是個啥
- webpack -- 基礎配置項用法
- webpack4.x系列學習
- webpack -- 常見loader加載器
- webpack -- 移動端px轉rem處理
- 開發一個自己loader
- webpack -- plugin插件
- webpack -- 文件指紋
- webpack -- 壓縮css和html構建
- webpack -- 清里構建包
- webpack -- 復制靜態文件
- webpack -- 自定義插件
- wepack -- 關于靜態資源內聯
- webpack -- source map 對照包
- webpack -- 環境劃分構建
- webpack -- 項目構建控制臺輸出
- webpack -- 項目分析
- webpack -- 編譯提速優護體積
- 提速 -- 編譯階段
- webpack -- 項目優化
- webpack -- DefinePlugin 注入全局成員
- webpack -- 代碼分割
- webpack -- 頁面資源提取
- webpack -- import按需引入
- webpack -- 搖樹
- webpack -- 多頁面打包
- webpack -- eslint
- webpack -- srr打包后續看
- webpack -- 構建一個自己的配置后續看
- webpack -- 打包組件和基礎庫
- webpack -- 源碼
- webpack -- 啟動都做了什么
- webpack -- cli做了什么
- webpack - 5
- 模塊化打包工具 -- Rollup
- 工程化搭建代碼規范
- 規范化標準--Eslint
- eslint -- 擴展配置
- eslint -- 指令
- eslint -- vscode
- eslint -- 原理
- Prettier -- 格式化代碼工具
- EditorConfig -- 編輯器編碼風格
- 檢查提交代碼是否符合檢查配置
- 整體流程總結
- 微前端
- single-spa
- 簡單上手 -- single-spa
- 快速理解systemjs
- single-sap 不使用systemjs
- monorepo -- 工程
- Vue -- 響應式了解
- Vue2.x -- 源碼分析
- 發布訂閱和觀察者模式
- 簡單 -- 了解響應式模型(一)
- 簡單 -- 了解響應式模型(二)
- 簡單 --了解虛擬DOM(一)
- 簡單 --了解虛擬DOM(二)
- 簡單 --了解diff算法
- 簡單 --了解nextick
- Snabbdom -- 理解虛擬dom和diff算法
- Snabbdom -- h函數
- Snabbdom - Vnode 函數
- Snabbdom -- init 函數
- Snabbdom -- patch 函數
- 手寫 -- 虛擬dom渲染
- Vue -- minVue
- vue3.x -- 源碼分析
- 分析 -- reactivity
- 好文
- grpc -- 瀏覽器使用gRPC
- grcp-web -- 案例
- 待續