ToB企服应用市场:ToB评测及商务社交产业平台

标题: 前端主流框架：项目运行命令 npm 详解 [打印本页]

作者: 农民 时间: 2024-7-20 14:59
标题: 前端主流框架：项目运行命令 npm 详解
作为一位资深前端开发，我对npm（Node Package Manager）的使用有着深入的了解。npm是Node.js的包管理器，用于安装、管理和删除各种前端库和工具。现在，让我们深入了解npm在Vue、React、Angular和Vue 3项目中的一些基本使用方法和设置。
npm命令概述

npm提供了一系列命令，用于管理项目的依靠、运行脚本、发布包等。以下是一些常用的npm命令：

npm install：安装项目的依靠。
npm start：运行项目。
npm run：运行在package.json中定义的脚本。
npm test：运行测试。
npm run build：构建项目，通常用于生产环境。
npm publish：发布包到npm堆栈。

首先，在使用npm命令之前，确保你已经安装了Node.js和npm（Node.js的包管理器）。
Vue项目

在Vue项目中，package.json文件通常会包含如下脚本：

"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
}

复制代码

npm run serve：启动开发服务器，监听文件变化并自动刷新浏览器。
npm run build：构建生产环境的静态资源。

步调示例

1.你可以通过Vue CLI（Vue的命令行工具）来创建一个新的Vue项目。在命令行中运行以下命令：

# 安装Vue CLI（如果尚未安装）
npm install -g @vue/cli
# 创建一个新的Vue项目
vue create my-vue-project

复制代码

接下来，Vue CLI会提示你选择预设或者手动选择特性。选择你需要的设置，或者手动选择并设置你想要的插件和特性。
2.一旦项目创建完成，进入项目目次：

cd my-vue-project

复制代码

现在，你可以检察项目的package.json文件，它应该包含如下脚本：

"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
}

复制代码

如你所见，serve脚本对应的是vue-cli-service serve命令，这就是用来启动开发服务器的命令。
现在，你可以运行以下命令来启动开发服务器：

npm run serve

复制代码

这将会启动一个本地开发服务器，默认运行在http://localhost:8080/。你的浏览器会自动打开一个新的标签页表现这个地点，而且服务器会监督你的文件更改，当你生存文件时，页面会自动重新加载以表现更新后的内容。
开发服务器还提供了热重载（Hot Module Replacement）功能，这意味着你可以在不刷新整个页面的环境下更新部分组件，从而加快开发过程。
记住，这只是一个简单的示例。现实的Vue项目可能会包含更多的文件和目次，以及更复杂的设置。但是，无论项目规模如何，npm run serve命令都是用来启动本地开发服务器的标准方式。
React项目

React项目通常使用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：启动开发服务器。
npm run build：构建生产环境的静态资源。

步调示例

在React项目中，使用npm start命令来启动本地开发服务器的原因与Vue项目类似，主要是由于项目构建工具（如Create React App）为开发者提供了一个方便的启动脚本。这个脚本通常被设置在项目的package.json文件中，作为项目的默认启动命令。
npm start命令背后通常对应的是react-scripts start，这是由Create React App生成的React项目默认使用的脚本。这个脚本会启动一个开发服务器，并带有一些有用的特性，如热模块替换（Hot Module Replacement）和源代码映射（Source Maps），以提高开发效率。
以下是一个简单的React项目示例，展示如何使用npm start命令启动开发服务器：
1.首先，确保你已经安装了Node.js和npm。
2.使用Create React App快速创建一个新的React项目：

npx create-react-app my-react-project

复制代码

3.进入项目目次：

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.运行npm start命令来启动开发服务器：

npm start

复制代码

这个命令会启动一个本地开发服务器，监听文件变化，并在浏览器中自动打开应用。默认环境下，服务器运行在http://localhost:3000。

现在你可以编辑src目次下的React组件，生存文件后，页面会自动刷新以表现更新后的内容，这得益于热模块替换功能。

npm start命令方便之处在于它封装了全部必要的设置和步调，让开发者可以专注于编写代码，而不需要担心如何设置开发环境。同时，由于这是Create React App等工具的标准做法，因此它也确保了跨项目的一致性。
需要注意的是，假如你使用的是自定义设置或不同的构建工具（如Next.js、Gatsby等），启动命令可能会有所不同。但是，npm start作为默认启动命令的做法在React社区中非常普遍。

Angular项目

Angular CLI用于创建和管理Angular项目，其package.json中的脚本如下：

"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
}

复制代码

npm/ng start：启动开发服务器。
npm/ng run build：构建生产环境的静态资源。

pm start 命令现实上是调用了在 package.json 文件中定义的 scripts 部分的 start 脚本。对于 Angular 项目，当你运行 npm start 时，现实上是调用了 ng serve 命令。ng serve 命令会启动 Angular 的开发服务器，并监听文件变化。当检测到文件更改时，它会自动重新编译和重新加载应用，而无需手动刷新浏览器。
别的，ng serve 默认还会启动 LiveReload，这意味着当你生存文件时，浏览器会自动刷新以表现最新的更改
Vue 3项目

Vue 3项目与Vue 2项目在npm命令的使用上非常相似。Vue CLI也支持Vue 3，因此package.json中的脚本可能与Vue 2项目类似。
设置

package.json文件是npm命令的主要设置文件。你可以在其中定义自己的脚本，例如：

"scripts": {
"start": "node app.js",
"custom-build": "webpack --mode production"
}

复制代码

这样，通过npm start和npm run custom-build，你可以运行自定义的命令。

总之，npm命令是前端开发中不可或缺的一部分，它帮助开发者管理项目的依靠、运行脚本、构建项目等。通过认识和掌握npm命令，开发者可以更加高效地进行前端开发。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)