【第878期】Node, NPM, Yarn 和 package.json

2021-12-29 前端早讀課

前言

偶遇《從零開始構建 JavaScript 技術棧》,按作者 @verekia 的話來說這是一份簡單直接的 Javascript 技術棧構建指南。3 月 17 號早讀文章由 @pd4d10 翻譯授權分享。

正文從這開始~

在本節中,我們將學習如何設置 Node,NPM,Yarn 和 package.json。

首先需要安裝 Node,它提供了後端 JavaScript 的運行環境,同時還包括構建前端技術棧所需的所有工具。

macOS 或 Windows 用戶可以直接下載安裝文件,Linux 用戶可以通過包管理器安裝。

例如,在 Ubuntu / Debian 上,您可以運行以下命令來安裝 Node:

curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
sudo apt-get install -y nodejs

你需要大於 6.5.0 的 Node 版本。

npm 是 Node 的默認包管理器,不需要手動安裝。

注意:如果你之前已經安裝過 Node,可以使用 nvm (Node Version Manager) 安裝最新版本的 Node。

Yarn 是另一個包管理器,它比 NPM 快許多,而且能離線緩存,在包的依賴管理上更可靠。Yarn 於 2016 年 10 月 發布 以來就獲得了廣泛的使用,正在成為 JavaScript 社區選擇的新的包管理器。我們將在本教程中使用 Yarn。如果你想使用 NPM,用 npm install --save 和 npm install --save-dev 分別替換 yarn add 和 yarn add —dev 命令即可。

按照這個說明安裝 Yarn。你可以使用 npm install -g yarn 或 sudo npm install -g yarn 安裝它(是的,我們可以使用NPM來安裝Yarn,就像使用 Internet Explorer 或 Safari 安裝Chrome 一樣!)。

創建一個新文件夾,並 cd 到文件夾中。

運行 yarn init,並按照提示輸入一些欄位(使用 yarn init -y 可以跳過輸入欄位的環節),將自動生成一個 package.json 文件。

新建 index.js 文件,內容為 console.log('Hello world')。

在當前文件夾下運行 node .(Node 默認會去找當前文件夾下的 index.js)。將列印 「Hello world」。

運行 node . 可能有點太容易了。我們將使用 NPM / Yarn 腳本來觸發代碼的執行。這樣做的好處是,即使我們的程序變得更複雜,也能使用簡單的一個命令 yarn start 來運行整個程序。

"scripts": {
 "start": "node ."
}

package.json 必須是有效的 JSON 文件,這意味著不能使用尾逗號。手動編輯 package.json 文件時要注意這一點。

npm-debug.log
yarn-error.log

注意:你可能注意到每章的 package.json 文件都有一個 tutorial-test 腳本。這些腳本是用於測試的,確保 yarn && yarn start 運行正確。你可以在自己的項目中刪除它們。

最後,你可能還需要:

【第558期】不會寫shell的程式設計師照樣是好前端——用Node.JS實現git hooks

【第610期】JS一般般的網頁重構可以使用Node.js做些什麼

【第733期】Yarn:一個新的JavaScript包管理器

關於本文

譯者:@pd4d10

譯文:https://github.com/pd4d10/js-stack-from-scratch

