前端码易

1、 整体结构

学习之前，我们首先一起来学习一下项目的整体结构。

大概的目录如下

1
# + 表示文件夹 - 表示文件

2
+ node_modules

3
+ public

4
+ src

5
- .gitignore

6
- .eslint.config.js

7
- index.html

8
- package.json

9
- README.md

10
- tsconfig.json

11
- vite.config.ts

2、 node_modules

node_modules 是项目所有依赖包的安装位置。我们的项目依赖配置在 package.json 文件中，当我们执行 npm i 时，所有的依赖包都会安装到 node_modules 文件中去。

当我们在模块中使用如下代码时

1
import {useState} from 'react'

2
import lodash from 'lodash'

3


4
...

此时构建工具会模拟 node.js 的模块查找规则，自动从同级目录的 node_modules 文件夹中查找是否存在该模块。他的查找顺序为

  1. 检查当前目录的 node_modules
  2. 若未找到，逐级向上查找父目录的 node_modules，直到项目根目录
  3. 最终在全局安装的 node_modules（如果有配置）中查找

在我们的前端项目中，通常情况下仅会在项目根目录中包含 node_modules 文件夹。例如我们要找到的 react 模块放在 node_modules/react 中。

当在 node_modules 文件夹中找到了依赖包文件之后，此时的三方依赖包通常会在自己项目的 package.json 文件中设置模块入口文件。例如在 React 中，通过字段 main 来设置。

node_modules/react/package.json
1
{

2
  "name": "react",

3
  "description": "React is a JavaScript library for building user interfaces.",

4
  "keywords": [

5
    "react"

6
  ],

7
  "version": "19.0.0",

8
  "main": "index.js",

9
  ...

10
}

掌握这些基础知识，我们可以非常准确的定位到三方依赖的模块代码。

3、 public

public 是一个非常特殊的文件夹。用于存放不需要经过构建处理的静态资源，这些资源会直接被复制到构建输出的根目录中，开发者可以通过根路径直接访问它们。

例如，我们有一个 logo.png 存放在 public 目录中

1
+ public

2
  + images

3
    - logo.png

4
    - react.svg

5
    - vite.svg

那么在项目代码中，我们就可以直接使用根目录来访问该图片。注意这里的访问目录是 /images/logo.png，而不是 public/images/logo.png。这是因为构建之后，public 下的内容会直接复制到构建根目录中。

<img src="/images/logo.png" alt="" />

在使用的时候，我们一定要住，存放在 public 中的静态资源，一定是你非常明确不需要进行任何处理和优化的静态资源。例如字体文件、已经被压缩过的三方依赖包等

常见的使用场景如下

1
+ public

2
  - favicon.ico

3
  + fonts

4
    - font.woff2

5
    - font.tto

6
  + documents

7
    - manual.pdf

项目构建之后输出结果为

1
+ dist

2
  - favicon.ico

3
  + fonts

4
    - font.woff2

5
    - font.tto

6
  + documents

7
    - manual.pdf

4、 src 目录

这是项目的核心目录，我们开发项目时，所编写的项目几乎都是存放在该项目中，包括组件、样式、工具函数、配置文件等等。它是开发过程中最主要的目录，所有需要经过 Vite 构建工具处理的代码和资源都应该放在这里。

在自动创建的 react 项目中，src 目录中的 main.tsx 是项目的入口文件

main.tsx
1
import { StrictMode } from 'react'

2
import { createRoot } from 'react-dom/client'

3
import './index.css'

4
import App from './App.tsx'

5


6
createRoot(document.getElementById('root')!).render(

7
  <StrictMode>

8
    <App />

9
  </StrictMode>,

10
)

我们可以看到，在该目录中，代码是通过模块化的方式组织（如 ES Modules 或 CommonJS） 组织起来的。我们会大量运用到 import export require 等模块相关的语法。

5、 index.html

在项目根目录中，我们还发现了一个比较重要的文件 index.html. index.html 是项目的入口 HTML 文件，也是 Vite 开发服务器和构建过程的起点。它扮演着至关重要的角色，既是应用的页面骨架，也是 Vite 注入脚本和资源的入口。

vite 会将所有资源打包并注入到该文件中。

1
<link rel="stylesheet" href="/assets/style.abc123.css" />

2
<script type="module" src="/assets/main.xyz456.js"></script>

我们也可以手动在 index.html 中新增一些代码，例如，配置 viewport ，引入第三方已经打包好的静态资源等。

index.html
1
<!doctype html>

2
<html lang="zh">

3
  <head>

4
    <meta charset="UTF-8" />

5
    <link href="https://framerusercontent.com/images/YRd2KCq4G2aXNg15aHvl7AtcGQ.png" rel="icon" media="(prefers-color-scheme: light)">

6
    <link rel="stylesheet" href="https://rsms.me/inter/inter.css">

7
    <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1, user-scalable=no" />

8
    <meta name="mobile-web-app-capable" content="yes">

9
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

10
    <title>usehook - 这波能反杀</title>

11
  </head>

12
  <body>

13
    <div id="root"></div>

14
    <script type="module" src="/src/main.tsx"></script>

15
  </body>

16
</html>
上一篇
3、创建React项目
下一篇
4、项目结构 . 下
专栏首页
到顶
专栏目录