React-scripts 如何快速创建调试一个Demo程序
2017-03-09 11:26
417 查看
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
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
相关文章推荐
- React实战-如何快速创建调试一个Demo程序
- React实战-如何快速构建一个ReactNative的Demo
- @教你如何快速启动一个程序!
- jQuery Howto: 如何快速创建一个AJAX的"加载"的图片效果
- 转 如何快速看懂一个大型程序 http://blog.csdn.net/jysg9/article/details/24193181
- Objective-C——教你如何用X-code创建一个OC程序
- 创建了一个进程外服务器如何调试 这个COM 服务器
- 如何快速地编写和运行一个属于自己的 MapReduce 例子程序
- 如何快速看懂一个大型程序
- 如何快速地编写和运行一个属于自己的MapReduce例子程序
- 用UDP实现可靠文件传输,如何利用UDX创建一个简单的WIN32程序
- Linux下如何利用QtCreator下创建一个界面程序
- 如何写出一个较好的快速排序程序
- 如何打开一个程序或创建一个进程 (适用与执行CMD命令)
- 一个GUI程序如何创建一个控制台程序(CUI)
- WSS3SDK之:如何创建一个事件处理程序Feature
- 【php】如何通过php程序快速构造一个面包屑导航
- 自己在之前做两个项目中遇到多线程并发访问如何解决的一个简单demo程序
- 手把手教你如何创建一个Binder的【服务端程序+客户端程序】
- 如何快速创建一个含有大量数据的表?