[yiku] wonderful! This library organization NPM script is simply explosive!

One 、 Status of scripts

The script is The real entrance to the project .

Whether you just clone Finish the project of the company , Or are you going to make a small contribution to the open source community ; The first thing you need to do , Forever ：

open package.json, have a look scripts What scripts are there in .

• Some scripts are responsible for “ structure ”, Such as ：build、bundle、build:doc;
• Some scripts are responsible for “ debugging ”, Such as ：dev、serve、start;
• Some scripts are responsible for “ Single measurement ”, Such as test;
• wait ……

When you execute npm run serve perhaps npm run dev when , You can start developing and debugging , Advance the progress of the project .

But in the process of using scripts , There are also inconveniences .

What is it? ？ To look down .

Two 、“ Script scheduling ” The problem of

Wang Xianyu is the front-end backbone of a small company , Often responsible for front-end project refactoring 、 Structural adjustment 、 Packaging optimization, etc .

But he often has such problems ：

If I want to run build:umd、 Run again build:esm、 Run again build:docs, What to do ？

Just like this. ：

Wanted to think , He thinks he can , So I wrote the following code ：

npm run build:umd && npm run build:esm && npm run build:docs 

However, the small partners of the project team soon raised questions ：

“build:umd and build:esm There is no pre dependency , It should be possible to build , This can improve build efficiency .”

King salted fish listen , I think it makes sense .

The build process becomes like this ：

This makes Wang Xianyu embarrassed , I didn't think of a quick way , Can only introduce gulp , And wrote some extra js The script solves this problem .

that , Is there a better way ？

That night , Wang Xianyu worked late into the night , A security guard who is patrolling with a very high hairline , Accidentally glanced at his screen , Tell him in a low voice ：

“ silly boy , use npm-run-all ah ！”

The door of the new world was opened .

3、 ... and 、 It's so simple ？

The question above that makes Wang Xianyu scratching his ears , Solved in an instant ！

He just wrote one line of code ：

{"scripts": {"build": "npm-run-all -p build:esm build:umd -s build:docs"}
} 

What effect will the above script have after execution ？

1.build:umd and build:esm First, it will execute asynchronously and simultaneously ;
2. After both of the above , Will execute synchronously build:docs

“ perfect ！”

Wang Xianyu stretched himself , I can finally get off work .

But the next day , Another team member raised questions ：“ These three can run at the same time ！”

Wang Xianyu listened , I think it makes sense , It took three seconds to achieve the effect , Just a few code deletions ：

{"scripts": {"build": "npm-run-all -p build:esm build:umd build:docs"}
} 

sooooooo！easy!

Four 、 The name of this sword is ： npm-run-all

npm-run-all What is it? ？

The official introduces himself like this ：

One CLI Tools , It can be done in parallel 、 Or execute multiple... In sequence npm Script .

Yes , It can easily organize “npm Script ” Execution order of .

npmjs: www.npmjs.com/package/npm…

github: github.com/mysticatea/…

4.1 install

yarn add -D npm-run-all
# or
npm install -D npm-run-all 

4.2 The first order ： npm-run-all

adopt npm-run-all This command , You can organize scripts at will . It has many options , These two are the most important ：

npm-run-all -s a b -p c d 

you 're right , Namely -s and -p;

• s, That is serial, finger “ Serial ”.
• p, That is parallel, finger “ parallel ”.

By constantly combining the above two options , Multiple execution sequences can be defined , such as ：

npm-run-all a b --parallel c d --serial e f --parallel g h i 

1. First , Serial execution a and b
2. then , Parallel execution c and d
3. Again , Serial execution e and f
4. Last , Parallel execution g、h、i

4.3 Second command ：npm-s

npm-s It can be understood as npm-run-all --serial Abbreviation .

npm-s a b c 

The first effect is ： Serial execution a,b,c;

4.4 The third order ：npm-p

npm-p It can be understood as npm-run-all --parallel Abbreviation .

npm-p a b c 

The first effect is ： Parallel execution a,b,c;

4.5 wildcard

To assume that , If they exist at the same time build:umd、build:esm、build:docs, You want the three of them to execute in parallel .

You might write such code ：

{"scripts": {"build": "npm-p build:umd build:esm build:docs"}
} 

But what? , It's a long time , It's ugly , Is there a better way ？

Yes , Use wildcards ：

{"scripts": {"build": "run-p \"build:*\""}
} 

comfortable ！ That's it , perfect ！

4.6 More practical capabilities

In addition to the sequence described above ,npm-run-all There are also many practical options ：

• --max-parallel Maximum concurrent limit . For example, you have 20 A structure needs to be packaged , but CPU Limited ability , You hope that at most three are building at the same time , You can use it ;* --continue-on-error seeing the name of a thing one thinks of its function , Error continue ;* --race Reference resources Promise.race…

This is also compared with writing directly shell The biggest advantage is ;