npm run xxx时的具体过程

npm run start根据package.json可知它执行的是npm run vue-cli-service serve

  1. npm会创建一个shell脚本;
  2. 在shell脚本中,会调用执行node_modules/.bin/vue-cli-service
  3. 其中node_modules/.bin,会被临时加入到系统环境变量,所以package.json中可以省略,直接写成vue-cli-service。
    直接执行vue-cli-service serve是会报错的,因为操作系统中没有vue-cli-service这一条命令
    .bin目录并不是一个npm包,目录下的文件表示是一个个的软连接.
    在.bin文件夹下,执行ls -l命令,可以看到软连接指向的已安装的模块@vue/cli-service/bin/vue-cli-service.js 所以我们在执行npm run serve时,虽然没有安装全局命令,但npm会到node_modules/.bin目录中找到vue-cli-service文件作为脚本来执行,则相当于执行了 ./node_modules/.bin/vue-cli-service serve(最后的 serve 作为参数传入),因此是不会报错的;

vue-cli-service存在于项目最外层的package-lock.json中。当我们npm整个项目的时候,npm将整个bin/vue-cli-service.js作为bin声明了;所以在npm install时,npm读到该配置时就将该文件软连接到.node_modules/.bin/目录下了, 而npm还会自动将node_modules/.bin加上$PATH, 这样就可以直接做为命令依赖程序和开发依赖程序,不用全局配置了;

总结:

  1. 执行npm run xxx时,会先从当前目录下的node_modules/.bin中去查找对应的可执行程序执行;
  2. 如果无法找到,就会在npm的全局安装路径进行查找,也就是npm i -g xxx时安装的路径;
  3. 如果还找不到,就会从系统环境变量中查找;
  4. 再找不到就会报错了;

你可能感兴趣的:(npm,vue.js,前端)