After work, I find that I can learn new knowledge every day, which is really fascinating. I enrich my knowledge every day. Every little makes a great deal, and one day I will be a great bull 🤝🤝🤝

preface

I encountered a tricky thing in my work. Our company has its own component library. When I was fixing bugs, I found that the root cause of a bug was that the judgment condition of if statement in a referenced component was not right.

The first idea was to modify the component library, but then came a new problem

After I modify the component library, how can I see the effect before I push the code?

Boy, did I know that?

First of all, the reason for the problem is that the criterion in the component library is! IsUndefined (value), that is, if the value is not undefined, then the if statement is executed

In my project, the value is “”, so those of you who have the basics know that undefined is undefined only

However, on the principle of “the way is better than the hard”, I tried to bypass the component library and modified it in this project, and after trying, I actually found a way.

By deleting the definition of a value, the associated value is undefined

After success, I went to 🏃🏻♀️ to mention PR, and when I checked PR again, I saw such a scene

Basically, the code failed the test case that was written in the project because the test case did not let the value be undefined! Oh, boy. Stuck. Conflicted? I can’t change the test case, can I? 😳

Around a circle, therefore, found that I have to solve the above 👆 🏻 problem, is the core in the development process, how to link a package to another project (ps: actually, I think developing encounter problems are not terrible, because most of baidu can be solved, although a little bit time-consuming, terrible things, the baidu don’t know how to describe)

Here is 👇🏻 to introduce the rich results of asking a mentor and then baidu

What is Yarn Link?

  • In development, when two or more projects depend on each otheryarn linkThe connection,
  • For example, we have project B, which uses the NPM/YARN package manager to introduce package A. A is A component developed and encapsulated by ourselves. We modify the content of component A, and before rereleasing component A, we need to check whether the modification of component A is correct in project Byarn link

How do I use yarn Link?

Here I want to say that some people usually use NPM, NPM and yarn function is the same, but the specific instructions are slightly different. Link, directly say yarn to NPM can be

  1. In package A (that is, the encapsulated component library)yarn link
  2. Make the desired changes to package A 💻
  3. performyarn buid(Package code: the instructions are executed as scrpit in package.json)
  4. In project BYarn link [Name of package A]And re-executeyarnAnd clear the browser cache
  5. At this point, you can see the effect of the change in project B
  6. After completion, execute in project BYarn unlink [name of package A]To cancel the connection