React-scripts 如何快速創建調試一個Demo程序

React實戰-如何快速創建調試一個Demo程序

React是單一頁面程序，因此需要我們在創建React項目時需要做很多配置、解析等工作，嚴重影響着我們在編寫demo時的情緒和效率。

通常的方式我們需要做以下幾步(：

1. 創建配置文件package.json。

定義項目所需的React程序包：

{
  "name": "routerdemo",
  "version": "0.0.1",
  "private": true,
  "devDependencies": {
    "react-scripts": "^0.4.0"
  },
  "dependencies": {
    "react": "^15.3.0",
    "react-dom": "^15.3.0",
    "react-redux": "^4.4.5",
    "react-router": "^2.6.1",
    "react-router-redux": "^4.0.5",
    "redux": "^3.5.2",
    "redux-undo": "^1.0.0-beta9"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "./node_modules/react-scripts/config/eslint.js"
  }
}

2. 定義項目文件結構: 精簡到index.html，src/app.js，assert/bundle.js(解析後的js文件)

3. 定義解析打包源文件爲bound.js的腳本，運行web頁面

光以上3步就讓我們非常頭疼，尤其是第三步，我們需要解析項目中js源文件，打包成一個文件bundle.js，還需要創建一個web應用支撐我們訪問。

4.通過React-Scripts進行調試

幸運的是，在react相關包中，存在一個react-scripts的包能夠幫助我們輕鬆完成第三步，我們只需要做以下幾件事，並滿足一下規則即可方便調試。

l 在config中引入react-scripts

"devDependencies": {
    "react-scripts": "~0.4.0"
  },
"eslintConfig": {
    "extends": "./node_modules/react-scripts/config/eslint.js"
  }

l 在config中加入執行腳步

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

好了，我們以後再測試時，只需要允許npm start即可了，方便太多了。

必須要注意的是：

1、html文件必須爲index.html

2、入口js文件名必須爲index.js

如果不遵守上述兩點，你的解析是不成功的。

5.分析React-Scripts源碼瞭解執行原理

採用React-scripts省去了我們太多事情，但是總還是會好奇，它到底幹了什麼，我們不能只知道使用規則，而不知原理。看看React-scripts的項目配置文件，我們知道它只是幫我們做了我們自己編寫腳本的工作：採用webpack進行源碼解析，至於爲什麼必須使用index.html和index.js文件名，以下兩段配置文件說明了原因：

在React-scripts的path文件中appHtml: resolveApp('index.html')

在React-scripts的webpack.config中：path.join(paths.appSrc, 'index')。

在明白了React-scripts的原理情況下，採用npm start命令即可調試項目了，並且在修改源碼時，能理解反應在執行程序裏。不再爲實現個HelloWorld程序煩惱了。

原文地址：http://blog.csdn.net/loveu2000000/article/details/52554800