那些年我們對npm 和 cnpm 的誤區

来源:https://www.cnblogs.com/chase-star/archive/2019/03/01/10455703.html
-Advertisement-
Play Games

1、 npm 和 cnpm 的區別 相信很多人都不太明白 npm 和 cnpm 到底是什麼東東, 為啥在國內要用 淘寶鏡像使用 cnpm, (1) 兩者之間只是 node 中包管理器的不同喲, (2) cnpm是個中國版的npm,如果因為網路原因無法使用npm下載,那這個就派上用場了。 2、 nrm ...


1、 npm 和 cnpm 的區別

相信很多人都不太明白 npm 和 cnpm 到底是什麼東東, 為啥在國內要用 淘寶鏡像使用 cnpm,

(1) 兩者之間只是 node 中包管理器的不同喲,

(2) cnpm是個中國版的npm,如果因為網路原因無法使用npm下載,那這個就派上用場了。

2、 nrm的使用

很多人都說如果 npm 速度不夠快。 繼而使用 

npm install -g cnpm --registry=https://registry.npm.taobao.org

  這個命令行 就可以使用 cnpm 了。

但是它的實質是 

  (1)全局安裝 cnpm 

  (2)並且將安裝 包 的地址切換到 國內的淘寶鏡像

這裡面省略了一個很重要的東西,就是 nrm 的使用,這個包的功能可以讓我們隨意的切換我們下載包的地址。 

  (1)如果裝好了 cnpm 可以, cnpm i nrm -g 

     (2)nrm ls 查看所有 包下載路徑,

  (3)nrm use 使用包路徑, 當然也可以直接用 nrm help 查看 nrm 功能幫助

如果沒有瞭解過npm、 cnpm 的朋友可以再往下看詳細理解以下

3、npm介紹

3.1、說明:npm(node package manager)nodejs的包管理器,用於node插件管理(包括安裝、卸載、管理依賴等);

3.2、使用npm安裝插件:命令提示符執行npm install <name> [-g] [--save-dev]

3.2.1、<name>:node插件名稱。例:npm install gulp-less --save-dev

3.2.2、-g:全局安裝。將會安裝在C:\Users\Administrator\AppData\Roaming\npm,並且寫入系統環境變數;  非全局安裝:將會安裝在當前定位目錄;  全局安裝可以通過命令行在任何地方調用它,本地安裝將安裝在定位目錄的node_modules文件夾下,通過require()調用; 

ES6 可以直接使用 import 調用,前提安裝以下 包

(1) cnpm i babel-core babel-loader@7 babel-plugin-transform-runtime -D  (需要指定版本,babel官網指定說明的)

(2) cnpm i babel-preset-env babel-preset-stage-0 -D

3.2.3、--save:將保存配置信息至package.json(package.json是nodejs項目配置文件);

3.2.4、-dev:保存至package.json的devDependencies節點,不指定-dev將保存至dependencies節點;一般保存在dependencies的像這些express/ejs/body-parser等等。

3.2.5、為什麼要保存至package.json?因為node插件包相對來說非常龐大,所以不加入版本管理,將配置信息寫入package.json並將其加入版本管理,其他開發者對應下載即可(命令提示符執行npm install,則會根據package.json下載所有需要的包,npm install --production只下載dependencies節點的包)。

3.3、使用npm卸載插件:npm uninstall <name> [-g] [--save-dev]  PS:不要直接刪除本地插件包

3.3.1、刪除全部插件:npm uninstall gulp-less gulp-uglify gulp-concat ……???太麻煩

3.3.2、藉助rimraf:npm install rimraf -g 用法:rimraf node_modules

3.4、使用npm更新插件:npm update <name> [-g] [--save-dev]

3.4.1、更新全部插件:npm update [--save-dev]

3.5、查看npm幫助:npm help

3.6、當前目錄已安裝插件:npm list

PS:npm安裝插件過程:從http://registry.npmjs.org下載對應的插件包(該網站伺服器位於國外,所以經常下載緩慢或出現異常),解決辦法往下看↓↓↓↓↓↓。

4、選裝cnpm

4.1、說明:因為npm安裝插件是從國外伺服器下載,受網路影響大,可能出現異常,如果npm的伺服器在中國就好了,所以我們樂於分享的淘寶團隊幹了這事。32個贊!來自官網:“這是一個完整 npmjs.org 鏡像,你可以用此代替官方版本(只讀),同步頻率目前為 10分鐘 一次以保證儘量與官方服務同步。”

