Issue 8: Sharing of Nine Tips on the Front End

Issue 8: Sharing of Nine Tips on the Front End

1. Set the verification of git commit (the husky:^5 version is different from here)

Under normal circumstances, every time we execute git commit -m'submit information', it will trigger the verification of the commit information and the verification of the code style. If the verification is not passed, the commit will fail, then these verifications How did it join the project?

Most of the time to add verification for commit, we will use husky , let's install it:

yarn add husky -D

Add the following content to packgae.json, here is to initialize the .husky/ directory and specify the directory as the directory git hooks is located. The so-called git hooks can be understood as a hook function of git, such as git add execution of git commit after 0619228afafcac, etc. Functions, and git hooks is located is used to define various functions that need to be executed in each life cycle of git

{
  "scripts": {
    "prepare": "husky install"
  }
}

Step 1: add code verification

Next we execute on the command line:

yarn prepare
npx husky add .husky/pre-commit "npm run lint"

The second command above defines pre-commit the life cycle of execution npm run lint phrase command.

lint command defined in packgae.json is to use eslint detect the src folder, of course, any file can be detected.

  "scripts": {
    "lint": "eslint src"
  },

Step 2: Add verification of submitted information

The easiest way to verify the commit is to rely on the package commitlint

yarn add @commitlint/config-conventional @commitlint/cli -D

commitlint.config.js in the root directory and write the following:

module.exports = { 
  extends: ["@commitlint/config-conventional"] 
};

Add a hook to verify the commit:

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

The above command means to create a commit-msg hook, the content inside is npx --no-install commitlint --edit "$1" .

commitlint command to detect $1 the value of the parameter is legitimate, and $1 is our git commit -m ${1} .

Calibration standards

Please refer to the specification document

Here I only list the most commonly used ones:

specification	How to use
docs	git commit -m "docs: update xxx document"
feat	git commit -m "feat: add xxx module"
fix	git commit -m "fix: fixed the online xxxxbug"
style	git commit -m "style: update the style of the user information popup"
test	git commit -m "test: modify the test case for adding a user button"

Is it different from the configuration in your project?

Some students may have discovered that my writing here may be inconsistent with the writing in your project. Your project may be written as follows:

{
  "husky": {
    "hooks": {
      "pre-commit": "npm run test",
      "commit-msg": "commitlint -e $HUSKY_GIT_PARAMS"
    }
  }
}

The above writing method is the writing method husky^6 , and now husky has been updated to version 7, so you may not use this writing configuration to create new projects in the future.

git hook

git official website description hooks

2. ///The use of this kind of comment

We will see the following comment in the react project code, so what is this strange comment?

/// <reference types="react-scripts" />

It turns out that this /// <reference types="包" /> is mainly used in the .d.ts file, the function is to introduce other .d.ts files, for example, I need to use a xxx.d.ts file, but this is not placed in node_modules/@types , So it will not be imported by the system by default.

Interpretation given on ts official website

Three, recommend a react boot plug-in guide

plug-in address

Generally, the first time you visit a website, there will be a guided operation, guide . Let us configure it step by step:

yarn add byte-guide

The central idea of the use of this plugin is that we pass in a set of configurations in the form of an array, find a configuration that contains to be mounted, as well as the displayed copywriting and other information, and then click next every time. Execute the objects in the array in sequence:

import Guide from "byte-guide";

export default function Home() {
  const SEARCH = {
    hotspot: true,
    title: "搜索组件",
    selector: "#search",
    placement: "top-left",
    content: <div>这个搜索组件很厉害</div>,
    offset: { x: 20 },
  };
  const TOTAL = {
    title: "列表总数",
    parent: "#search",
    selector: "#total",
    placement: "right",
    content: "这里是列表总数。",
  };

  return (
    <div className={"org"}>
      <div id={"search"}>目标1</div>
      <div id={"total"}>目标2</div>
      <Guide
        lang="en"
        localKey="uni-key"
        className="my-guide"
        steps={[SEARCH, TOTAL]}
        onClose={() => {
          console.log("点击关闭");
        }}
        afterStepChange={(nextIndex, nextStep) => {
          console.log("点击下一步");
        }}
      />
    </div>
  );
}

Description of main attributes

1. localKey : The display of our boot component is generally displayed only when the user logs in for the first time, or it will never be displayed when the user clicks the end button of the boot. guide stores whether the value of the boot component needs to be displayed in Local Storage , so here Defines the stored key name.
2. placement defines the position of the pop-up box. For example, for the top element, we will choose to use attributes bottom
3. offset is set to placement position is inevitably unsatisfactory, so you can use this attribute to adjust the position of the guide frame.

Precautions

Components built a simple internationalization, that is, when we do not specify a copy, he himself will be based on the incoming language English, Chinese, Japanese copy of change.

This plug-in has a bug. If two elements are in the internal scrolling state of the parent element, there will be a lot of positioning deviation. Therefore, it is not recommended to use this plug-in if your guiding project involves internal scrolling elements.

Fourth, you can comment after eslint 7 version

