[TOC]
>[info] ## npm install
~~~
總結幾種安裝包的方式,總結之前先知道
1.'@scope' -- scope中文意思是范圍,正常我們安裝的npm包都是有一個名稱然后幫助我們安裝我們需要的包,
隨著包越來越多起名出現重復的概率也會變高,解決提供一個'@scope' 這種標識符,每個 npm 用戶/組織都有
自己的范圍,只有您可以在您的范圍內添加包。這意味著您不必擔心有人在您之前使用您的包裹名稱。因此,
這也是向組織發出官方軟件包信號的好方法。舉個例子'npm i @vue/cli-service'
2.'@<tag>' -- 在大多數情況下,在大多數情況我們默認安裝的包tag 版本一般為'latest',也就是默認值'latest'.,
用戶安裝的時候如果也指定這個tag,則會安裝這個tag下的最新版,一般常見tag三種
2.1.latest:最新版本,npm install的就是這個
2.2.beta:測試版本,一般內測使用,需要指定版本號install,例如3.1.0-beta.0
2.3.next: 先行版本,npm install foo@next安裝,例如3.0.2-alpha.0
查看某個包的tag 版本'npm dist-tag ls [ < pkg > ] ' 如下圖webpack 為例
3.'@<version>' -- 安裝指定版本的包。如果版本尚未發布到注冊表,這將失敗,當然版本也是可以指定一個范圍的
'@<version range>',大多數版本范圍必須放在引號中舉個例子'npm install pack@">=0.1.0 <0.2.0"',
查看某個包的版本'npm view package versions' 這個會將包的所有版本都查出,'npm view package version'
這查出當前默認安裝的版本如圖以vue 為例,現在這個寫作節點還是latest版本'2.x'
4.'npm' 不僅僅能安裝在'npm' 發布的包,也可以安裝發布在倉庫上的包例如'github'
5.'npm' 還可以通過git 安裝地址經行安裝
6.'<alias>@npm' 給包在'node_modules' 的文件下起別名具體參考下面案例
總結:'npm' 是一個大型node包的倉庫安裝的時候也可以在其他倉庫去安裝
~~~
* 查看tag

* vue查看版本

>[danger] ##### 詳解install 安裝過指令
~~~js
npm install (with no args, in package dir)
npm install [<@scope>/]<name>
npm install [<@scope>/]<name>@<tag>
npm install [<@scope>/]<name>@<version>
npm install [<@scope>/]<name>@<version range>
npm install <alias>@npm:<name>
npm install <git-host>:<git-user>/<repo-name>
npm install <git repo url>
npm install <tarball file>
npm install <tarball url>
npm install <folder>
aliases: npm i, npm add
common options: [-P|--save-prod|-D|--save-dev|-O|--save-optional] [-E|--save-exact] [-B|--save-bundle] [--no-save] [--dry-run]
~~~
>[danger] ##### install -- 當前和全局安裝
~~~
1.直接'npm install',默認情況下,npm install將安裝package.json下的所有依賴
2.如果想全局安裝可以是使用'-g或--global附加到命令'
~~~
>[danger] ##### npm install package
~~~
1.舉個例子'npm install axios' 就可以安裝'axios' 像上面說的變相等于'npm install axios@latest'
~~~
>[danger] ##### [<@scope>/]<name>@< tag> -- 指定tag 安裝
~~~
1.安裝某個組織下指定的tag 包,這里以'vue/cli' 為例子
'npm install @vue/cli@next'
~~~
>[danger] ##### npm install [<@scope>/]< name>@< version range>
~~~
1.指定包的版本安裝'npm install axios@0.21.1' 或者安裝一個指定的范圍' npm install sax@">=0.1.0 <0.2.0" '
~~~
>[danger] ##### npm install <alias >@npm:< name>
~~~
1.在自定義別名下安裝包 指定別名'npm install mmzz@npm:jquery'
~~~

>[danger] ##### npm install < git remote url>
~~~
1.直接利用用戶名和倉庫名進行安裝 -- npm install easterCat/kiana-js
2.在前面加上 github 前綴 -- npm install github:easterCat/kiana-js
3.直接通過 git 上項目的地址進行安裝 -- npm install git+https://github.com/easterCat/kiana-js.git
4.以 ssh 的方式 -- npm install git+ssh://github.com/easterCat/kiana-js.git
5.npm install axios/axios 等同于npm install github:axios/axios 也就是說如果@省略符號,無論哪種情況,
npm 都會嘗試從 GitHub 安裝
~~~
* 在packjson 版本標記

>[danger] ##### 其他
~~~
1.安裝本地的模塊文件
npm install <tarball file>
Example:
npm install ./package.tgz
2.安裝指定URL的模塊
npm install <tarball url>
Example:
npm install https://github.com/indexzero/forever/tarball/v0.5.6
3.安裝本地文件系統中指定的目錄包含的模塊
npm install <folder>
~~~
>[info] ## 參考
[npm-install](https://docs.npmjs.com/cli/v7/commands/npm-install)
[npm-version](https://docs.npmjs.com/cli/v7/commands/npm-version)
[npm-dist-tag](https://docs.npmjs.com/cli/v7/commands/npm-dist-tag)
[npm之version和tag
](https://www.jianshu.com/p/91902bae5572)
- 工程化 -- 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 -- 案例
- 待續