基于vite+react+typescript前端开发工程化（一）—— 基础安装与配置

你看那儿有阳光在飞
1,434 阅读7分钟

导读

  • 基于vite+react+typescript前端开发工程化（一）—— 基础配置
  • 基于vite+react+typescript前端开发工程化（二）—— 代码质量
  • 基于vite+react+typescript前端开发工程化（三）—— 样式管理
  • 基于vite+react+typescript前端开发工程化（四）—— 集成路由
  • 基于vite+react+typescript前端开发工程化（五）—— 数据状态管理
  • 基于vite+react+typescript前端开发工程化（六）—— 单元测试
  • 基于vite+react+typescript前端开发工程化（七）—— 自动化测试
  • 基于vite+react+typescript前端开发工程化（八）—— 性能与异常监控
  • 基于vite+react+typescript前端开发工程化（九）—— 自动化部署

一、配置开发环境

前端的长足发展，得益于node.js的出现和普及。node.js基于javascript语法，天然的语言优势受到前端开发群体的集体青睐。同时node.js自带的npm包管理工具，弥补了一直以来的包管理缺陷。层出不穷的优质工具由此而诞生，出现了如babel、postcss、webpack、vite、gulp、grunt、rollup、lerna等等优秀前端工程管理工具，进一步促进了前端工程化的发展与完善。

前端工程化，离不开node.js，下面我们从安装和配置node.js环境开始，以当前最炙手可热的脚手架工具vite为基础，一步一步讲解基于vite+react+typescript的前端工程化搭建。

现在有很多脚手架，可以一键搭建基本的前端开发环境。但如果想构建完善的、高效率的、规范化的前端开发环境，还需要很多额外工作。

1. 安装配置node.js

1.1 下载node.js

https://nodejs.org/zh-cn/

1.2 安装node.js

https://www.runoob.com/nodejs/nodejs-install-setup.html

1.3 node.js多版本管理

这里我选择的是nvm，简单使用：

nvm list # 查看本地已安装版本
nvm ls-remote # 查看全部node.js版本
nvm add <version> # 安装某版本node.js
nvm uninstall <version> # 卸载某版本node.js
nvm use <version> # 切换使用本地已安装版本node.js

打开命令窗口，默认指定打开固定版本node.js。我使用的IDE是vs code，

1.4 源管理工具nrm

由于网络原因，国内访问npm的官方源很不稳定，可能会频繁的切换npm源地址。需要安装nrm管理npm源

npm install nrm -g
  • 查看nrm命令帮助
nrm --help

// 显示
Usage: nrm [options] [command]

Options:
  -V, --version                           output the version number
  -h, --help                              output usage information

Commands:
  ls                                      List all the registries
  current                                 Show current registry name
  use <registry>                          Change registry to registry
  add <registry> <url> [home]             Add one custom registry
  del <registry>                          Delete one custom registry
  
// and more...
  • 查看默认配置源列表
nrm ls

// 显示
npm -------- https://registry.npmjs.org/
yarn ------- https://registry.yarnpkg.com/
cnpm ------- http://r.cnpmjs.org/
taobao ----- https://registry.npm.taobao.org/
nj --------- https://registry.nodejitsu.com/
npmMirror -- https://skimdb.npmjs.com/registry/
edunpm ----- http://registry.enpmjs.org/
  • 添加新源
nrm add github https://npm.pkg.github.com/
  • 删除指定源
nrm del github

1.5 安装配置Yarn

Yarn 是一个软件包管理器，还可以作为项目管理工具。可以作为npm的替代工具，yarn相对npm有以下优势：

  • 速度超快 Yarn 缓存了每个下载过的包，所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率，因此安装速度更快。

  • 超级安全 在执行代码之前，Yarn 会通过算法校验每个安装包的完整性。

  • 超级可靠 使用详细、简洁的锁文件格式和明确的安装算法，Yarn 能够保证在不同系统上无差异的工作

通过npm即可安装Yarn

npm install --global yarn

yarn --version // yarn 版本

1.6 安装git

Mac系统基于HomeBrew安装

brew install git

Mac系统基于MacPorts安装

sudo port install git

Win系统安装git

见这里

其他安装方法，参考这里

二、安装和配置项目文件

1. 为什么选择vite?

当我们开始构建越来越大型的应用时，需要处理的 JavaScript 代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。我们开始遇到性能瓶颈 —— 使用 JavaScript 开发的工具通常需要很长时间（甚至是几分钟！）才能启动开发服务器，即使使用 HMR，文件修改后的效果也需要几秒钟才能在浏览器中反映出来。

在开发环境，Vite 以 原生 ESM 方式提供源码，节约了大量的代码编译所需要的时间。

2. 开始创建项目

输入以下命令

yarn create vite

1642941031512.jpg

依次选择

  • 项目名称

1642941114891.jpg

  • 选择框架

1642941180362.jpg

  • 选择模版，我们基于typescript

1642941227078.jpg

  • 完成，依次输入以下命令，安装依赖，并启动项目
