1.3 分解React應用

前面我們提到過，React應用實際上依賴于一個很大很復雜的技術棧，我們使用create-react-app避免在一開始就費太多精力配置技術棧，不過現在是時候了解一下這個技術棧了。

我們啟動React應用的命令是npm start，看一看package.json中對start腳本的定義，如下所示：

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

可以看到，start命令實際上是調用了react-scripts這個命令，react-scripts是create-react-app添加的一個npm包，所有的配置文件都藏在node_modules/react-scripts目錄下，我們當然可以鉆進這個目錄去一探究竟，但是也可以使用eject方法來看清楚背后的原理。

你可以發現package.json文件中和start并列還有其他幾個命令，其中build可以創建生產環境優化代碼，test用于單元測試，還有一個eject命令很有意思。

這個eject（彈射）命令做的事情，就是把潛藏在react-scripts中的一系列技術棧配置都“彈射”到應用的頂層，然后我們就可以研究這些配置細節了，而且可以更靈活地定制應用的配置。

我們在命令行下執行下面的命令，完成“彈射”操作：

npm run eject

這個命令會讓改變一些文件，也會添加一些文件。

當前目錄下會增加兩個目錄，一個是scripts，另一個是config，同時，package.json文件中的scripts部分也發生了變化：

"scripts": {
  "start": "node scripts/start.js",
  "build": "node scripts/build.js",
  "test": "node scripts/test.js --env=jsdom"
},

從此之后，start腳本將使用scripts目錄下的start.js，而不是node_modules目錄下的react-scripts，彈射成功，再也回不去了。

在config目錄下的webpack.config.dev.js文件，定制的就是npm start所做的構造過程，其中有一段關于babel的定義：

{
  test: /\.(js|jsx)$/,
  include: paths.appSrc,
  loader: 'babel',
  query: {
    // This is a feature of `babel-loader` for webpack (not Babel itself).
    // It enables caching results in ./node_modules/.cache/babel-loader/
    // directory for faster rebuilds.
    cacheDirectory: true
  }
},

代碼中paths.appSrc的值就是src，所以這段配置的含義指的是所有以js或者jsx為擴展名的文件，都會由babel所處理。

并不是所有的瀏覽器都支持所有ES6語法，但是有了babel，我們就可以不用顧忌太多，因為babel會把ES6語法的JavaScript代碼轉譯（transpile）成瀏覽器普遍支持的JavaScript代碼，實際上，在React的社區中，不使用ES6語法寫代碼才顯得奇怪。