preface

Found on the Internet for more than a year, from the common engineers advanced to senior engineer needs a breakthrough in the technology, and heard a big share in the years later, Vite feels is a hot spot in this year’s technology, so has been discovering since years, to apply to a project on trial with work, have to say that es build is really too fast too acid bright. In September, I sent my resume to Shopee. Just because of my experience in vite practice, I got 400,000 offers, which I would like to share with you here.

PS sells a small advertisement, you can help push shrimp inside, once you become regular, you can push shrimp inside half of the fee, the internal push fee is 15000, in addition, there are 15 days paid annual leave, can be fragrant, welcome friends who need to change jobs

The introduction to Vite can be found in my previous article, which provided a brief introduction to the various capabilities of Vite.

Configuration Vite

It is mainly to configure path mapping, CSS module path mapping, modify entry HTML files, configure hot update plug-ins, etc

//import fs from 'fs'
import * as path from 'path';
import pkg from 'vite';
import reactRefresh from '@vitejs/plugin-react-refresh';
const { defineConfig } = pkg;

const SRC_PATH = path.resolve(__dirname, './src');
export default defineConfig({
  root: SRC_PATH,
  css: {
    modules: {
      globalModulePaths: [`${SRC_PATH}/styles/common/`],},preprocessorOptions: {
      scss: {
        includePaths: [`${SRC_PATH}/styles/common/`],},sass: {
        includePaths: [`${SRC_PATH}/styles/common/`],}}},resolve: {
    dedupe: [path.resolve(__dirname, './node_modules/react-pdf')].alias: [{find: 'assets/'.replacement: `${SRC_PATH}/assets/`}, {find: 'components/'.replacement: `${SRC_PATH}/components/`}, {find: 'consts/'.replacement: `${SRC_PATH}/consts/`}, {find: 'data/'.replacement: `${SRC_PATH}/data/`,}]},plugins: [reactRefresh()],
});

Copy the code

Modifying environment Variables

There are two main problems:

1. Vite requires environment variables to be stored in the “.module.env” environment variables file; Const env = require(${env}.json); Is called by

2. Vite accesses environment variables through import.meta. The name of an environment variable, which is currently accessed primarily through an env object

Therefore, the envs path alias can be used to point to a new ENvs file, where all environment variables are read out using import.meta.env and encapsulated as new env objects, which are then exported to external calls to avoid modifying the environment variable call.

New env.js file

export const ENV_VAR = import.meta.env.VITE_ENV_VAR;
export default {
    ENV_VAR,
}
Copy the code

The main thing here is to adapt the webPack environment variables to the Vite environment variables

Changing the file suffix

There are many cases in the project where JSX is used in js files. Using esbuild will cause errors, so you need to manually change the suffix of the error file (this is also required when upgrading TS). Consider fixing this issue with vscode’s quick fix feature.

There are no good automation solutions in mind.

Modify the style

The main problems are as follows

  1. Vite only supports className attributes, and currently the project is writing styleName, which is converted to className via Babel, so we need to change all styleName to className, there are more than 1100 places in total. About 100 of them need to be changed manually, and the rest can be replaced with simple regex. (This is also required when upgrading TS.)

Attach my regular /styleName='([A-za-z0-9 -_]*)’$/

  1. Vite needs to append style files to.module, such as *.module. SCSS, and use scripts to replace file suffixes and references in code
  2. Since the filename of the common style file is also changed, the reference to the common style file in the.scss file needs to be changed as well

Modify the routing

Because lazy loading is already implemented with the react.lazy + import() import file in the project, and there is no way to import components using es Module import() in React (this will result in an error), there are no changes to the routing code.

Adaptive dependency library

There are some personal projects that lack maintenance in the project dependency. Some of these projects do not conform to the es Module syntax, and the Vite runtime will report errors, so the dependency library needs to be adapted.

There are three ways to do it

  1. Using Monorepo, you can fork the code that depends on the library into a sub-project, adapt the code in the sub-project, and link it to the main project as the source code.
  2. The library code is copied directly into the project, but may behave differently due to changes in dependencies
  3. Replace it with a well-known, large-team maintained library, and modify the calls to the library

Modify project code

This focuses on dealing with required in the code, for example

const request = require(.. /request);

to

import request from '.. /request';

See the project runtime error, error – oriented programming

The deployment of

There are two options:

  • The first option: use Vite only in your local development environment

If you take this approach, the transformation is complete. Vite does not support WebPack packaging, and Rollup does not support webPack in some production features such as code splitting, so it is better to use WebPack for production packaging.

  • Second option: Use Vite both locally and online

We know that Vite is only a code loading tool, but it does not package code. The official recommendation of Vite is to use rollup to package the code. How to change the configuration from WebPack to rollup

Secondly, for some webpack plug-ins, we should also look for alternative solutions, such as @Sentry /webpack-plugin in Webpack, which is used to upload Sourcemap during packaging. Shell scripts can be used to complete the upload of Sourcemap during packaging.

There is also the fork-ts-checker-webpack-plugin, which displays TS compilation errors on the screen. Because Vite uses esbuild to complete TS translation, it is fast but loses the ability to judge types.

  1. You can ask a member’s vscode to install a plug-in that highlights ts type errors

  2. Reject commits with ts type errors in git pre-commit hooks.

  3. An error was encountered while configuring live environment packaging to terminate the build

Considering that the code amount of word transformation is very large, which may introduce bugs, it is recommended to transform only one Web project at a time, and adopt grayscale publishing to reduce the harm of introducing bugs as much as possible

Those of you who aren’t interested in the process can just read the end

Having worked in an Internet company for a whole year, I have to say that Internet companies are not as pure as I imagined. In order to achieve long-term development, interpersonal relationship should not be ignored in addition to technical ability.

In terms of technology, I think there are three stages

  1. Write business, write business well, reduce their own bugs, increase stability, etc., which corresponds to the junior engineer
  2. Refer to the mainstream technology in the industry and introduce it into their own work projects. For example, I applied Vite to my work, which is considered as a senior engineer
  3. Looking for demands in work, such as ANTD, Git and Tencent conference, are all demands in work. However, it is very difficult to dig out and develop a product that can support a department or even a company. At this stage, it is basically the management