Done. Now run:

  cd react-ts-shop
  yarn
  yarn dev
  • 最终出现以下界面，表现项目创建成功

3、初步完善目录结构

3.1 vite模版目录结构

这是vite模版典型的项目结构，相对比较简单。下面我们会完善一下目录结构

3.2 目录结构

完善项目目录结构基本如下：

|--src
    |--components # 组件
    |--hooks # hooks
    |--assets # 静态文件
        |--imgs # 图片
        |--fonts # 字体文件
        |--js # js文件
    |--layouts # 布局组件
    |--common # 基础工具
    |--styles # 样式文件
    |--pages # 页面
    |--routes # 路由文件
    |--stores # 状态管理
    |--mian.tsx # 主入口
    |--App.tsx # App文件   
|--tests # 测试文件
|--types # 声明文件
|--index.html
|--tsconfig.json # ts 配置
|--vite.config.ts # vite 配置
|--package.json
|--.gitignore
|--yarn.lock

完善目录结构初步先到这里，后续会随着项目的功能完善，进步添加相关目录和文件。

4. 初始化git

项目根目录下执行命令初始化git，会创建.git目录

git init

配置用户

git config --global user.name "John Doe"
git config --global user.email johndoe@example.com

配置远程仓库，可以选择github、gitee或者公司内部搭建gitlab

以gitee举例，新建仓库后，本地项目根目录下如下操作

因为是已有项目，所以首先在项目根目录下创建和配置.gitignore忽略文件，把不想提交到git仓库的文件忽略掉

node_modules
.DS_Store
dist
dist-ssr
*.local
*-error.log

然后，项目根目录执行下述命令，配置远程仓库并第一次提交。同时会创建README.md文件，用于项目说明

touch README.md
git add README.md
git commit -m "first commit"
git remote add origin xxxxx.git
git push -u origin "master"

5. 配置环境变量

5.1. 默认配置

Vite 使用 dotenv 从你的 根目录中的下列文件加载额外的环境变量。

.env                # 所有情况下都会加载
.env.local          # 所有情况下都会加载，但会被 git 忽略
.env.[mode]         # 只在指定模式下加载
.env.[mode].local   # 只在指定模式下加载，但会被 git 忽略

而且默认情况下只有带Vite_前缀的变量才会被暴露给源代码。源代码里我们可以通过import.meta.env，访问到所有暴露的变量。

VITE_SOME_KEY=123 
DB_PASSWORD=foobar

上面配置，只能访问到import.meta.env.VITE_SOME_KEY

console.log(import.meta.env.VITE_SOME_KEY) // 123
console.log(import.meta.env.DB_PASSWORD) // undefined

5.2. 定制配置

  • envPrefix配置变量前缀
const config = defineConfig({
    // ...
    envPrefix: 'MFE_',
})
  • envDir配置环境变量目录，根目录下创建目录env做为放置环境变量的目录
const envDir = path.resolve(process.cwd(), './env')
const config = defineConfig({
    // ...
    envDir,
    envPrefix: 'MFE_',
})
  • 创建环境变量文件
|--src
   |--env
      |--.env # 放置公用配置
      |--.env.local # 放置敏感配置
      |--.env.development # 放置开发环境配置
      |--.env.production # 放置生产环境配置
   |--//...

6. 配置路径

为了方便书写依赖加载路径，我们配置一下根目录。vite通过resolve选项，配置目录缩写和扩展名。vite.config.js添加如下resolve配置

const config = defineConfig({
    // ...
    resolve: {
      extensions: ['.js', '.ts', '.tsx', '.scss', '.css'],
      alias: {
        '@': path.resolve(__dirname, 'src'),// 源文件根目录
        '@tests': path.resolve(__dirname, 'tests'),// 测试文件根目录
        '@config': path.resolve(__dirname, 'config')// 配置文件根目录
      }
    },
})

同时在tsconfig.json文件中配置compilerOptions选项的path，避免ts语法检查，报找不到路径异常

{
   compilerOptions:{
     // ...
     "paths": {
        "@/*": ["./src/*"],
        "@tests/*": ["./tests/*"],
        "@config/*": ["./config/*"]
     }
  }
}

源码里面可以这样加载依赖

import styles from '@/styles'
import http from '@/common/http'

7. 配置dev服务

vite内置开发服务，可以通过server选项配置静态服务器，vite.config.js添加如下配置

const config = defineConfig({
    // ...
    server: {
      open: true, // 自动打开浏览器
      port: 3002, // 服务端口
      proxy: {
        '/api': 'http://localhost:3006', // api代理路径
        '/mock': 'http://127.0.0.1:4523/mock/797249' // mock代理路径
      }
    },
})

参考

chengpeiquan.com/article/edi…

www.ruanyifeng.com/blog/2016/0…

cloud.tencent.com/developer/a…

juejin.cn/post/684490…

juejin.cn/post/684490…

www.npmjs.com/package/sta…

avatar
文章
阅读
粉丝