前端项目搭建

135 阅读2分钟

一个前端项目首先要有文件package.json,package.json 是一个用于描述项目的配置文件,通常位于项目的根目录下。它是 Node.js 项目中的重要文件,用于管理项目的依赖、脚本和其他配置信息。

package.json 文件中,你可以定义以下内容:

  1. 项目信息:包括项目的名称、版本号、作者、许可证等。
  2. 项目依赖:通过 dependenciesdevDependencies 字段列出项目所依赖的外部模块。这些依赖可以是其他开发者编写的模块,也可以是框架、库等。
  3. 脚本命令:通过 scripts 字段定义可以在命令行中执行的脚本命令。常见的脚本包括启动开发服务器、运行测试、打包项目等。
  4. 项目配置:除了依赖和脚本之外,你还可以在 package.json 中定义其他项目配置,如构建配置、eslint 配置、babel 配置等。

下面是一个简单的 package.json 示例:

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "My project description",
  "author": "John Doe",
  "license": "MIT",
  "dependencies": {
    "express": "^4.17.1",
    "lodash": "^4.17.21"
  },
  "devDependencies": {
    "nodemon": "^2.0.12",
    "eslint": "^7.32.0"
  },
  "scripts": {
    "start": "node index.js",
    "dev": "nodemon index.js",
    "test": "eslint src"
  }
}

要想起来一个项目,首先要先下载项目所需要的包,这些包就是上面的项目依赖,如果不安装,直接运行就会报错 比如sh: cross-env: command not found

所以要执行

npm install

这个命令实际做了什么呢?

执行 npm install 实际上会进行以下操作:

  1. 读取 package.json 文件:npm 会读取当前目录下的 package.json 文件,确定项目所需的依赖包和版本范围。

  2. 下载依赖包:npm 会根据 package.json 文件中的依赖信息,从 npm 仓库或配置的其他源(如私有源)下载所需的依赖包。npm 会根据 package-lock.json(如果存在)或 npm-shrinkwrap.json 文件来确定下载的确切版本。

  3. 安装依赖包:下载完成后,npm 会将依赖包安装到项目的 node_modules 目录下。每个依赖包都会被安装在自己的子目录中。

  4. 解析依赖关系:npm 会解析依赖包之间的依赖关系,并确保每个依赖包都能正确加载所需的依赖项。

  5. 执行钩子脚本:如果在 package.json 文件中定义了 postinstall 等钩子脚本,npm 会在安装完成后执行这些脚本。这些脚本可以用于执行额外的构建步骤或设置项目环境。

总的来说,npm install 命令用于下载和安装项目所需的依赖包,确保项目能够顺利运行。执行该命令后,你可以在项目目录下的 node_modules 目录中找到已安装的依赖包。

这个时候就会看到之前入过没有node_modules这个文件夹,现在本地根目录下会多这个文件夹

image.png