14585人阅读
本例方法由实践总结
一、安装最新的node.js
原博文是这样写说的
npm install -g n //首先安装n模块
n stable //升级node.js到最新稳定版
n 5.0.0 //或者指定版本升级
node -v //检查更新是否成功
我自己是去重新下了一个最新版的node.js
二、修改npm源为淘宝源
npm config set registry
加快npm下载速度，不这样做的话npm install会卡很久。
三、安装脚手架
首先确保自己安装了nodejs，然后全局安装yeoman
npm install -g yo
然后直接安装脚手架
npm install -g generator-reactpackage
四、创建React项目
在合适的地方新建一个文件夹，在文件夹下运行：
yo reactpackage
然后就会在此目录下生成以下目录结构：
├── data
│ └── test.json
├── src
│ ├── components
│ │ └── App.js
│ ├── images
│ │ └── yeoman.png
│ ├── styles
│ │ └── app.scss
│ ├── vendor
│ │ └── jquery.js
│ ├── views
│ │ └── home.html
├── node_modules
├── index.html
├── package.json
└── webpack.config.js
五、调试打包React项目
然后使用以下命令：
npm run dev
npm run build
六、测试预览项目
本项目默认监听端口是8888，所以在浏览器输入 http://localhost:8888，或者index.html-&右键打开方式-&chrome 就能看到效果了
如果执行上述命令提示错误：Error: getaddrinfo ENOTFOUND localhost，在host文件里面添加127.0.0.1 localhost即可
监听端口和实时刷新的功能都能在webpack.config.js文件中修改配置
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：50821次
排名：千里之外
原创：28篇
评论：17条
(1)(2)(4)(3)(1)(1)(2)(4)(5)(3)(2)(2)(3)
(window.slotbydup = window.slotbydup || []).push({
id: '4740881',
container: s,
size: '200,200',
display: 'inlay-fix'首先按照官网说明，一路的安装下来，很顺利，然后开始运行吧，提示个错误，缺少index.js 文件 &原来是默认给出的文件是App.js&
如何更改呢
找到react-script模块文件夹config下面 &paths.jsnode_modules\react-scripts\config\&paths.js
阅读(...) 评论()您所在位置： &
&nbsp&&nbsp&nbsp&&nbsp
前端四react+redux脚手架搭建教程.docx 10页
本文档一共被下载：
次 ,您可全文免费在线阅读后下载本文档。
下载提示
1.本站不保证该用户上传的文档完整性，不预览、不比对内容而直接下载产生的反悔问题本站不予受理。
2.该文档所得收入(下载+内容+预览三)归上传者、原创者。
3.登录后可充值，立即自动返金币，充值渠道很便利
需要金币：350 &&
前端四react redux脚手架搭建教程
你可能关注的文档：
··········
··········
\* MERGEFORMAT10
初始化项目
基于nodejs
cd D:\code_fe\test
cnpm init
新建index.html
&!DOCTYPE html&
&html lang=&en&&
&head&
&meta charset=&UTF-8&&
&title&react_redux&/title&
&/head&
&body&
&div id=&root&&Hello World!&/div&
&/body&
&/html&
expres
nodejs web framework
web框架
 HYPERLINK &/zh-cn/& /zh-cn/
cnpm install express --save-dev
新建server.js
var app = new (require('express'))()
var port = 9100
app.get(&/&, (req, res) =& {
res.sendFile(__dirname + '/index.html')
})
app.listen(port, error =& {
if (error) {
console.error(error)
(&Open up http://localhost:%s/ in your browser.&, port)
node server.js
package.json增加start命令
babel
Babel is a JavaScript compiler.
将babel语法编译成普通es2015(es6)
 HYPERLINK &https://babeljs.io/& https://babeljs.io/
cnpm install babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-react-hmre --save-dev
新建.babelrc
增加配置内容
{
&presets&: [&es2015&, &react&],
&development&: {
&presets&: [&react-hmre&]
webpack
webpack the flexible module bundler
 HYPERLINK &https://webpack.github.io/& https://webpack.github.io/
cnpm install webpack webpack-dev-middleware webpack-hot-middleware --save-dev
新建webpack.config.js
var path = require('path')
var webpack = require('webpack')
module.exports = {
devtool: 'cheap-module-eval-source-map',
'webpack-hot-middleware/client',
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin()
loaders: [
test: /\.js$/,
loaders: [ 'babel' ],
exclude: /
正在加载中，请稍后...}