用vite搭建React+ts项目，爽的飞起！

弱小的切图仔
2,682 阅读5分钟

用vite搭建React+ts项目，爽的飞起！

1.使用vite搭建react+ts项目

1.1 创建项目

这里我选择了两个包管理工具，npm和pnpm，他们两者的主要区别在于处理包的方式，下一小节我会总结一下。

  1. npm

    //新建项目
npm create vite@latest React+ts

//选React，React-ts

//然后安装依赖，运行
npm i
npm run dev

  2. pnpm

    //新建项目
pnpm create vite

//运行
pnpm i
pnpm run dev

没啥区别，大差不差。

1.2 npm和pnpm的区别

这两者都是包管理工具，主要就是处理包的方式不同，于我而言我还是喜欢npm的，主要是一开始学的时候npm就先入为主了，不想换其他的，下面从几个方面总结一下两者区别：

  1. 处理依赖包的方式：npm和pnpm的最大区别在于它们如何处理依赖包。在使用npm时，所有包都将下载和缓存到本地node_modules文件夹中。而当你使用pnpm时，它将每个依赖包放到单独的文件夹中，这些文件夹保存在全局缓存中。这使得pnpm能够实现更快的速度和更小的磁盘占用。
  2. 安装依赖的速度：由于pnpm能够重用全局缓存中的依赖项，因此在执行多次安装时，pnpm的速度通常比npm更快。这也意味着当升级一个包时，pnpm只需要安装需要更新的包，而不需要安装整个依赖树。
  3. 共享依赖：使用npm时，每个项目都拥有自己的node_modules文件夹，这会导致磁盘空间浪费。相反，pnpm支持共享依赖，这意味着多个项目可以共享同一个全局缓存，从而减少了硬盘空间的使用。这对于多个项目在同一台机器上运行的情况非常有用。

总的来说，npm和pnpm都是很好用的包管理工具，具体选择哪个取决于你的实际需求和个人喜好。如果你想减少磁盘空间占用和加快重复构建的速度，可以考虑使用pnpm；如果你习惯使用npm，并且对磁盘空间占用不那么敏感，npm仍然是一个很好的选择。

1.3 vite和webpack的区别

虽说以前都用webpack搭react，但是webpack实在是太慢了，而且在实际使用的时候，我目前到没有遇到无法解决的痛点，唯一的感觉就是快！！！

下面从一下几方面总结了一下vite和webpack的优缺点：

  1. 构建速度：Vite是基于现代浏览器原生 ES 模块解析方式构建，不需要打出中间包，因此它在热更新、构建速度等方面都比Webpack更快。
  2. 开发体验：Vite使用了原生模块化的开发方式，不需要像Webpack那样预处理，因此在开发体验上更加灵活。Vite还支持开箱即用的TypeScript支持和Vue单文件组件的开发，使得开发更加高效和符合直觉。
  3. 打包功能：虽然Vite在开发体验和构建速度方面更优秀，但是它并不能取代Webpack的打包功能。Webpack的打包能力更强大，支持多种打包方式，例如代码分割、异步加载等，适用于大型项目的开发。

总的来说，Vite更偏向于开发体验和快速开发，提供了更好的开箱即用的Vue单文件组件和TypeScript支持，而Webpack则更偏向于打包功能和应用于大型项目的开发。

2. 配置vite和ts的alias别名@/

2.1 配置流程

  1. 首先在项目根目录下tsconfig.json文件(没有就自己创建一个)添加以下代码，在 compilerOptions 中添加baseUrl 属性，将其设置为 .。然后添加 paths 属性，将 @ 映射到项目根目录下的 src 目录。最后，在 include 中添加 TypeScript 文件的目录，以支持别名，这样导包的时候就不用加后缀了：

    {
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
  "include": ["src/**/*.ts", "src/**/*.tsx"]
}

  2. 然后在Vite的配置文件vite.config.ts中添加以下代码，使用 resolve.alias 在 vite.config.js 中为文件创建别名。在 alias 属性中，将 @ 映射到项目根目录的 src 目录：

    import path from 'path';

export default {
  // ...其他配置项
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
}

    现在就可以在项目开发的时候使用@代替项目根目录作为导入路径的前缀了，比如我要导入src/components/ExampleComponent.tsx组件，之前使用绝对路径：

    import ExampleComponent from '/src/components/ExampleComponent'

    或者相对路径：

    import ExampleComponent from '../../../components/ExampleComponent'

    现在就可以使用@代替啦，如下所示：

    import ExampleComponent from '@/components/ExampleComponent';

2.2 配置alias的好处

alias 是一种将导入文件时使用的路径映射成一个容易识别的短名称的方法。

其主要好处是可以使导入文件时更加方便，避免了过深的嵌套路径和相对路径引用的困扰，使代码更加易读和易于维护。

如果没有设置别名，那么在导入文件时，如果文件层级比较深，那么导入路径也相应变得很长。使用相对路径引入文件时，还需要根据当前文件所处的目录层级，使用相应数量的 ../ 返回到根目录，这样很容易出现路径错误。而使用别名可以避免这些 PATH 相关的问题，让代码更加整洁和清晰。

例如，在一个具有如下目录结构的 React 项目中：

my-app/
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    index.tsx
    App.tsx
    views/
      Main.tsx
    components/
      BaseComponent.tsx
  tsconfig.json

设置以下别名之后：

{
  "compilerOptions": {
    // 其他配置
    "baseUrl": "src",
    "paths": {
      "~/*": ["./"],
      "@/*": ["./src/*"]
    }
  }
}

就可以使用 ~ 作为别名来导入项目中任意文件，例如：

import Main from '~/views/Main'
import BaseComponent from '~/components/BaseComponent'

也可以使用 @ 作为别名来导入项目中 src 目录下的任意文件：

import Main from '@/views/Main'
import BaseComponent from '@/components/BaseComponent'

甚至你还可以配置@views或者@components来进一步缩短路径。

avatar
文章
阅读
粉丝