This is the 9th day of my participation in the August Wen Challenge.More challenges in August

Why use Vite

https://cn.vitejs.dev/

It improves efficiency during development.

Vite lets the browser take over some of the packaging, providing the source code in a native ESM format. So Vite only needs to translate the source code when the browser requests it and make it available on demand, dynamically importing the code according to the situation, meaning it will only be processed if it is used on the current screen.

The installation

npm init vite@latest
yarn create vite
Copy the code

Specify the project name and the template you want to use directly with additional command-line options. For example, to build a Vite + React-ts project, run:

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

# yarn
yarn create vite my-vue-app --template react-ts
Copy the code

The react project looks similar to the webpack project, except that index.html is not in the public folder and main. TSX is in the SRC folder.

Points to note (vs. Webpack)

Different construction concepts

When webPack processes an application, it builds a dependency graph internally to map each module required by the project and generate bundles. Webpack defaults to./ SRC /index.js as the starting point for building the dependency graph. Once at the entry point, WebPack finds out which modules and libraries are (directly and indirectly) dependent on the entry point.

Vite relies on pre-build. / SRC /main.tsx”> Think of index.html as part of the source code and module diagram

In the project we built with WebPack, we run YARN Start to run the project locally. But when we build the project using Vite, we need YARN Run Vite to make our project run properly. Why is that? This is because webPack builds projects where the entry is public/index.html, whereas Vite builds projects where the entry is index.html.

Because of this, we need to differentiate the root directory when configuring TS and ESLint.

Q&A

Tslint error

Error: tsconfig.js cannot be found in code.

Add tsconfigRootDir to the parserOptions field in eslintrc.js: Path.join (__dirname, ‘/ SRC ‘), // Because vite’s main.tsx path is different from webpack’s.

Example:

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'), // Because vite's main. TSX has a different path than Webpack}},]};Copy the code

In the codeImport the React from 'React'An error.

Change to import * as React from ‘React’.