搞清楚npm run 发生了什么?

147 阅读2分钟

umi举例,在npm install umi之后,我们可以使用npm run start来启动,为什么是这样呢?我们来揭秘一下

第一层 start命令解析

    //  `npm run start`其实就是在`package.json`中的`start`命令
    {
      "name": "umi",
      "version": "1.0.0",
      "scripts": {
        "start": "umi xx"
       },
    }

第二层 为什么直接umi会报错呢?

既然我们可以使用`npm run start`,为什么不直接使用`umi dev`呢?尝试后发现报以下错误:

image.png 这时我的疑惑就来了,为什么使用npm run start运行就可以,直接运行umi dev就不行呢?

接下来是重难点,请拿起小本本记在小脑袋里。

1. npm install 时做了什么?
我们在`npm install umi`时,除了安装`umi`包本身外,还会在`node_modules`目录下创建一个`.bin`目录文件夹,下面的每一个文件都表示我们可以通过`npm`来执行,是一个可执行脚本

image.png

2. 来看看./bin/umi内部代码

文件顶部写着 #!/user/bin/env node,表示这是一个脚本 ../lib/cli表示脚本入口文件,运行js的入口文件

image.png

3. .bin文件生成的规则

原来在该框架中的package.json中有如下配置,表示最后的可执行命令的名称为umi,后面则表示具体目录地址


    "bin": {
      "umi": "bin/umi.js"
    },
4. 为什么直接umi命令会报错呢?只能使用npm run xx来运行umi命令
前面我们知道`npm install`的时候会创建`./bin`目录下的可执行脚本`umi`,代表我们可以通过`npm run umi`来运行脚本,相当于执行了`./node_modules/.bin/umi`

但是直接运行 umi 时,因为没有安装umi的全局命令,所以我们不能直接使用umi运行;
5. 如何使用umi命令?
很简单,将umi安装在全局即可,`npm install -g umi`

好啦,这就是今天的全部内容啦!小高今日学习输出完毕,开始搬砖......