vite 构建 react 项目——与 webpack 构建进行对比

本贴最后更新于 955 天前,其中的信息可能已经东海扬尘

为什么使用 vite

https://cn.vitejs.dev/

开发时能提高效率。

vite 让浏览器接管了打包程序的部分工作,以原生 ESM 方式提供源码。所以 vite 只需要在浏览器请求源码时进行转换并按需提供源码,根据情景动态导入代码,即只有在当前屏幕上使用时才会被处理。

安装

npm init vite@latest
yarn create vite

通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如,要构建一个 Vite + React-ts项目,运行:

npm init vite@latest my-vue-app --template react-ts

# yarn
yarn create vite my-vue-app --template react-ts

这样我们就初始化了一个 react 项目,粗看上去和用 webpack 搭建的项目差不多,好像只是 index.html 在不在 public 文件夹当中,和 main.tsx 在 src 文件夹当中。

需要注意的地方(与 webpack 对比)

构建概念不同

webpack 处理应用程序时,会在内部构建依赖图来映射项目需要的每个模块并生成 bundle。webpack 会默认将 ./src/index.js 作为构建依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。

而 vite 的做法是依赖预构建。开发期间 Vite 是一个服务器, index.html 作为入口文件,所以 index.html 中需要有 <script type="module" src="./src/main.tsx"></script> .将 index.html 视为源码和模块图的一部分

我们在 webpack 构建的项目中,运行 yarn start 就能将在本地运行该项目了。但是当我们使用 vite 构建项目后,就需要 yarn run vite 才能使我们项目正常运行起来。这是为什么呢?因为 webpack 构建的项目中,项目的入口是 public/index.html ,而 vite 的项目入口是 index.html

正是因为如此,我们在进行 ts 和 eslint 配置时,需要区别根目录。

常见问题

tslint 报错

代码中出现 找不到 tsconfig.js 的错误。

eslintrc.js 文件中的 parserOptions 字段中添加 tsconfigRootDir: path.join(__dirname, '/src'), // 因为 vite 的 main.tsx 的路径和 webpack 不同

示例:

const { mkdReactConfig } = require('@monkey-design/eslint-config-mkd-react');

const config = mkdReactConfig({});

module.exports = {
  ...config,
  overrides: [
    ...config.overrides,
    {
      files: ['*.ts', '*.tsx'],
      extends: ['plugin:rxjs/recommended'],
      rules: {
        'react/sort-comp': [0],
        'jsx-a11y/click-events-have-key-events': [0],
        'react/require-default-props': ['off'],
        'no-console': 'off',
        'jsx-a11y/interactive-supports-focus': 'off',
        'react/jsx-props-no-spreading': ['off'],
        'no-unnecessary-type-assertion': ['off'],
        'no-debugger': ['off'],
        'react-hooks/exhaustive-deps': [0],
      },
      parserOptions: {
        project: './tsconfig.json',
        tsconfigRootDir: path.join(__dirname, '/src'), // 因为 vite 的 main.tsx 的路径和 webpack 不同
      },
    },
  ],
};

代码中 import React from ‘react’ 报错。

改为 import * as React from 'react' .

  • vite
    5 引用 • 2 回帖
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 444 关注
  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    247 引用 • 1347 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • limanting
    作者

    vite 主要还是提高的开发效率,上线编译和 webpack 差别不大

  • 其他回帖
  • lstrive
    该回帖仅作者和楼主可见