工程化項目之 npm和yarn --- LTS

----------------------2020年3月19日更新---------------

先從最基礎的版本號開始吧

版本號

{
    'dependencies': {
        'boo': '^2.3.1',     //與2.3.1版本兼容,相當於2.X.X, 即>=2.3.1 < 3.0.0,不改變大版本號。
        'asd': 'http://asdf.com/asdf.tar.gz',   //在版本上指定一個壓縮包的url,當執行npm install 時這個壓縮包會被下載並安裝到本地。
        'adf': 'git://github.com/user/project.git#commit-ish' //使用git URL加commit-ish
        }
};

根據package.json裏面的版本來看,如果配置了
"vue": "^2.5.0"表示安裝2.x.x裏面最高的版本,即使package.json裏面顯示的版本還是"^2.5.0",實際上已經使用到了最新的 2.latest.latest
"vue": "~2.5.0"表示安裝 2.5.x裏面最高的版本,就是2.5.latest
"vue": "2.5.5" 這個是recommand方式,這樣可以鎖住版本某一個版本,當然可以搭配lock文件來使用。

常用的包管理命令

安裝包
npm i packageName <options>
補充知識點
-D: --save-dev 寫入devDependencies
-S: --save 寫入dependencies
-g: --global 全局安裝 注意,一定不能使用-G
其中yarn的全局安裝方式有些許不同,使用的是global而不是-g
yarn global add packageName

常見報錯信息

報錯信息npm error sha1
解決方案:
npm cache clean --force,如果使用的是yarn的話,可以使用yarn cache clean
tips: 緩存問題

報錯信息:Failed at the [email protected] install script.
解決方案:指的是缺少一個phantom的包,所以才link不成功。注意了,在git bash裏面使用命令的時候,不一定要在npm/node_modules裏面,因爲node_modules裏面的是包鏡像,改了它也沒用,擒賊先擒王,找到源包纔是關鍵。

報錯信息:yarn init報錯 Can't answer a question unless a user TTY,
解決方案:原因是後面沒帶上--yes,這樣使用就沒問題yarn init --yes
tip:默認的入口文件是index.js

報錯信息:Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'
解決方案:刪除本地的node_modules,重新安裝
tip:一個項目的插件要麼全部用cnpm下載,要麼全部用npm下載。當然還有(yarn、npx),統一一點

如何發佈一個npm包

- 在鏡像源npm官網那註冊一個賬號 傳送門:https://www.npmjs.com/package/npm
- 然後在項目中(package.json)目錄下進行npm login
- 最後使用npm publish  -- 謹記不要加包名,這裏的語法和yarn link相似
- 注意package.json中的name必須是唯一的,不然會發布不成功
- 設置鏡像 yarn/npm config set registry https://registry.npm.taobao.org

tips: 在發佈版本前記得要加上版本修改的信息

值得一提

npx 是 npm 5.2+ 版本之後自帶的工具,能夠幫助我們更高效的執行 npm 軟件倉庫裏的安裝包

npx create-react-app my-app 執行以上這條命令 npx 會按以下順序工作

  1. 先查找當前項目有沒 create-react-app
  2. 如果當前項目找不到,會去全局查找 create-react-app
  3. 如果全局還找不到,會幫我們臨時從 npm 包倉庫安裝 create-react-app,不會污染到當前項目,也不會裝到全局

查詢包的信息

npm info packageName: 查看包的版本
npm view packageName versions:查看當前包的版本信息,有s則代表所有版本,沒s代表現在本地的版本
packName --version:查看包的本地版本

yarn/npm: 之前在項目中踩過一個坑,就是無法下載最新改動的包,後來發現是由於yarn緩存造成的,所以,下次遇到下載不到最新包,可以使用yarn cache clean 2020-3-14遇到了同樣是緩存問題,還有的就是
版本號對不上。

yarn add packageName@latest: 安裝最新的包
yarn cache clean: 清除緩存
yarn upgrade packageName@version: 安裝某個版本的包

yarn global dir 展示yarn的全局安裝位置
yarn global bin 展示bin的全局安裝路徑(這裏需要注意的是要將yarn下面的node_modules/bin放到環境變量裏面去,不然yarn全局安裝的包是無法在cmd生效)
yarn global set global-folder .... 設置全局安裝包的位置
yarn config list 展示所有的包
npm config ls 展示所有的配置
npm config set .... 設置配置

分別查看npm和yarn的啓動程序位置
yarn global bin
npm -g bin

link

npm/yarn link意思是將當前的模塊link到全局,而npm/yarn link packName 則是將當前全局的包link到本地項目去;
所以使用npm/yarn link、npm/yarn link PackageName 必須在package.json目錄下
yarn link會在C:\user\userName\AppData\Local\Yarn\Data\link下面弄出一個類似快捷鍵的文件

用法

在需要link到全局環境的包敲下以下命令
yarn/npm link

注意如果link成功後需要需要使用到bin目錄下面的文件,但是不成功

原因排查:

  • 查看配置yarn/npm config list
  • 在window上面配置一般存放在user下面.npmrc或者.yarnrc,可以直接去修改
  • 而且他們兩者有點不同的就是key/value命名方式上面

思考,link和軟連接的關係:

使用命令創建一個空文件夾

MKLINK [[/D] | [/H] | [/J]] Link Target

/D 創建目錄符號鏈接。默認爲文件
/H 創建硬鏈接,而不是符號鏈接。
/J 創建目錄聯接。
Link 指定新的符號鏈接名稱。
Target 指定新鏈接引用的路徑

警告信息warning ..\package.json: No license field
解決方案: 將上一級的package.json文件裏面添加一個"license": "ISC",
tips:注意提示信息中的兩個點,指的是上一層,不是當前層

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章