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搭建項目無需咱們來配置構建腳本