directory

  • preface
  • Know the workspaces
  • How do I install dependencies for modules
  • Remove reliance on
  • Execute scripts in the module
  • monorepo

preface

As a front end, you must have used a lot of NPM package in engineering projects. I don’t know if you have tried to develop NPM package or studied the development process of NPM package. If you have experience, then you must be very familiar with the command nPm-link.

It is impossible for us to publish the NPM package to NPM store every time we change the code for localization development, so NPM provides us with the command nPm-link for localization development.

However, nPM-link has a disadvantage that is not conducive to debugging code, we basically have to open two editors, one editor for developing the code of the package, and the other editor for debugging. According to this reasoning, we develop dozens of components in the component library, do we need to open dozens of Windows, No, it is not scientific.

Of course, we can also simulate workspaces by dragging the code directory for the development package into the debug directory.

That begs the question, what is our ideal development catalog? We definitely want to develop and debug under the same project, and once we’re done with any directories, we can just release them, and NPM’s new feature workspaces fits the bill.

Note: Workspaces are new to NPM v7.x, aka [email protected], so keep your local environment version larger than them.

Know the workspaces

Now let’s say we develop an NPM package called Calculator and it has only four basic functions — addition, subtraction, multiplication and division. Let’s see how calculator can be debugging in Workspaces.

  1. First create a directory and initialize a package.json:
➜  Desktop mkdir calculator && cd calculator && npm init 
Copy the code
  1. Create the addition, subtraction, multiplication and division module package

Execute commands separately (create one by one) :

$ npm init -w packages/plus -y
$ npm init -w packages/minus -y
$ npm init -w packages/times -y
$ npm init -w packages/divide -y
Copy the code

You can also use a simple command:

$ npm init -w packages/plus -w packages/minus -w packages/times -w packages/divide -y
Copy the code

At this point the directory becomes:

➜ calculator tree. ├ ─ ─ package. Json └ ─ ─ packages ├ ─ ─ divide │ └ ─ ─ package. The json ├ ─ ─ minus │ └ ─ ─ package. The json ├ ─ ─ plus │ └ ─ ─ package. Json └ ─ ─times└─ package. TXT 5 directories, 5 filesCopy the code

The package.json file in the root directory has a new workspaces field:

"workspaces": [
    "packages/plus"."packages/minus"."packages/times"."packages/divide"
]
Copy the code

If we don’t want to have too many workspaces fields, we can do this instead:

"workspaces": [
    "packages/*"
 ]
Copy the code

The Workspaces field is left to NPM Install to create soft connections, as discussed below.

  1. Add five files

Five index.js files have been added, and the directories are now as follows:

➜ calculator tree. ├ ─ ─ package. Json ├ ─ ─ packages │ ├ ─ ─ divide │ │ ├ ─ ─ index. The js │ │ └ ─ ─ package. The json │ ├ ─ ─ minus │ │ ├ ─ ─ Index. Js │ │ └ ─ ─ package. The json │ ├ ─ ─ plus │ │ ├ ─ ─ index. The js │ │ └ ─ ─ package. The json │ └ ─ ─times├─ ├─ ├─ ├─ ├.txt 5 directories, 10 filesCopy the code

To support ESM we manually rewrote all package.json to add a new field:

"type": "module".Copy the code
  1. Module implementation

Here we give the code for addition, the contents of the index.js file in the plus directory:

export default (a, b) => a + b;
Copy the code

Same thing for the other three functions.

  1. Verify the correctness of the program

How to verify the correctness of the program, of course, is to call four modules respectively, so install four modules, execute the command:

npm install
Copy the code

The familiar node_modules folder appears, but the folders inside are different from the usual ones.

From the command line terminal you can see even more clearly:

The node_modules folder is linked to the packages folder. This is a soft link technique (i.e. all modules in packages are soft linked to node_modules). It’s like a shortcut to a Windows desktop. Note that we changed the file under the Packages folder to automatically update the node_modules folder.

Add in the index.js file under root:

import plus from "plus";

console.log(` 1 + 1 =${plus(1.1)}`)
Copy the code

The other three methods are similar and will not be demonstrated.

How do I install dependencies for modules

For example, division uses number-precision to preserve precision:

$NPM install number-precision --workspace divide # $NPM I number-precision -w divideCopy the code

If you want to install the dayJS dependency on all modules simultaneously:

$NPM install dayjs --workspaces # $NPM I dayjs-wsCopy the code

Remove reliance on

Remove the number-precision dependency from the Divide module:

➜  calculator npm uninstall number-precision -w divide
Copy the code

Execute scripts in the module

Suppose the scripts field in the package.json file in the Divide module package is:

{
  "scripts": {
    "dev": "node index.js"
  }
}
Copy the code

You can start the dev script in the Divide module package with the following command

$ npm run dev -w divide
Copy the code

OK, the basic use of Workspaces is almost too hot. Using Workspaces for development and debugging is just a small part of the process. Now let’s look at the real core application of Workspaces.

monorepo

Monorepo warehouse, here is a learning materials, semaphoreci.com/blog/what-i…

If you study on GitHub a lot, you will find that many of the front-end library source code is monorepo, such as Vue, React, etc.

The reason for the popularity of MonorePO is that it is difficult to manage large projects. If maintaining a single warehouse is too large and maintaining multiple warehouses is too tedious, monorePO is introduced to allow you to maintain a warehouse, but a warehouse is divided into several packages, which is convenient for you to maintain. Part of the function is also cut out, before monorepo’s best tool is YARN, now good NPM has started native support.

conclusion

Today, we’re learning about a new way to replace NPM Link debugging with Workspaces so you don’t have to cut the editor, but where Workspaces really shines is in conjunction with Monorepo as a popular way to organize code for popular libraries.

reference

  • npm workspaces