Recently, WHEN I was writing a large project, I found that the compilation process was very slow and long. In order to improve the development experience and learn about Vite, I tried to use Vite to start a development service in the WebPack + React project. After a whole afternoon, I finally succeeded. Don’t talk nonsense, turn round

If you use typescript in your project, there are only four steps:

1. Install dependencies

yarn add -D vite @vitejs/plugin-react

2. Add a configuration file

Add the vite. Config. js file to the project root directory and write to

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { resolve } from 'path';
 
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: { // Configure the alias
      The '@': resolve('src'),}}});Copy the code

See more vite configurations

Add the entry file

Make a copy of the index.html file in public and place it in the project root directory

<div id="root"></div>
<script>
  window.process = {
    env: {
      REACT_APP_ENV: 'test'}}</script>
<script type="module" src="/src/index.tsx"></script>
Copy the code

Add scripts command

Add the dev command to package.json

"scripts": {
    "dev": "vite"
}
Copy the code

After configuring the above four steps, my Webpack + React + typescript project is ready to start development services using Vite via YARN Dev.

However, when I use typescript confidently in an older project that doesn’t use typescript, I get a lot of errors. Let’s fix them:

JSX syntax is not recognized

This is because vite only parses JSX syntax for.ts.tx.jsx files by default, so if JSX is written in a js file in your project, Vite will report an error

The solution

When I saw this error, I subconsciously thought of changing js files to JSX, but AFTER looking at hundreds of JS files in the project, I was silent, there must be a better solution, and finally I found a better solution in the issues of Vite. Add the following configuration to viet.config.js to enable esBuild precompilation to recognize JSX in js files

optimizeDeps: {
    esbuildOptions: {
      plugins: [{name: 'load-js-files-as-jsx'.setup(build) {
            build.onLoad({ filter: /src/.*.js$/ }, async args => ({
              loader: 'jsx'.contents: await fs.readFile(args.path, 'utf8'),})); },},],},},Copy the code

But I tried it out in my project and it didn’t work, so I finally solved the problem with a Babel plugin: @babel/plugin-transform-react-jsx

plugins: [
    react({
      babel: {
        plugins: ['@babel/plugin-transform-react-jsx']],}}),Copy the code

Error 2. The postCSS 8 version is incorrect

Postcss version conflicts (PostCSS version 8 is referenced in vite)

The solution

Specify the pastCSS version in resolution in package.json

"resolutions": {
    "postcss": "^ 8.4.6",},Copy the code

Error 3: Inline JavaScript is not enabled

The solution

Add CSS configuration in viet.config. js

css: {
  preprocessorOptions: {
    less: {
      javascriptEnabled: true,}}},Copy the code

错 误 four: require is not defined

Require is used in the project, vite does not support it

The solution

Install @Originjs/Vite-plugin-commonJS plugin

yarn add -D @originjs/vite-plugin-commonjs

2. Use plug-ins in viet.config. js

import { viteCommonjs } from '@originjs/vite-plugin-commonjs'; .plugins: [
  react({
    babel: {
      plugins: ['@babel/plugin-transform-react-jsx'],
    },
  }),
  viteCommonjs(),
],
Copy the code

Error 5: Vite does not support require.context

// const files = require.context('./models', false, /\.js$/);

The solution

Use import.meta.globeager () instead of require.context

const files = import.meta.globEager('./models/*.js');

The above is the whole process of my experience of Vite in webpack + React project today. If you have any shortcomings, welcome to discuss in the comment section and accept criticism online.