CNPM installation global module caused by thinking

The cause of

Because when I work, the company provides Windows desktops, so it is generally developed in the Windows environment.

However, when installing scripts with CNPM, I found a very interesting problem: the global scripts installed with CNPM, such as VUe-CLI, can only be run in CMD, not powerShell.

Similar problems, in fact, also encountered before, but before are generally used to use the newspaper, do not go into the principle of the idea.

In fact, most of the time, there is still a voice in my heart constantly remind me: “Know what it is, know why it is, can go further”!

But, their own strength does not allow, a lot of things are only half-baked, did not form a system, do not have the ability to see through the nature of the problem.

But now, began to find the feeling, so now encountered problems, spend more time, a little in-depth study, afterwards harvest is still very big.

Without further ado, let’s get back to our subject.

NPM, CNPM, and YARN selection problems

As for why NPM is used, I think the front-end students should have deep feelings, especially the domestic front-end students.

I think we’ve all experienced this scene at least once:

Colleague 1: Everyone says NPM isn’t working anyway! Colleague 2: NPM junk, it takes too long to get things down! Colleague 3: CNPM is ten thousand times stronger than NPM! Colleague 4: You are still using NPM, it’s so old-fashioned! .

Similar situation dialogue, I think you must have experienced.

But why is NPM bad and CNPM good?

When did this NPM stomping start and is it still the case?

What’s the difference between NPM and CNPM?

Is there any way NPM can be made as useful as CNPM?

In fact, these problems, not many people to explore, especially for many of its front-end junior players, I think many people subconsciously think, in fact, these two are the same thing, are the next NodeJS module.

It is estimated that many people think: these problems are not my business, I have studied so thoroughly, the boss will not give me a raise ah! I front-end, write a good page on the line, these frames, good use of the line, I drive, why to understand the principle of the car!

If this is true of you, then please stop reading. This article is not for you.

So why on earth are we heavy mouth of the word NPM is not good to use CNPM?

The reason is that NPM used to be really hard to use!

This blogger article analysis is very good, interested students can read: blog.xgheaven.com/2018/05/03/…

NPM is not easy to use, so the emergence of third-party package management systems such as CNPM and YARN.

But with the release of NPM 6.x, these issues have been resolved and relegated to the dustbin of history.

So the bottom line is: for now, use NodeJS’s package management system, prefer NPM, and if you really can’t use NPM, consider using a third-party package management system.

The create-React-app scaffolding, for example, supports YARN only, but if you have to use NPM, it is very difficult.

However, some children will ask that the NPM installation module is too slow to tolerate.

To tell you the truth, I also can’t bear, can’t bear you to change the source of NPM module, from the mirror station to download the module soon very fast.

This problem is not limited to NPM, but can be found in many package management systems.

For example, PIP for Python, Apt-get for Ubuntu, Homebrew, yum for centos, etc., are slow to access because the official source servers are in foreign countries.

But there is a solution to this problem, which can be solved by switching to a domestic mirror source.

For example, NPM into taobao’s domestic mirror source can solve the problem of downloading too slow, the following is the configuration:

# in the source
npm config set registry https://registry.npm.taobao.org

Check whether the change was successful
npm config get registry
Copy the code

Third-party package management tool

Let’s talk more about why third-party package management tools exist.

As mentioned earlier, NPM was initially difficult to use, so the community has since produced better package management tools.

But NPM is also making progress, and we can’t always look at things in an old-fashioned way, embracing the future and removing bias from our minds.

This history of NPM is somewhat similar to the history of JavaScript.

JavaScript used to be unfriendly in a lot of ways, so there are a lot of great JavaScript frameworks out there, and a decade ago jQuery was probably the most popular.

There was even a time when someone claimed that you don’t need to learn JavaScript, just learn jQuery.

But the history is strikingly similar, and with ES6 and subsequent releases, jQuery, LoDash, and many other frameworks that enhance the JavaScript language are beginning to fade away.

As for the reason, I think we should also know that the same implementation of a function, built-in must be better, if not good, only that he has room for improvement.

This law, in many cases, is more consistent with the performance of reality.

So, why say open source code, help the development of the computer industry.

For the same tool, there are always some people who feel that it is not easy to use. If you come up with something more useful, everyone will learn from your more advanced ideas.

Because of this continuous cyclic process, the Internet industry has developed vigorously in recent decades.

in-depth

Having said too much about this topic, let’s get back to the question itself.

What prompted me to write this article?

First let’s check the CNPM version:

C: \ Users \ \ Administrator > CNPM - version [email protected] (C: \ Users \ \ Administrator \ AppData \ Roaming \ NPM \ node_modules \ CNPM \ lib \ parse_argv js) [email protected] (C: \ Users \ \ Administrator \ AppData \ Roaming \ NPM \ node_modules \ CNPM/node_modules/NPM \ lib \ NPM js) [email protected] (C: \ Program Exe Files \ nodejs \ node) to [email protected] (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\index.js) Prefix =C:\Users\Administrator\AppData\Roaming\ NPM win32 x64 10.0.18362 registry=https://r.npm.taobao.orgCopy the code

I have to say that this command displays a lot of content and exposes the nodeJS, NPM, and CNPM versions all at once, but that’s ok, that’s exactly what we want to see.

For a realistic scenario, I’m going to install vue-CLI next:

C:\Users\Administrator>cnpm install vue-cli -g
Copy the code

For the introduction of this article, the installation process of the log will not paste up, anyway, no error, abnormal exit, vuE-CLI installed successfully.

Let me run vue:

C:\Users\Administrator>vue

C:\Users\Administrator>"node"  "C:\Users\Administrator\AppData\Roaming\npm\\node_modules\vue-cli\bin\vue"
Usage: vue <command> [options]

Options:
  -V, --version  output the version number
  -h, --help     output usage information

Commands:
  init           generate a new project from a template
  list           list available official templates
  build          prototype a new project
  create         (for v3 warning only)
  help [cmd]     display help for [cmd]
Copy the code

As you can see, when I run the vue command, instead of executing the node vue script directly, I call a string of characters to execute the vue:

"node"  "C:\Users\Administrator\AppData\Roaming\npm\\node_modules\vue-cli\bin\vue"
Copy the code

Why is that?

I’m sure that people like me who haven’t given much thought to this question will think that if we install a module, does that mean we install a binary that can be executed directly?

The answer is no, the nodeJS modules we install are nodeJS scripts. When we call commands like vue, we actually call the nodeJS engine to execute the corresponding NodeJS scripts.

If you think big enough, you can see through the nature of computers.

In fact, our computer can not recognize our programming language, not to mention high-level programming language, even assembly, machine code he can not recognize, his most primitive side is, can only recognize 0, 1 two different voltage signals.

What machine code does is it allows us to drive different combinations of voltage signals that the computer responds to.

So in short, when we write code, we are actually creating complex combinatorial logic to do seemingly simple things, following the rules given to us by the programming language.

This problem goes deeper, talking about the composition principle of computer, the essence of operating system and so on, I have only a little knowledge at present, so I will not go into this aspect.

We just need to understand that both our globally installed modules and our locally installed modules run the same logic.

Even the NPM itself is a module, which is not fundamentally different from any other third-party module.

Open the directory of the globally installed module, and we can see that there is a node_modules folder, and then the directory contains the scripts that run the command line of our globally installed module.

As you can see, there are 3 vUe-related scripts. This is because I installed with CNPM. If you installed with NPM, there should only be 2 scripts.

Let’s open each script and see what’s inside:

First, vue:

#! /bin/sh
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")

case `uname` in
    *CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;;
esac

if [ -x "$basedir/node" ]; then
  "$basedir/node"  "$basedir/node_modules/vue-cli/bin/vue" "$@"
  ret=$?
else 
  node  "$basedir/node_modules/vue-cli/bin/vue" "$@"
  ret=$?
fi
exit $ret
Copy the code

As you can see, this is a bash script that can be run directly under Linux or Mac.

Followed by vue.cmd:

@SETLOCAL

@IF EXIST "%~dp0\node.exe" (
  @SET "_prog=%~dp0\node.exe"
) ELSE (
  @SET "_prog=node"@SET PATHEXT=%PATHEXT:; .JS; =; %)"%_prog%"  "%~dp0\node_modules\vue-cli\bin\vue" %*
@ENDLOCAL
Copy the code

This is a Windows batch script. This script is also very simple. It takes the path of Node and uses Node to execute the VUE in the global module.

Finally, vue.psL:

#! /usr/bin/env pwsh
$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent

$exe=""
if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
  # Fix case when both the Windows and Linux builds of Node
  # are installed in the same directory
  $exe=".exe"
}
$ret=0
if (Test-Path "$basedir/node$exe") {&"$basedir/node$exe"  "$basedir/node_modules/vue-cli/bin/vue" $args
  $ret=$LASTEXITCODE
} else{&"node$exe"  "$basedir/node_modules/vue-cli/bin/vue" $args
  $ret=$LASTEXITCODE
}
exit $ret
Copy the code

This is a powerShell script, which is also the path to node, and then executes the vue script.

This is fine by itself, but it will not work on some computers, such as mine.

Next, let’s look at the difference between the one-click scripts generated by modules installed with NPM.

To be fair, we will delete vue-cli installed with CNPM:

E:\work2\caidademo>npm uninstall -g vue-cli
Copy the code

Install vue-cli again with NPM:

E:\work2\caidademo>npm install -g vue-cli
Copy the code

After the installation is successful, we will see that only two scripts are generated this time:

If you think about it a little bit, they should be scripts running on Unix-like systems and Windows systems, respectively.

Without looking at the vue script, let’s examine how the vue.cmd script differs from the previous one:

@IF EXIST "%~dp0\node.exe" (
  "%~dp0\node.exe"  "%~dp0\node_modules\vue-cli\bin\vue"%* ) ELSE ( @SETLOCAL @SET PATHEXT=%PATHEXT:; .JS; =; % node"%~dp0\node_modules\vue-cli\bin\vue" %*
)
Copy the code

As you can see, there is not much difference. The only difference is that this script uses Node directly to execute vue, not “Node.exe”, because this is supported in CMD but not in powerShell.

So we can actually use CNPM to manage our Node modules, we just need to change the scripts that CNPM automatically generates for us.

Or maybe it’s a bug that requires you to contribute code to the NPM repository and change the logic that generates the script.

But the CNPM problem is certainly not only this one, this problem is only one of the small problems.

So, as mentioned earlier, try to manage nodeJS modules with NPM if you can.

We also respect some of the things that have moved history forward and then been lost in history.