react-scripts实现原理

// package.json

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

在命令行中执行npm run start时，至关于执行react-scripts start，在安装react-scripts库时，rect-scripts命令同时会在node_modules/bin中生成

@IF EXIST "%~dp0\node.exe" (
  "%~dp0\node.exe"  "%~dp0\..\react-scripts\bin\react-scripts.js" %*
) ELSE (
  @SETLOCAL
  @SET PATHEXT=%PATHEXT:;.JS;=;%
  node  "%~dp0\..\react-scripts\bin\react-scripts.js" %*
)

rect-scripts start会去执行react-scripts.js文件，打印出来的process.argv 为 [ 'C:\\Program Files\\nodejs\\node.exe', 'E:\\学习项目\\脚手架搭建react项目\\fe\\node_modules\\react-scripts\\bin\\react-scripts.js', 'start' ]

react-scripts.js文件会根据参数去判断执行哪一种构建脚本，好比当前参数是start，那么就会执行start.js构建脚本

// start是开发环境
const config = configFactory('development'); // 根据环境获取构建配置
// coding...
const compiler = createCompiler({
  appName,
  config, // 打包配置
  devSocket,
  urls,
  useYarn,
  useTypeScript,
  tscCompileOnError,
  webpack,
});
// Load proxy config 开发环境代理
const proxySetting = require(paths.appPackageJson).proxy;
const proxyConfig = prepareProxy(
  proxySetting,
  paths.appPublic,
  paths.publicUrlOrPath
);
// Serve webpack assets generated by the compiler over a web server.
const serverConfig = createDevServerConfig(
  proxyConfig,
  urls.lanUrlForConfig
);
const devServer = new WebpackDevServer(compiler, serverConfig); // 开发环境打包
// Launch WebpackDevServer. 监听端口
devServer.listen(port, HOST, err => {
  if (err) {
    return console.log(err);
  }
  if (isInteractive) {
    clearConsole();
  }
}

// build 生产环境
const config = configFactory('production'); // 生产环境构建配置
// coding...
function build(previousFileSizes) {
    // coding...
    const compiler = webpack(config);
    // coding...
}

webpack.config.js构建配置

因此使用create-react-app搭建项目无需咱们来配置构建脚本