使用打包工具，执行script语句之后，发生什么

[yuandaishi]

我们习惯使用webpack构建前端项目，之后执行打包语句，例如npm run dev。然后项目就跑起来了，但是执行npm run dev之后，发生了什么事，为什么就跑起来了呢？

1.执行npm run 语句，会去寻找package.json的script属性对应的key值：例如 package.json中script属性如下

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

那么我们执行npm run start的时候，其实执行了react-scripts start语句

2.寻找modules文件夹中的bin文件夹，并寻找文件名为react-scripts的文件，我们可以看到这个文件是cmd文件。即window命令行脚本，打开该文件，看到内容如下：

@ECHO off
SETLOCAL
CALL :find_dp0

IF EXIST "%dp0%\node.exe" (
  SET "_prog=%dp0%\node.exe"
) ELSE (
  SET "_prog=node"
  SET PATHEXT=%PATHEXT:;.JS;=;%
)

"%_prog%"  "%dp0%\..\react-scripts\bin\react-scripts.js" %*
ENDLOCAL
EXIT /b %errorlevel%
:find_dp0
SET dp0=%~dp0
EXIT /b

3.从第二步我们大致猜想到此时需要执行\react-scripts\bin\react-scripts.js路径下的react-scripts.js。

至此，寻找执行文件的步骤完成，接下来便是node执行相应的js文件，开始打包。