4.2、官方網址:http://npm.taobao.org

4.3、安裝:命令提示符執行npm install -g cnpm --registry=https://registry.npm.taobao.org;  註意:安裝完後最好查看其版本號cnpm -v或關閉命令提示符重新打開,安裝完直接使用有可能會出現錯誤;

註:cnpm跟npm用法完全一致,只是在執行命令時將npm改為cnpm(以下操作將以cnpm代替npm)。

 

6、新建package.json文件

6.1、說明:package.json是基於nodejs項目必不可少的配置文件,它是存放在項目根目錄的普通json文件;

6.2、它是這樣一個json文件(註意:json文件內是不能寫註釋的,而且必須是雙引號,複製下列內容請刪除註釋)

{
  "name": "test",   //項目名稱(必須)
  "version": "1.0.0",   //項目版本(必須)
  "description": "This is for study webpack project !",   //項目描述(必須)
  "homepage": "",   //項目主頁
  "repository": {    //項目資源庫
    "type": "git",
    "url": "https://xxx/xxxx"
  },
  "author": {    //項目作者信息
    "name": "....",
    "email": "[email protected]"
  },
  "license": "ISC",    //項目許可協議
  "devDependencies": {    //項目依賴的插件
  }
}

6.3、當然我們可以手動新建這個配置文件,但是作為一名有志青年,我們應該使用更為效率的方法:命令提示符執行cnpm init -y

6.4、查看package.json幫助文檔,命令提示符執行cnpm help package.json

特別註意:package.json是一個普通json文件,所以不能添加任何註釋。

 

---------------------------------------------------------分割線---------------------------------------------------

 

小編碼字找圖不易,覺得好可以關註,後續還有繼續推文噢


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • flex對齊 flex對齊方式與主軸和交叉軸所在的方向有關,而flex-direction是控制方向的。 主軸 justify-content justify-content對齊方式共有5種對齊方式: flex-start :主軸起點邊緣開始,從左向右。 flex-end :主軸終點邊緣開始,從右向 ...
  • $broadcast: $broadcast事件是由父組件發起,所有子組件都會收到此廣播事件,除非事件被手動取消。事件廣播的順序為廣度優先搜索順序,如上圖,如果頁面Page_Index發起一個$broadcast事件,那麼按先後順序依次接收到該事件的組件為:ComA、ComB、ComC、ComD、C ...
  • 主要部分: 花括弧,方括弧,冒號和逗號 花括弧保存對象 方括弧裝載數組 名稱和值用冒號隔開 對象通過逗號隔開 一個好用的json格式校驗網址:https://www.json.cn/ ...
  • 近幾年,隨著 Web 開發逐漸成熟,前後端分離的架構設計越來越被眾多開發者認可,使得前端和後端可以專註各自的職能,降低溝通成本,提高開發效率。 在前後端分離的開發模式下,前端和後端工程師得以並行工作。當遇到前端界面展示需要的數據,而後端對應的介面還沒有完成開發的情況時,需要一個數據源來保證前端工作的 ...
  • 在本次Wepack 4教程,我們會聚焦通過壓縮輸出內容,來提升你應用的用戶體驗。這意味著,生產環境需要一套不同的做法。今天,我們將通過mode參數來講述Webpack內置的優化功能。開始吧! ...
  • 1、js支持重載嗎?雖然js 本身並沒有函數重載,但是可以用arguments來模擬重載,函數名相同,參數不同,arguments的length屬性,獲取參數個數,索引屬性獲取參數值 2、什麼是作用域鏈對象?專門保存了函數對象可用變數的位置的對象(棧)都有預設指向window對象地址。3、什麼是閉包 ...
  • Web前端 CSS必備知識點 基本內容,類選擇符,id選擇符,偽類,偽元素,結構,繼承,特殊性,層疊,元素分類,顏色,長度,url,文本,字體,邊框,塊級元素,浮動元素,內聯元素,定位。 鏈接: link標簽: 樣式: 指示引入多個外部樣式表的鏈接 註解 內聯樣式: 規範: 選擇符 + 聲明 偽類和 ...
  • 修改網上流傳的flash-marker.js 調用代碼 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...