摘要:博客地址這篇文章是我在眾成翻譯翻譯的一篇文章,一篇的入門指南,原文鏈接的出現使得用寫服務端應用成為可能。你可以看到,這個過程也安裝了其他的模塊,它們都是的所依賴的模塊。但是,得到的輸出信息會很冗長,我們可以加上來精簡一下輸出。
github 博客地址: https://github.com/zengxiaota...
這篇文章是我在 眾成翻譯 翻譯的一篇文章,一篇 npm 的入門指南,原文鏈接
Node.js 的出現使得用 Javascript 寫服務端應用成為可能。Node.js 由 C++ 編寫而成并且構建于 V8 引擎之上,因此運行得很快。一開始,Node.js 只是想運行于服務端環境,但是開發者們顯然不滿足于此,開始創造各種工具來實現自動化任務。也因為此,基于 Node 的前端自動化工具(如Grunt, Gulp 和 Webpack)的出現也給前端開發帶來了翻天覆地的變化。
本文最后更新時間為 08.06.2017, 介紹了包括了 npm 當前現狀,以及 npm5 的一些改變。
想要利用這些工具或者模塊包,我們需要使用合理的方式來安裝和管理這些模塊,這也是 npm 這個包管理工具出現的初衷。我們通過 npm 來安裝模塊并且使用其提供的接口來使用這些模塊。
在本文中,我將要介紹 npm 的基本用法,告訴你們怎么安裝安裝本地和全局模塊包,怎么刪除,升級和安裝一個特定版本的模塊。同時我還會介紹怎么利用 package.json 文件來管理你的依賴。如果你喜歡觀看視頻,也可以注冊成為 SitePoint Premium 的會員,觀看我們的免費視頻: What is npm and How Can I Use It?。
在我們開始使用 npm 之前,我們必須先在本地系統中安裝 Node.js。讓我們開始吧。
安裝 Node.js 作者的更多文章Redux vs MobX: Which Is Best for Your Project?
10 jQuery HTML5 Audio Players
首先前往 Node.js 的下載頁面獲取你需要的版本。下載頁面提供了 Windows 和 Mac 的安裝包以及預編譯的 Linux 二進制源代碼,對于 Linux 用戶,你還可以通過包管理工具來安裝。
寫這篇教程時,Node.js 的 LTS 版本為 v6.10.3,因此本文也會以此版本來講解。
提示:你可能想通過版本管理工具來安裝 Node.js,我們將會在后面的章節介紹。
安裝之后讓我們來看看 node 的安裝位置以及安裝的版本。
$ which node /usr/bin/node $ node --version v6.10.3
為了驗證我們已經正確安裝,進入 Node 的 REPL 試一下。
$ node > console.log("Node is running"); Node is running > .help .break Sometimes you get stuck, this gets you out .clear Alias for .break .exit Exit the repl .help Show repl options .load Load JS from a file into the REPL session .save Save all evaluated commands in this REPL session to a file > .exit
至此 Node.js 已經安裝完成,讓我們來看看 npm, 它已經隨著 Node.js 一起安裝在了你的系統中。
$ which npm /usr/bin/npm $ npm --version 3.10.10Node模塊
npm 可以以全局或者本地模式安裝模塊。本地模式下,所有的模塊包安裝在你當前工作目錄下的 node_modules 文件夾中,能被當前用戶訪問到。全局模式則是將模塊安裝在 {prefix}/lib/node_modules/ 中,為 root 用戶所有({prefix} 通常是 /usr/ 或者 /usr/local])。這意味著當你想全局安裝模塊的時候,出于安全性的考慮和避免解析第三方的依賴模塊時可以引發的權限錯誤,你需要使用 sudo 命令。
Time to manage those packages
更改全局模塊的安裝位置輸入 npm config 命令,看看會輸出什么。
$ npm config list ; cli configs user-agent = "npm/3.10.10 node/v6.10.3 linux x64" ; userconfig /home/sitepoint/.npmrc prefix = "/home/sitepoint/.node_modules_global" ; node bin location = /usr/bin/nodejs ; cwd = /home/sitepoint ; HOME = /home/sitepoint ; "npm config ls -l" to show all defaults.
npm config 命令提供了我們的安裝的信息。現在,讓我們獲取它們的安裝位置。
$ npm config get prefix /usr
This is the prefix we want to change, so as to install global packages in our home directory. To do that create a new directory in your home folder.
$ cd ~ && mkdir .node_modules_global $ npm config set prefix=$HOME/.node_modules_global
為了在我們的 home 目錄安裝全局模塊,我們要更改的 prefix 就是這個,我們首先在 home 目錄中創建一個新文件夾。
$ npm config get prefix /home/sitepoint/.node_modules_global $ cat .npmrc prefix=/home/sitepoint/.node_modules_global
我們仍然在 root 用戶目錄下安裝了 npm, 但是由于我們該改變了全局模塊的安裝位置,我們需要再一次安裝 npm,這一次我們會安裝最新版本的 npm5到新用戶目錄。
$ npm install npm --global └─┬ npm@5.0.2 ├── abbrev@1.1.0 ├── ansi-regex@2.1.1 .... ├── wrappy@1.0.2 └── write-file-atomic@2.1.0
最后我們需要添加 .node_modules_global/bin 至 $PATH 環境變量。這樣我們就可以在命令行運行這些全局模塊。在 .profile,.bash_profile 或者 .bashrc 文件中添加下面這一行,并重啟你的終端。
`export PATH="$HOME/.node_modules_global/bin:$PATH"`
現在,命令行會首先發現 .node_modules_global/bin 目錄,并且會使用正確的 npm 版本。
$ which npm /home/sitepoint/.node_modules_global/bin/npm $ npm --version 5.0.2安裝全局模塊
到目前為止我們只安裝了 npm 這一個全局模塊。現在再安裝 UglifyJS (一個 JavaScript 壓縮工具)。使用 --flag 標記,當然也可以簡寫成 -g。
$ npm install uglify-js --global /home/sitepoint/.node_modules_global/bin/uglifyjs -> /home/sitepoint/.node_modules_global/lib/node_modules/uglify-js/bin/uglifyjs + uglify-js@3.0.15 added 4 packages in 5.836s
你可以看到,這個過程也安裝了其他的模塊,它們都是 Uglify 的所依賴的模塊。
列出所有全局模塊通過 npm list 可以列出所有已經安裝的全局模塊。
$ npm list --global home/sitepoint/.node_modules_global/lib ├─┬ npm@5.0.2 │ ├── abbrev@1.1.0 │ ├── ansi-regex@2.1.1 │ ├── ansicolors@0.3.2 │ ├── ansistyles@0.1.3 .................... └─┬ uglify-js@3.0.15 ├─┬ commander@2.9.0 │ └── graceful-readlink@1.0.1 └── source-map@0.5.6
但是,得到的輸出信息會很冗長,我們可以加上 --depth=0 來精簡一下輸出。
$ npm list -g --depth=0 /home/sitepoint/.node_modules_global/lib ├── npm@5.0.2 └── uglify-js@3.0.15
輸出信息現在更清楚了。我們只列出了我們安裝的模塊和版本號。
所有全局安裝的模塊都可以通過命令行訪問到。舉個例子,現在你想要使用 Uglify 模塊來壓縮 example.js 文件,輸出文件為 example.min.js:
`$ uglifyjs example.js -o example.min.js`本地模式下安裝模塊
當你想在本地安裝一個模塊,你首先需要一個 package.json 文件,所以讓我們先創建一個。
$ npm init package name: (project) version: (1.0.0) description: Demo of package.json entry point: (index.js) test command: git repository: keywords: author: license: (ISC)
按下 Enter 它將會使用默認值,最后輸入 yes 來確認。這將會在你工程下的根目錄下創建一個 package.json 文件。
{ "name": "project", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "author": "", "license": "ISC" }
小技巧:使用 npm init --y 能更快的創建 package.json文件。
package.json 的除了 main 和 scripts,每一項的意思的都很明確,具有 “自解釋性”。main 這一項表示你的程序的入口文件,scripts 表示你項目生命周期里定義的可運行的腳本命令。到此,package.json 文件的這些項已經足夠,如果你想了解更多關于每一項的含義,你可以看看 npm 的文檔 和這篇文章 using npm as a build tool.
現在,我們來安裝 Underscore。
$ npm install underscore npm notice created a lockfile as package-lock.json. You should commit this file. npm WARN project@1.0.0 No description npm WARN project@1.0.0 No repository field. + underscore@1.8.3 added 1 package in 0.344s
注意到,安裝過程中創建了一個 lockfile 文件,我們之后會介紹它。
現在,再看一看 package.json 文件,我們看到它多了 dependencies 這一項。
{ ... "dependencies": { "underscore": "^1.8.3" } }使用 package.json 文件來管理依賴包
正如你所見,你的工程項目已經安裝了 1.8.3 版本的 Undescore。版本號前面的 ^ 符號表示當你安裝此模塊的時候,npm 會拉取它能發現的關于此模塊的最新版本,但是必須匹配主版本號(如果本地沒有 package-lock.json 文件)。在本例中,npm 會尋找低于 2.0.0 版本的最新版的 Underscore。這種模塊版本安裝方法叫做 語義化版本。你可以閱讀這篇文章 Semantic Versioning: Why You Should Be Using it 來了解更多。
同樣要注意到,Underscore 被保存到了 dependencies 這一項了。在最新版本的 npm 也就是 npm5 中,這已經成為了默認選項,表示程序運行時的必需模塊。你也可以指定 --save-dev 選項來把模塊信息添加到 devDependencies 這一項,表示開發時所需的模塊,比如說測試或者代碼轉換。
你也在 package.json 文件中添加 private: true 這一項,防止你的私人倉庫被誤發布,同時運行 npm install 命令時,避免產生任何警告信息。
到目前為止,最應該使用 package.json 的理由是 package.json 指定了所有的依賴項,所以當我們想克隆別人的代碼,我們只需要復制 package.json 文件到項目的根目錄并運行 npm i,npm 將會自動分析文件并且安裝所有我們所需的模塊。我們在后面還會詳細講解。
在結束這一部分之前,我們來檢查一下 underscore 是否正常工作。我們在根目錄創建一個 test.js 文件,并且將如下代碼添加到代碼中。
const _ = require("underscore"); console.log(_.range(5));
在控制臺輸入 node test.js 來運行這個文件,屏幕上會輸出 [0, 1, 2, 3, 4]。
卸載本地模塊npm 是一個包管理工具,所以必須具有移除模塊的功能。假設我們現在安裝的 underscore 版本會引起一個兼容性問題,我們可以先移除它,并安裝之前穩定的版本。
$ npm uninstall underscore removed 2 packages in 0.107s $ npm list project@1.0.0 /home/sitepoint/project └── (empty)安裝一個指定版本號的模塊
我們現在可以安裝任意想要的版本的 underscore, 只需要在 @ 符號后面加上所需版本號即可。
$ npm install underscore@1.8.2 + underscore@1.8.2 added 1 package in 1.574s $ npm list project@1.0.0 /home/sitepoint/project └── underscore@1.8.2更新一個模塊
讓我們檢查一下 underscore 是否有更新
$ npm outdated Package Current Wanted Latest Location underscore 1.8.2 1.8.3 1.8.3 project
Current 這一列告訴我們我們本地安裝的 underscore 版本,Latest 這一列則告訴我們當前的 underscore 的最新版本,Wanted 這一列則表示在不破壞當前代碼的前提下,我們可以升級的最新版本。
記得我們之前所說的 package-lock.json 文件嗎? npm5 開始引入這個文件,目的是記住安裝的依賴包的版本號,從而使每臺機器上安裝的依賴包的版本都相同。每當你修改了 node_modules 文件夾或者 package.json 文件,package-lock.json 文件將會自動生成。
你可以嘗試一個這個特性。刪除 node_modules 文件夾,重新運行 npm i 。新版本的 npm5 將會安裝 v1.8.2 版本的 Underscore。(因為在 package-lock.json 指定了 Underscore 的版本為 1.8.2)。而舊版本的 npm 會安裝 1.8.3 版本的 Underscore。之前的經驗證明,版本不一致的依賴模塊將會給開發者帶來很大的麻煩,在之前,你需要手動創建一個 npm-shrinkwrap.json 文件來避免這個問題。
現在,假設 Underscore 的最新版本已經修復了我們之前遇到的 bug, 我們現在要更新 Underscore 至最新版本。
$ npm update underscore + underscore@1.8.3 updated 1 package in 0.236s $ npm list project@1.0.0 /home/sitepoint/project └── underscore@1.8.3
搜索一個模塊提示: 為了上述操作能生效,Underscore 必須位于 package.json 的 dependency 中。另外,如果你也很多過時的模塊,可以執行 npm update 命令一起更新所有模塊。
你可以看到,這篇教程你我們已經多次使用了 mkdir 命令,那么是否有一個模塊可以實現和 mkdir 一樣的功能,我們有 npm search 試試看。
$ npm search mkdir NAME | DESCRIPTION | AUTHOR | DATE | VERSION mkdir | Directory crea… | =joehewitt | 2012-04-17 | 0.0.2 fs-extra | fs-extra conta… | =jprichardson… | 2017-05-04 | 3.0.1 mkdirp | Recursively mkdir,… | =substack | 2015-05-14 | 0.5.1 ...
我們找到了(mkdirp)。安裝它。
$ npm install mkdirp + mkdirp@0.5.1 added 2 packages in 3.357s
現在我們創建一個 mkdir.js 文件,并且將以下代碼復制進去。
const mkdirp = require("mkdirp"); mkdirp("foo", function (err) { if (err) console.error(err) else console.log("Directory created!") });
在命令行中運行這個文件
$ node mkdir.js Directory created!重新安裝所有的依賴模塊
首先我們安裝多個模塊。
$ npm install request + request@2.81.0 added 54 packages in 15.92s
檢查一下 package.json 文件
"dependencies": { "mkdirp": "^0.5.1", "request": "^2.81.0", "underscore": "^1.8.2" },
注意到,dependencies 列表也自動更新了。在之前的 npm 版本,只有執行 npm install request --save 命令才會將 dependency 保存到 package.json 文件中。如果你不想在 package.json 中保存,只需要使用 --no-save 參數。
假設你把你的工程文件拷貝到了另外一臺機器上,并且我們想安裝這些依賴。讓我們先刪除 node_modules 文件夾,然后執行 npm install 命令。
$ rm -R node-modules $ npm list project@1.0.0 /home/sitepoint/project ├── UNMET DEPENDENCY mkdirp@^0.5.1 ├── UNMET DEPENDENCY request@^2.81.0 └── UNMET DEPENDENCY underscore@^1.8.2 npm ERR! missing: mkdirp@^0.5.1, required by project@1.0.0 npm ERR! missing: request@^2.81.0, required by project@1.0.0 npm ERR! missing: underscore@^1.8.2, required by project@1.0.0 $ npm install added 57 packages in 1.595s
檢查一下你的 node_modules 文件夾,你會發現所有的模塊都已經重新安裝了。通過這種方式,你可以很簡單的與其他人分享你的工程文件,你只需給他們一個 package.json 文件,而不用把你的所有依賴模塊給他們。
管理緩存當你通過 npm 安裝一個模塊時,它會保存一份模塊的副本,所以當你下次安裝同樣的模塊的時候,npm 它不會訪問網絡,而是直接從你當前工作目錄的 .npm 文件夾下讀取緩存。
$ ls ~/.npm anonymous-cli-metrics.json _cacache _locks npm registry.npmjs.org
但是隨著時間的推移,你的 .npm 文件夾會有很多夾雜許多舊的模塊包,這時就很有必要定期清理一下你的 .npm 目錄了。
`$ npm cache clean`
如果你的想清除你系統內有多個 node 工程,你也在你的工作目錄下使用以下命令刪除所有的 node_modules 文件夾。
`find . -name "node_modules" -type d -exec rm -rf "{}" +`別名
你可能注意到了,這里有很多方式去執行我們的 npm 命令。這里有一個簡單的 npm 別名的列表
npm i – install local package 本地安裝模塊
npm i -g – install global package 全局安裝模塊
npm un – uninstall local package 卸載本地模塊
npm up – npm update packages 更新本地模塊
npm t – run tests 運行測試
npm ls – list installed modules 列出已安裝的模塊
npm ll or npm la – print additional package information while listing modules 打印出所列模塊的附加信息
你也可以像這樣一次安裝多個模塊
`$ npm i express momemt lodash mongoose body-parser webpack`
如果你想了解所有的 npm 命令,只需要運行 npm help 命令,或者你也可以讀一讀我們的這篇文章: 10 Tips and Tricks That Will Make You an npm Ninja.
版本管理工具有很多的 Node.js 版本工具可供使用來管理你系統內的 Node.js 版本。比如說 n,或者nvm (Node Version Manager). 如果你對他們感興趣,你應該讀一下我這篇入門指南: Install Multiple Versions of Node.js using nvm.
結論在這篇教程中,我介紹了 npm 的基本用法,包括如何安裝 Node.js、如何改變全局模塊的安裝位置(這樣我們可以避免使用 sudo)、如果本地或者去全局安裝 npm 模塊、同時還介紹了怎么刪除,升級模塊,怎么安裝一個指定版本的模塊以及怎么管理你工程的各個依賴項。如果你想了解關于更多的 npm 最新版本的特性,你可以訪問 npm 的 官方倉庫。
npm5 給全世界前端開發帶來了巨大的改進。其 COO 說,npm 的用戶群在不斷變化,大部分用戶不僅僅為了寫 Node 程序而使用 npm, npm 已經成為了前端整合 JavaScript 代碼的工具,甚至是現代 JavaScript 不可或缺的一部分。如果你還沒有在你的項目中使用 npm ,現在是時候了。
這篇文章由Graham Cox審核。感謝 SitePoint 上的審核人員,是你們讓 SitePoint 的內容變得更好。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/83702.html
摘要:是在谷歌的年開發者峰會上宣布,但穩定的技術和工具終于在月到達。固然也不能保證蘋果將實施這項技術,但這并不重要,你的應用程序仍然可以在中工作,它只是不會從離線執行中受益。我有一種感覺一旦上體驗有明顯提升蘋果將鼓勵支持。 2016年是值得紀念、奇怪的、有點歡騰/可怕的一年,取決于你的觀點。跟其他事件相比僅僅專注于JavaScript可能看起來無關緊要,但它是每個Web開發人員的工作生活中巨...
摘要:是在谷歌的年開發者峰會上宣布,但穩定的技術和工具終于在月到達。固然也不能保證蘋果將實施這項技術,但這并不重要,你的應用程序仍然可以在中工作,它只是不會從離線執行中受益。我有一種感覺一旦上體驗有明顯提升蘋果將鼓勵支持。 2016年是值得紀念、奇怪的、有點歡騰/可怕的一年,取決于你的觀點。跟其他事件相比僅僅專注于JavaScript可能看起來無關緊要,但它是每個Web開發人員的工作生活中巨...
摘要:是在谷歌的年開發者峰會上宣布,但穩定的技術和工具終于在月到達。固然也不能保證蘋果將實施這項技術,但這并不重要,你的應用程序仍然可以在中工作,它只是不會從離線執行中受益。我有一種感覺一旦上體驗有明顯提升蘋果將鼓勵支持。 2016年是值得紀念、奇怪的、有點歡騰/可怕的一年,取決于你的觀點。跟其他事件相比僅僅專注于JavaScript可能看起來無關緊要,但它是每個Web開發人員的工作生活中巨...
摘要:跟現在的類似的,把命令行工具從的核心代碼中剝離了。和都能使用獨立出來的命令行工具。是無法做出相應的區分的。之前的中,在我們傳入一個通配符和可選參數后,我們可以再指定一個任務數組或者一個回調函數用來處理事件數據。 原文鏈接:The Complete-Ish Guide to Upgrading to Gulp 4 雖然Gulp4始終在開發中,但是你要堅信在將來的某一天你一定可以等到它的正...
摘要:哈哈,我理解,架構就是骨架,如下圖所示譯年月個有趣的和庫前端掘金我們創辦的使命是讓你及時的了解開發中最新最酷的趨勢。 翻譯 | 上手 Webpack ? 這篇就夠了! - 掘金譯者:小 boy (滬江前端開發工程師) 本文原創,轉載請注明作者及出處。 原文地址:https://www.smashingmagazine.... JavaSrip... 讀 Zepto 源碼之代碼結構 - ...
閱讀 869·2021-11-22 09:34
閱讀 1002·2021-10-08 10:16
閱讀 1816·2021-07-25 21:42
閱讀 1790·2019-08-30 15:53
閱讀 3518·2019-08-30 13:08
閱讀 2174·2019-08-29 17:30
閱讀 3341·2019-08-29 17:22
閱讀 2173·2019-08-29 15:35