“This is the fifth day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

Hello, stranger. I am spring elder brother, a hate 😞 overwork but often overwork, love touch fish 🐟 but seldom touch fish front-end engineer. Undergraduate machinery 🐶 professional I, the biggest reason for code farming, is because of the identification of the program “open” and “share”! I hope I can give you a little light, too.

【 Open library 】 series preface 🚕

One person said, “Almost every front-end fantasizes about one day becoming the big man in open source, writing components and libraries that are used by millions of people.” Of course, along with the freedom of wealth and promotion and pay rise, marry Bai Fumei, as the CEO, to the peak of life…… Whether you are or not, this is something I dream about a lot. Unfortunately: If dreams were worth anything, they would be worth nothing long ago.



In order to distance【 Open a warehouse 】The dream is getting closer and closer every day. What should we learn?

I plan to write a series of articles detailing how the front end should be strengthened step by step, creating, publishing, and landing your ownComponent library!

eachSpeak threeI think very important knowledge! I’m done.

This is the first in the Basics series, Where Dreams Begin.

Basic knowledge 1: NPM standard 🚕

How important is the NPM standard? My answer is very important! I put it on the first list because I think it’s the core knowledge that every visionary front-end needs to know, no exceptions! Whether you are currently using NPM/CNPM/PNPM/YARN or whatever, you must not ignore the standard that NPM stands for. Because any KIND of JS package manager, its essence is based on an implementation of the NPM standard. If you don’t understand the NPM standard, you probably don’t understand how your program works. Don’t believe it? Take a look at these questions:

What are the main differences between dependencies and devDependencies in package.json? Under what circumstances does this difference manifest itself? Can devDependencies be typed into the product pack? Can development-phase dependencies be placed in Dependencies?

What are the main and module properties in package.json? Under what circumstances does it work?

Q3: why is the latest version of vue on nPMjs.com 3.2.2 (as of 2021-11-08), but the yarn add vue@latest command installed is ^2.6.14?

If you can answer all of these questions successfully, then you have a rudimentary understanding of how NPM works. If it’s fuzzy, you might really need to catch up.

There are so many questions you can ask about NPM standards, which not only directly affect our daily development. If your dream is to “open a warehouse”, if you do not learn these knowledge points, I am afraid it is even harder to do anything! So where should you learn? As for a single knowledge point, There are scattered knowledge crumbs on Google, Baidu and Nuggets. Here are some of the posts that I thought were great, so bookmark them and read them in turn when you have time:

  1. # Front-end Engineering 5: All the NPM knowledge you need is here
  2. # Do you really understand package.json? Take a look, this is probably the most complete package parsing
  3. Do you know the difference between dependencies and devDependencies(Sorry, this article is just a make-believe, becauseThe author is the next, the level is not enough, selfish to gather)

Basics ii Semver version standard 🏆

The Semver standard is technically part of the NPM standard, but I think it’s worth mentioning it separately. Why is that? Because our dream is to open the warehouse library, the version number is an important part of the component library, without reasonable version management, the component library will become the user’s nightmare. What is semver version number?

"Vue ": "2.6.0" // This 2.6.0 is the version number that fully conforms to semver standardCopy the code

What should we focus on when learning semver standards? I’ve listed a few points that I can think of, and I’m glad to correct any omissions:

  • Composition and meaning of semver version number (major.minor.patch.prerelease)
  • Semver range matching rules and operators (>,<,>=,<=,~,^,latest)
  • NPM version command
  • What version number should be upgraded under what circumstances? (Patch fixes, new features, and generational updates)

Recommended reading:

  1. Immutable (Unless NPM is upgraded) official website:# NPM official Semver documentation
  2. # semver literacy

Basic knowledge sammonorepo 🏆

What is Monorepo? Why do I need to learn it? Simply put: Monorepo is a project management approach. To put it more simply: Monorepo is a multi-package, single-repository code management approach. Ha ha, I know you’re still confused. It feels like I said everything and nothing at all. No, I’ll take vue warehouse as an example:

If you look carefully, you’ll notice that there are multiple package.json files in the repository. And the warehouse is built with a structure like the following:

├ ─ build ├ ─ docs ├ ─ packages │ ├ ─ common │ │ ├ ─ package. The json │ │ ├ ─ docs │ │ └ ─ SRC │ ├ ─ icon │ │ ├ ─ package. The json │ │ ├ ─ docs │ │ └─ SRC │ ├─ ├─ download.txt │ ├─ SRC │ ├─ download.txtCopy the code

In the project root directory, it contains code normalization, build scripts, various configurations, but no functional modules. All functionality related content is in the Packages folder. If you look closely, a lot of warehouses are now slowly moving to this Monorepo structure. So what is it good for? I will briefly enumerate a few, please correct any omissions:

  • Uniform code specification
  • Unified version number management and dependency management
  • Clearer dependencies
  • Syndication without link (link will be covered separately in the next article)

I won’t expand on the details, but as usual list some articles:

  1. # Why is modern front-end engineering increasingly dependent on Monorepo?
  2. # Monorepo- Multiple packages single repository development mode

Unfinished Epilogue (this series: to be continued!!)

Ok, the first three knowledge points will be introduced here ~🐟🐟, I will put out the important knowledge points bit by bit, and put them aside while learning by themselves to check the gaps 💻💻, and make progress together with everyone. If you think this series might be helpful, try:

Thumb up! Attention! Collect 💗 💗 💗 💗 💗Copy the code