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