/* eslint-disable*/ will inevitably appear in the team project. Every time I see it, I will try to delete it, but it may cause a series of chain translations. In this case, if we are using eslint^7 and above, we can add it. Note, explain why /* eslint-disable*/ must be used here.

// eslint-disable-next-line a-rule -- 这里的错误无法修复！

The above wording is more friendly, because after all, this method of prohibiting eslint detection is not recommended for everyone. If you must use it, you need to indicate the reason at the early stage.

Five, unify the advantages and disadvantages of exporting an index file

For example, we have a lot of tools and methods in the same folder, a.js file export a1, a2 and other methods, we often use a index.js file for unified export, there will be many words in the project as follows:

export * from './a';

export * from './b';

export * from './c';

export * from './d';

Although this style of writing seems to be "elegant", it has many drawbacks. Here we will list them:

1: The export name may be duplicated

This is a small problem because there will be ts . The reason is index.js file, so you need to pay attention to whether the index file reports an error every time you modify it.

2: Code routing trouble

This point is also the most unfriendly to operation. For example, we have an external import method on a certain page. If we use a mac computer, click `c
ommand + left mouse button can find the source of this method, but often just find the path to index.js`, there is no specific method name, so you need to go into each file again to query.

3: There is no prompt to change the export

When we modify an export, there is no prompt, such as deleting an export method and modifying the name of an export method. At this time, there will be no index.js file. The error is reported in the file that specifically uses this method. It may be ignored, because git push can be passed without starting the project.

4: Secondary derivation of ts type

Sometimes it appears that you named and exported a method function, but eslint reported that did not export the member, but when we entered the folder of this method, the error of eslint disappeared. This bad experience is related to This way of writing is related.

6. svgr library conversion svg image, filter: drop-shadow

xxx.svg control. If we want to dynamically pass in many configurations, we may need to use the svgr library to convert the svg image into the form of the react component. The code data can be generated on the command line through the following command:

npx @svgr/cli --icon  图片的地址.svg

Generating in the command line is definitely not engineering, in fact, various scaffolding has built-in this svgr library, so we can actually use component mode svg images in the following way.

import { ReactComponent as Logo } from "./logo.svg";

// ....

<Logo width={"30px"} style={{ filter: "drop-shadow(red 20px 0)" }} />  

filter: "drop-shadow(red 20px 0)" sentence 0619228afb09ab can make the svg red, and I will just take an article about its details.

Seven, yarn resolutions manage packages that are dependent on multiple projects

The project will be a lot of references npm package, such as our projects which depend on the A package, A package is itself dependent ^3.1.5 version of B package, we project itself yarn add B already installed ^3.0.5 version of B package, this time B In fact, the package is universal, and there is no need to quote the two versions.

And if it is packaged, the size of the packaged B package will increase due to the different versions of the yarn provides the resolutions , we can configure it as follows (package.json):

  "resolutions": {
    "B": "^3.1.5"
  }

Give a practical example

We create a new project

npx create-react-app 项目名称

Into the project

yarn list --depth=1

List the dependencies of the project, and only print the first-level dependencies. Let's take workbox-build as an example:


We configure it in the outer layer package.json

  "resolutions": {
    "fs-extra": "^4.0.2"
  }

At this time, execute the yarn command, and print yarn list --depth=1

The above dependencies have changed, not just under the workbox-build package.

Eight, pnpm replaces yarn lean for package management

We often use yarn + lean to manage subprojects, but pnpm more suitable for this work pnpm more suitable for that?

yarn management node_modules mechanism will lead, A package depends B package, then B package file location will be in the A package at the same level, which leads though the developer does not perform yarn add B but the project can also be introduced import B from 'B' , This lays down hidden dangers for development.

pnpm adopts the unified management of the package. The node_modules file of a single project stores a soft connection , so that there will be no repeated installation of a dependency, and there is no need to put B and A in the same Hierarchy, there is no inexplicable introduction of B package.

When we have many sub-projects and dependencies become more and more complex, the advantages of pnpm

9. How to start the sub-applications of the micro front end separately

There will be several sub-projects in the micro front-end application. These sub-projects often rely on a main project (shell project). The main project is responsible for distributing some reusable resources, such as react react-router and other public dependencies, and there will also be the main project. Some custom utils tool methods are passed to the sub-project.

Because there are many resources that need to be distributed by the main project, it makes it difficult for the sub-projects to run separately. We have to start at least main project + sub-projects every time, and to see the complete project, we need to start all the remaining sub-projects. Project, but what can we do to only start the sub-project itself?

My approach here is to use the requested proxy, because the principle of most micro front-end frameworks is each sub-project is a 1619228afb0d3d js file. After the main application is started, the js entry file of the sub-project is loaded on demand, then we can access The address of the online test environment online test environment to access the sub-application url , and then url proxy to the address of the sub-project.

The advantage of this is that the sub-project can be completely placed in the context of the main application in an online environment, and the rest of the sub-projects do not need to be started. Note that the css file of the sub-project should also be proxied.

end

This is the case this time, I hope to make progress with you.