????????作為一位資深前端開(kāi)發(fā)，我對(duì)npm（Node Package Manager）的使用有著深入的了解。npm是Node.js的包管理器，用于安裝、管理和刪除各種前端庫(kù)和工具?，F(xiàn)在，讓我們深入了解npm在Vue、React、Angular和Vue 3項(xiàng)目中的一些基本使用方法和配置。
npm命令概述
npm提供了一系列命令，用于管理項(xiàng)目的依賴、運(yùn)行腳本、發(fā)布包等。以下是一些常用的npm命令：
-
npm install：安裝項(xiàng)目的依賴。 -
npm start：運(yùn)行項(xiàng)目。 -
npm run：運(yùn)行在package.json中定義的腳本。 -
npm test：運(yùn)行測(cè)試。 -
npm run build：構(gòu)建項(xiàng)目，通常用于生產(chǎn)環(huán)境。 -
npm publish：發(fā)布包到npm倉(cāng)庫(kù)。
首先，在使用npm命令之前，確保你已經(jīng)安裝了Node.js和npm（Node.js的包管理器）。
Vue項(xiàng)目
在Vue項(xiàng)目中，package.json文件通常會(huì)包含如下腳本：
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
}-
npm run serve：?jiǎn)?dòng)開(kāi)發(fā)服務(wù)器，監(jiān)聽(tīng)文件變化并自動(dòng)刷新瀏覽器。 -
npm run build：構(gòu)建生產(chǎn)環(huán)境的靜態(tài)資源。
步驟示例
? ? ? ? 1.你可以通過(guò)Vue CLI（Vue的命令行工具）來(lái)創(chuàng)建一個(gè)新的Vue項(xiàng)目。在命令行中運(yùn)行以下命令：
# 安裝Vue CLI（如果尚未安裝）
npm install -g @vue/cli
# 創(chuàng)建一個(gè)新的Vue項(xiàng)目
vue create my-vue-project接下來(lái)，Vue CLI會(huì)提示你選擇預(yù)設(shè)或者手動(dòng)選擇特性。選擇你需要的配置，或者手動(dòng)選擇并配置你想要的插件和特性。
? ? ? ? 2.一旦項(xiàng)目創(chuàng)建完成，進(jìn)入項(xiàng)目目錄：
cd my-vue-project現(xiàn)在，你可以查看項(xiàng)目的package.json文件，它應(yīng)該包含如下腳本：
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
}如你所見(jiàn)，serve腳本對(duì)應(yīng)的是vue-cli-service serve命令，這就是用來(lái)啟動(dòng)開(kāi)發(fā)服務(wù)器的命令。
現(xiàn)在，你可以運(yùn)行以下命令來(lái)啟動(dòng)開(kāi)發(fā)服務(wù)器：
npm run serve這將會(huì)啟動(dòng)一個(gè)本地開(kāi)發(fā)服務(wù)器，默認(rèn)運(yùn)行在http://localhost:8080/。你的瀏覽器會(huì)自動(dòng)打開(kāi)一個(gè)新的標(biāo)簽頁(yè)顯示這個(gè)地址，并且服務(wù)器會(huì)監(jiān)視你的文件更改，當(dāng)你保存文件時(shí)，頁(yè)面會(huì)自動(dòng)重新加載以顯示更新后的內(nèi)容。
開(kāi)發(fā)服務(wù)器還提供了熱重載（Hot Module Replacement）功能，這意味著你可以在不刷新整個(gè)頁(yè)面的情況下更新部分組件，從而加速開(kāi)發(fā)過(guò)程。
????????記住，這只是一個(gè)簡(jiǎn)單的示例。實(shí)際的Vue項(xiàng)目可能會(huì)包含更多的文件和目錄，以及更復(fù)雜的配置。但是，無(wú)論項(xiàng)目規(guī)模如何，npm run serve命令都是用來(lái)啟動(dòng)本地開(kāi)發(fā)服務(wù)器的標(biāo)準(zhǔn)方式。
React項(xiàng)目
React項(xiàng)目通常使用Create React App（CRA）初始化，其package.json中的腳本如下：
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}-
npm start：?jiǎn)?dòng)開(kāi)發(fā)服務(wù)器。 -
npm run build：構(gòu)建生產(chǎn)環(huán)境的靜態(tài)資源。
步驟示例
在React項(xiàng)目中，使用npm start命令來(lái)啟動(dòng)本地開(kāi)發(fā)服務(wù)器的原因與Vue項(xiàng)目類似，主要是因?yàn)轫?xiàng)目構(gòu)建工具（如Create React App）為開(kāi)發(fā)者提供了一個(gè)方便的啟動(dòng)腳本。這個(gè)腳本通常被配置在項(xiàng)目的package.json文件中，作為項(xiàng)目的默認(rèn)啟動(dòng)命令。
npm start命令背后通常對(duì)應(yīng)的是react-scripts start，這是由Create React App生成的React項(xiàng)目默認(rèn)使用的腳本。這個(gè)腳本會(huì)啟動(dòng)一個(gè)開(kāi)發(fā)服務(wù)器，并帶有一些有用的特性，如熱模塊替換（Hot Module Replacement）和源代碼映射（Source Maps），以提高開(kāi)發(fā)效率。
以下是一個(gè)簡(jiǎn)單的React項(xiàng)目示例，展示如何使用npm start命令啟動(dòng)開(kāi)發(fā)服務(wù)器：
? ? ? ? 1.首先，確保你已經(jīng)安裝了Node.js和npm。
? ? ? ? 2.使用Create React App快速創(chuàng)建一個(gè)新的React項(xiàng)目：
npx create-react-app my-react-project????????3.進(jìn)入項(xiàng)目目錄：
cd my-react-project? ? ? ? 4.查看package.json文件，你將看到如下腳本
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}? ? ? ? 5.運(yùn)行npm start命令來(lái)啟動(dòng)開(kāi)發(fā)服務(wù)器：
npm start這個(gè)命令會(huì)啟動(dòng)一個(gè)本地開(kāi)發(fā)服務(wù)器，監(jiān)聽(tīng)文件變化，并在瀏覽器中自動(dòng)打開(kāi)應(yīng)用。默認(rèn)情況下，服務(wù)器運(yùn)行在http://localhost:3000。
- 現(xiàn)在你可以編輯
src目錄下的React組件，保存文件后，頁(yè)面會(huì)自動(dòng)刷新以顯示更新后的內(nèi)容，這得益于熱模塊替換功能。
npm start命令方便之處在于它封裝了所有必要的配置和步驟，讓開(kāi)發(fā)者可以專注于編寫(xiě)代碼，而不需要擔(dān)心如何設(shè)置開(kāi)發(fā)環(huán)境。同時(shí)，由于這是Create React App等工具的標(biāo)準(zhǔn)做法，因此它也確保了跨項(xiàng)目的一致性。
????????需要注意的是，如果你使用的是自定義設(shè)置或不同的構(gòu)建工具（如Next.js、Gatsby等），啟動(dòng)命令可能會(huì)有所不同。但是，npm start作為默認(rèn)啟動(dòng)命令的做法在React社區(qū)中非常普遍。
Angular項(xiàng)目
Angular CLI用于創(chuàng)建和管理Angular項(xiàng)目，其package.json中的腳本如下：
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
}-
npm/ng start：?jiǎn)?dòng)開(kāi)發(fā)服務(wù)器。 -
npm/ng run build：構(gòu)建生產(chǎn)環(huán)境的靜態(tài)資源。
? pm start?命令實(shí)際上是調(diào)用了在?package.json?文件中定義的?scripts?部分的?start?腳本。對(duì)于 Angular 項(xiàng)目，當(dāng)你運(yùn)行?npm start?時(shí)，實(shí)際上是調(diào)用了?ng serve?命令。ng serve?命令會(huì)啟動(dòng) Angular 的開(kāi)發(fā)服務(wù)器，并監(jiān)聽(tīng)文件變化。當(dāng)檢測(cè)到文件更改時(shí)，它會(huì)自動(dòng)重新編譯和重新加載應(yīng)用，而無(wú)需手動(dòng)刷新瀏覽器。
????????此外，ng serve?默認(rèn)還會(huì)啟動(dòng) LiveReload，這意味著當(dāng)你保存文件時(shí)，瀏覽器會(huì)自動(dòng)刷新以顯示最新的更改
Vue 3項(xiàng)目
Vue 3項(xiàng)目與Vue 2項(xiàng)目在npm命令的使用上非常相似。Vue CLI也支持Vue 3，因此package.json中的腳本可能與Vue 2項(xiàng)目類似。
配置
package.json文件是npm命令的主要配置文件。你可以在其中定義自己的腳本，例如：
"scripts": {
"start": "node app.js",
"custom-build": "webpack --mode production"
}這樣，通過(guò)npm start和npm run custom-build，你可以運(yùn)行自定義的命令。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-826503.html
????????總之，npm命令是前端開(kāi)發(fā)中不可或缺的一部分，它幫助開(kāi)發(fā)者管理項(xiàng)目的依賴、運(yùn)行腳本、構(gòu)建項(xiàng)目等。通過(guò)熟悉和掌握npm命令，開(kāi)發(fā)者可以更加高效地進(jìn)行前端開(kāi)發(fā)。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-826503.html
到了這里，關(guān)于前端主流框架：項(xiàng)目運(yùn)行命令 npm 詳解的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