相關焦點

  • npm & yarn 包管理機制
    下載前先確認本地是否存在匹配的緩存版本,如果有就直接使用緩存文件,如果沒有就下載並添加到緩存,然後將包按依賴樹解壓到 node_modules 目錄。可以確認這樣幾個邏輯:構建依賴樹的過程中,版本確認需要結合 package.json 和 package-lock.json 兩個文件。
  • npm、yarn、cnpm、pnpm 使用操作都在這了
    g pnpm初始化一個項目npm init// ORyarn init// 快速生成的package.json默認配置npm/yarn init -y安裝項目依賴// npm / cnpm / pnpm//
  • Facebook 新推 Yarn,或取代 npm 客戶端
    我們把這個客戶端工具稱為Yarn —— 更加快速、可靠、安全的 npm 客戶端的替代品。我們在此榮幸地宣布,我們與 Exponent、 Google 和 Tilde 進行了合作,並開源 Yarn 項目。工程師在使用 Yarn 時,依然需要訪問 npm 倉庫,但 Yarn 能夠更快速地安裝軟體包和管理依賴關係,並且可以在跨機器或者無網絡的安全環境中保持代碼的一致性。
  • 【第596期】npm scripts
    0. npm run & npm run-script這兩命令的效果都是一樣的,都能執行 package.json 文件 scripts 欄位下指定的任務。npm run 是 npm run-script 的縮寫,一般都使用 前者,但是後者可以更好地反應這個命令的本質。
  • 關於前端大管家package.json,你知道多少
    package.json 文件是一個 JSON 對象,該對象的每一個成員就是當前項目的一項設置。package.json 作為前端的大管家,到底有哪些配置和我們的日常開發密切相關?下面就來仔細剖析一下這個文件。當我們搭建一個新項目時,往往腳手架就幫我們初始化好了一個 package.jaon 配置文件,它位於項目的根目錄中。
  • 【 Node.js】你應該知道的 NPM 知識都在這!
    package.json 如何產生的npm initnpm init 命令用來初始化一個簡單的 package.json 文件,執行該命令後終端會依次詢問 name, version, description 等欄位。
  • npm配置文件package.json裡面的欄位你知道多少
    來聊聊npm的配置文件吧!創建一個前端項目目前都離不開npm包管理工具,所以根目錄必須有一個package.json文件如何創建呢?name: 項目(包,模塊)名稱-- 沒有特殊的要求,駝峰或者橫線分隔都可以也是最常用的version: 版本號(~1.2.3)(1.2.3)(^1.2.3)-- 大版本和小版本-- 1代表大版本
  • 【 Node.js 進階】你應該知道的 NPM 知識都在這!
    package.json 如何產生的npm initnpm init 命令用來初始化一個簡單的 package.json 文件,執行該命令後終端會依次詢問 name, version, description 等欄位。
  • 你不知道的 Npm(Node.js 進階必備好文)
    package.json 如何產生的npm initnpm init 命令用來初始化一個簡單的 package.json 文件,執行該命令後終端會依次詢問 name, version, description 等欄位。
  • 前端工程化 - 剖析npm的包管理機制
    在 npm 的早期版本, npm 處理依賴的方式簡單粗暴,以遞歸的形式,嚴格按照 package.json 結構以及子依賴包的 package.json 結構將依賴安裝到他們各自的 node_modules 中。直到有子依賴包不在依賴其他模塊。
  • 前端工程化 - 剖析npm的包管理機制(完整版)
    在 npm 的早期版本, npm 處理依賴的方式簡單粗暴,以遞歸的形式,嚴格按照 package.json 結構以及子依賴包的 package.json 結構將依賴安裝到他們各自的 node_modules 中。直到有子依賴包不在依賴其他模塊。
  • 你可能不知道的package.json
    前言在上一篇npm init @vitejs/app的背後,僅是npm CLI的冰山一角[1]中,有提到我複習npm主要是從兩個大方向來入手,所以這篇繼續來講講package.json這部分知識,經過這輪複習,也發現了自己的很多不足,之前把常用的命令和配置玩熟了,卻沒關心npm
  • 尤雨溪推薦神器 ni ,能替代 npm/yarn/pnpm ?簡單好用!源碼揭秘!
    原理github 倉庫 ni#how[6]ni 假設您使用鎖文件(並且您應該)在它運行之前,它會檢測你的 yarn.lock / pnpm-lock.yaml / package-lock.json 以了解當前的包管理器
  • 全方位解讀 package.json
    平常在工作中,對package.json這個文件的接觸非常非常少。一些同學可能還會看一下script裡面有什麼命令,執行了哪些方法。又或者了解一下dependencies和devDependencies其他大部分的同學可能直接就npm i和npm start就開始工作了。
  • 在 Docker 中如何高效部署 Node Server
    此時在 package.json 中抽象一層,通過 npm start 啟動服務,方便在 Docker 鏡像中配置啟動命令。"scripts": { "start": "node index.js"},但這僅僅是最簡單的 Node 應用,真實環境中還有各種數據存儲、定時任務調度等,暫撇開不談,目前已經足夠了。2.
  • 這還是我最熟悉的package.json嗎?
    前言在上一篇npm init @vitejs/app的背後,僅是npm CLI的冰山一角[1]中,有提到我複習npm主要是從兩個大方向來入手,所以這篇繼續來講講package.json這部分知識,經過這輪複習,也發現了自己的很多不足,之前把常用的命令和配置玩熟了,卻沒關心npm
  • 大前端快閃:package.json文件知多少?
    快閃一:package.json文件知多少如果你使用了nodejs、npm項目、Angular項目等,你都會用到package.json文件,package.json文件是項目的清單文件,package.json在react項目開發和部署階段扮演了重要角色。
  • 復盤node項目中遇到的13+常見問題和解決方案
    話不多說我們開始吧~1. window和mac下設置NODE_ENV變量的問題我們都知道在前端項目中會根據不同的環境變量來處理不同的邏輯, 在nodejs中也一樣, 我們需要設置本地開發環境, 測試環境, 線上環境等, 此時有一直設置環境變量的方案是在package.json中的script
  • NPM命令實用使用技巧總結
    -P同理,開發環境下的依賴安裝,你可以用-D代替--save-devnpm i gulp -D當你不帶任何安裝標誌時,npm 默認將模塊作為依賴項目添加到package.json文件中。如果你不想轉到package.json文件並手動刪除依賴包,則可以用以下方法刪除:npm uninstall vue這個命令會刪除node_modules文件夾及package.json中對應的包
  • 你應該知道的 NPM 知識都在這!
    package.json 如何產生的npm initnpm init 命令用來初始化一個簡單的 package.json 文件,執行該命令後終端會依次詢問 name, version, description 等欄位。n