kenberkeley / react-demo

React 示例项目 · 简易留言板。本项目拥有完善的文档说明与注释，让您快速上手 React 开发 SPA。Webpack / ES6 + Babel / Redux / React Router —— An Excellent React Starter，可能是东半球最佳的 React Starter，基于 Vue Cli 二次开发

React 示例项目 · 简易留言板 + 待办事项

2017.7 升级版预览：react-scaffold，敬请期待！

###写在前面
一直以来，我都相当纳闷：为什么 React 的那些 starter kit 都构建得那么恶心？
能不能像 Vue Cli 生成的项目架构般优雅？说干就干，本项目就改自 Vue Demo

更新

2016/8/28   引入 cross-env 解决跨平台问题，新增优化项 DedupePlugin
2016/8/29   重命名 makeContainer / makeReducer.js => createContainer / createReducer.js
2016/9/10   重构 src/redux/
2016/10/15   同步 Vue Demo 的改动
2016/10/16   改进：仅在开发模式下引入 React Hot Loader

目录

§ 技术栈

§ 快速开始

• 安装
• 启动

§ 项目架构

• 目录结构
• 特色

§ 开发

• Webpack 配置
• 规范
• 性能

§ 测试

§ 部署

§ 参考

---

§ 技术栈

详情可参阅 package.json

• React 15.3.0
• Redux
• React Router
• Ajax 请求库（Superagent / jQuery-Ajax / ...）
• Webpack
• ES6 + Babel
• jQuery + BootStrap (UI)

---

§ 快速开始

在开始前，希望您已通读如下资料

• React 文档
• Redux 文档（看完后懵逼的请转看 Redux 莞式教程）
• React Router 文档

同时您还需要熟悉 ES6。例如，请把如下代码
const foo = ({ hello: { world: bar } }) => ({ bar })
转译成 ES5（答案请自行到 Babel REPL 在线编译验证）

⊙ 安装

推荐升级到 node 5.x/6.x + npm 3.x 环境，强烈推荐使用 cnpm 安装依赖或手动
切换到淘宝 npm 源：npm set registry https://registry.npm.taobao.org/
（经测试，cnpm 对于 node-sass 等问题多多的 Package 拥有秒杀能力）

本示例项目需要结合 简易留言板 RESTful API
模拟前后端分离开发（还为了与 Vue Demo 共用）
请分别 git clone，打开两个命令窗口（ Windows 下推荐使用 Cygwin / Git Bash）分别切换到两者的目录下
分别敲下 npm install 安装依赖（为避免 Windows 下 npm 2.x 的软链接问题，可加上 --no-bin-link 完全解构所有依赖）

⊙ 启动

先后在 msg-board-api、react-demo 的命令窗口下，敲下 npm start
如无意外，默认浏览器就会自动打开 localhost:9090，您立即可以看到效果
若浏览器没有自动弹出，则请自行手动访问

P.S. 如果您还不清楚如何安装与启动，请看这个 issue

---

§ 项目架构

⊙ 目录结构

.
├─ build/            # Webpack 配置目录
├─ dist/             # build 生成的生产环境下的项目
├─ src/              # 源码目录（开发都在这里进行）
│   ├─ assets/         # 放置需要经由 Webpack 处理的静态文件
│   ├─ components/     # 组件（COMPONENT）
│   ├─ redux/          # Redux 一箩筐
│   │   ├─ actions/      # （ACTION）
│   │   ├─ reducers/     # （REDUCER）
│   │   ├─ store/        # （STORE）
│   ├── routes/        # 路由（ROUTE）
│   ├── services/      # 服务（SERVICE，用于统一管理 XHR 请求，这是从 Vue Demo 中直接复制过来的）
│   ├── utils/         # 工具库（UTIL）
│   │   ├─ HoC/          # 高阶组件（HOC，全称 Higher Order Component）
│   │   ├─ mixins/       # 混合（MIXIN）
│   ├── views/         # 路由视图基页（VIEW）
│   │   ├─ layout/       # 全局布局
│   ├── app.js         # 启动文件
│   ├── index.html     # 静态基页
├── static/          # 放置无需经由 Webpack 处理的静态文件
├── .babelrc         # Babel 转码配置
├── .eslintignore    # （配置）ESLint 检查中需忽略的文件（夹）
├── .eslintrc        # ESLint 配置
├── .gitignore       # （配置）需被 Git 忽略的文件（夹）
├── package.json     # （这个就不用多解释了吧）

在这里您可能会问：怎么没有 containers/ 目录？
在本项目中，木偶组件与智能组件最大的差别在于：
前者的状态是通过父组件传入获得，而后者是直接连接到 state 获得
亦即：若一个木偶组件直接连接到 state，那么它就是一个所谓的智能组件
（详见 src/utils/createContainer.js 中对 react-redux 的 connect 函数的封装）
本示例项目唯一在组件的定义中自行使用 connect 函数的是 Navbar 组件（且用到了 ES7 的装饰器）

有关木偶组件与智能组件更为精确的论述，推荐 Redux 作者 Dan 的这篇文章，避免教条主义

您可以根据业务需求改动目录结构。若目录使用频繁，建议配置 路径别名
默认的路径别名见上面目录结构注释中大写形式的常量
特别推荐： 更新版本的 Vue Demo 文档 · 目录结构

⊙ 特色

• 本示例项目秉承最佳实践，高度洁癖地实现代码分离/复用
• 优化目录结构，更好的模块分离，更接近 Vue 的开发模式
• Redux DevTools，可选 Chrome 插件形式（默认） 或 内嵌页面的组件形式
• Redux Logger 打印动作及前后状态变化
• why-did-you-update 检测不必要的组件重渲染（默认关闭）
• 引入服务层统一管理 XHR 请求（好处请参考 Vue Demo 中的 引入服务层）
• 引入 路径别名 实现优雅的加载模式
• 引入 React Hot Reload，支持热替换
• 生产环境下的编译对代码进行优化
• 迄今为止我见过的最完美的 starter kit

有关 Redux DevTools 与 why-did-you-update 的启用与禁用，见下面的 开发环境全局变量 配置

---

§ 开发

⊙ Webpack 配置

由于已经拥有相对成熟的 Webpack 配置，因此在一定程度上您可以不求甚解，但了解其配置会更能把握整体开发

• 前端开发服务器为 localhost:9090，可在 build/webpack.dev.conf.js 中找到

后端 RESTful API 基地址写在了 src/services/xhr/config.js 中，请根据实际自行修改

• 框架 / 类库 须分离打包以加快开发时的编译速度并有利于缓存，详见 build/webpack.base.conf.js 中的 vendor

实际上该步骤可通过读取 package.json 的 dependencies 字段实现自动化，但其灵活度不够高，必要性也不大
P.S. 安装包时勿忘 --save / --save-dev 以添加依赖记录

• 路径别名 的定义位于 build/webpack.base.conf.js，好处就是引入与重构都很方便

例如，在某组件中，引入 userService 需要 import userService from '../../../services/userService'
但有了路径别名后，只需要 import userService from 'SERVICE/userService'
相比于 AngularJS 中的依赖注入，这种方式依赖于构建工具，显得更为简单

您可能会说，Webpack 只需要设定了 root属性为 src/
就可以 import userService from 'services/userService'
但在这里其实是会引起歧义的（不过这属于强迫症的范畴。。。）
例如，import createBrowserHistory from 'history/lib/createBrowserHistory'
您可能会觉得这是 src/history/lib/createBrowserHistory.js
但实际上 history 是一个 npm package
同样地，您又怎么知道 services 不是一个 npm package？
而且重构之后，文件夹的变动会导致相对路径的变化，services/ 目录未必仍在 src/ 下
因此，路径别名相当有必要。其常量的形式，让人一看就知道不是一个 npm package

• 开发环境全局变量，由 webpack.DefinePlugin 提供（详见 build/webpack.base.conf.js）

默认有 __DEV__ / __PROD__ / __COMPONENT_DEVTOOLS__ / __WHY_DID_YOU_UPDATE__ 四个全局变量
若要继续添加，则还需要在 .eslintrc 中 globals 同步写入

在此需要提醒，在 package.json 中设置 NODE_ENV 要注意末尾空格的问题
最好就是使用前 trim 一下：process.env.NODE_ENV.trim()

拓展阅读：解读 UglifyJS
看看生产环境下编译 if (__PROD__) { ... } => if (true) { ... } 后 UglifyJS 会如何处理

⊙ 规范

本示例项目的代码极尽详细地添加了注释，其中不乏最佳实践提示

为了减少代码量，我省去了 Prop 验证，建议您在往后的开发中使用

⊙ 性能

大概可参阅如下文章：

• React 文档 · Advanced Performance
• 反鸡汤 · Should I use shouldComponentUpdate（译文）
• 淘宝 FED · 高性能 React 组件
• 腾讯 Dev Club · React 移动 Web 极致优化

---

§ 测试

请自行选择测试工具

---

§ 部署

在 react-demo 的命令窗口下，敲下 npm run build，将会在项目根目录下生成 dist/

您可以使用命令行静态资源服务器 serve ( npm i serve -g )，敲下 serve dist/ -p [端口] 来快速查看 build 后的项目
还可以 cd dist 后，python -m SimpleHTTPServer [端口] 或 php -S localhost:[端口] 快速便捷地实现静态资源服务器

关于生产环境下的部署与优化，已超出本文档的论述范围，请自行查阅相关资料

---

§ 参考

• Vue Demo
• davezuko/react-redux-starter-kit
• 探讨 React 项目目录结构

react-demo's Issues

在ie浏览器上面兼容性 ？

在本机使用ie 11 打开。页面无显示，react在ie 11 都无法兼容吗？

如何使用proxy

使用http-proxy-middleware没有生效
app.use('/canvas', proxy({target: 'http://10.109.4.25', changeOrigin: true}));
请问是哪里的配置给阻断了呢？

React 升级 15.4.0+ react-hot-loader导致服务无法启动

react-demo目录里npm install之后好像安装依赖不完全

如图 没找到模块 我看了一下配置文件中好多需要的依赖在node_modules中都没有 这是怎么回事 重新install了好几次了

Node 升级 7.1 之后 dev 环境的实时 eslint 引起程序崩溃

症状：src 中的源文件含有 eslint 不能容忍的错误的时候开发 console 会强制退出，log 如下

webpack built 6fcf335f41ec1e576920 in 723ms

npm ERR! Windows_NT 10.0.14955
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
npm ERR! node v7.1.0
npm ERR! npm  v3.10.9
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: `cross-env NODE_ENV=development node build/dev.js`
npm ERR! Exit status 3221226505
npm ERR!
npm ERR! Failed at the [email protected] start script 'cross-env NODE_ENV=development node build/dev.js'.

起初以为是我改动 eslintrc 或 webpack conf 导致出错，但我重下最新 repo 并尝试运行的时候依然有这样的问题，降级至 7.0 后恢复正常。请问这是本项目配置的问题还是 webpack/babel-eslint 的问题？

直接运行不了

"cross-env NODE_ENV=development node build/dev.js",

"cross-env NODE_ENV=development " 前面加这个出错; 取消掉的话下面还出错。

env = process.env.NODE_ENV.trim(); // 当前环境

感觉不错,可否增加代理

想vue cli一样的 http-proxy-middleware

问题咨询

你好，十一快乐。有个不请之请，公司打算节后做个后台系统，比较复杂的那种。这个项目目前是我一个人去做，项目选型我来定，我打算用react+redux+react-router-webpack+antd来做，希望思路上可以得到你的帮助。我qq：840690384，麻烦加下我，谢谢。（本来是想加你，考虑到你不方便贴自己qq）

找不到 'history/lib/createBrowserHistory'

ERROR in ./src/redux/store/syncHistoryWithStore.js
Module not found: Error: Cannot resolve module 'history/lib/createBrowserHistory' in

想知道为什么是 lib 下面的 createBrowserHistory， 而不是直接 history 下面的？

关于componentWillReceiveProps 无限循环问题

handleIllegal() {
//使用setTimeout防止阻塞跳转
setTimeout(() => alert('非法访问'))
location.replace('/msg')

    // 为什么不使用如下代码跳转？
    // this.context.router.replace('/msg')
    // 因为会触发 componentWillReceiveProps 无限循环
}

请问一下博主为什么this.context.router.replace('/msg')为造成无线循环

dev环境和正式部署环境的差异

在dev环境下，可以访问 http://localhost:9000/msg或者http://localhost:9000/todo等等，并且刷新浏览器依然可以访问，有点不像单页的感觉，但实际是单页，但是可以刷新，前进和后退
在prod环境下，不能直接输入网址http://localhost:9000/msg 访问，可以前进后退，但是不能刷新，请问是什么情况呢，怎样才能做到像dev环境下那样可以刷新呢

不能运行...

[email protected] start F:\works\projects\react-demo-master
cross-env NODE_ENV=development node build/dev.js

'cross-env' ²»ÊÇÄÚ²¿»òÍⲿÃüÁҲ²»ÊÇ¿ÉÔËÐеijÌÐò
»òÅú´¦ÀíÎļþ¡£

如何编译asset中的less或者scss

我执行了npm run build之后 在dist环境中没有生成任何的css文件 index.html中也没有任何引用类似于style.css的

请问应该如何去正确的编译样式呢？

很多组件的构造函数中有 this.state = XXX,请问这样和"不要直接手动修改state"矛盾吗？

你好，我刚刚接触react。
教程上是说不要修改state，而是返回变化后的state的副本。
但是如下代码有 this.state = { inputVal: '' }

export default class TodoInput extends Component {
  constructor (props) {
    super(props)
    this.state = { inputVal: '' }
    this.handleChange = handleChange.bind(this)
  }
...
}

npm run build 报错

npm run build 报错：
../index.html 542 bytes [emitted]
fs.js:133
throw new ERR_INVALID_CALLBACK();
^

TypeError [ERR_INVALID_CALLBACK]: Callback must be a function
at maybeCallback (fs.js:133:9)
at Object.writeFile (fs.js:1179:14)
at /Users/aiyingya/VScode/react-demo/build/prod.js:11:6
at Compiler. (/Users/aiyingya/VScode/react-demo/node_modules/webpack/lib/Compiler.js:194:14)

希望提供webpack2版本

现在好多项目都用webpack2了，希望提供webpack2版本

Redux是把所有的数据都传递过来么，不是页面需要什么数据就传递什么数据么？如果是前者，会有性能问题；如果是后者，怎么做到的，通过Reducer？

具体代码如下：

// 情况2：处于 /msg/modify/:msgId，且 state 中 msgs 不为空

if (msgs.length) {
  // Small Fish Wang: 所有的数据都传递过来了，然后从中自己挑选，这里使用了filter方法
  // 我觉得这个应该是Redux中的Reducer来实现的，要不然每个地方都传递所有的数据，数据量大的情况下，会有性能问题。
  // 这个地方也用解构，用得真灵活而方便。

  let nextState = msgs.filter(({ id }) => id === msgId)[0]
  if (!nextState || nextState.author !== username) {
    return this.handleIllegal()
  }

  return this.setState(nextState)
}

使用build版本运行时，首次加载子页面，性能非常差，页面打开需要将近20s

1. Network 可以看到chunfile的size有700kb
2. 关于route 配置及 import 的npm包如下：
   A, routes/index.js
   `export default {
   path: '/recruit/',

component: require('COMPONENT/App').default,

indexRoute: {
component: require('COMPONENT/Welcome').default
},

childRoutes: [
// 路由按模块组织分离，避免单文件代码量过大
require('./demand').default,
require('./interview').default,
require('./executive').default,
require('./login').default,
require('./logout').default,

// 强制“刷新”页面的 hack
{ path: 'redirect', component: require('COMPONENT/Redirect').default },

// 无路由匹配的情况一定要放到最后，否则会拦截所有路由
{ path: '*', component: require('COMPONENT/404').default }

]
}`

B: routes/demand.js
`import { injectReducer } from 'REDUCER' // 用户访问拦截器
import createContainer from 'UTIL/createContainer'

const connectComponent = createContainer(
({ userData, demand, requirement, executive }) => ({ userData, demand, requirement, executive }), // mapStateToProps
require('ACTION/executive').default // mapActionCreators
)

export default {
path: '/recruit/executive',

/* 布局基页 */
getComponent (nextState, cb) {
require.ensure([], (require) => {
// 立即注入 Reducer
injectReducer('executive', require('REDUCER/executive/').default)

  cb(null, require('VIEW/executive').default)
}, 'executiveView')

},

indexRoute: { // 对应 /executive
getComponent (nextState, cb) {
require.ensure([], (require) => {
cb(null, connectComponent(require('COMPONENT/Executive/').default))
}, 'index')
}
},

childRoutes: [
]
}
`

C: components/Demand/index.js
import React, { Component } from 'react' import dateTimeFormatter from 'UTIL/dateTimeFormatter' import handleChange from 'MIXIN/handleChange' import { Link } from 'react-router' import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table' import 'react-date-picker/index.css' import { DateField } from 'react-date-picker'

问题：build时，是如何生成chunkfile，为什么chunkfile会这么大？

开发过程中碰到的问题

@kenberkeley
问题一：启动文件app.js中
import store, { history } from 'STORE'
import routes from 'ROUTE'
一般我会写
import store, { history } from './index'
import routes from './route'

问题二：
DEV和PROD意思我清楚，区分开发环境和生产环境，可是我没有看到这个设置

安装报错

您好，npm install --no-bin-link 安装模块时报错了： Maximum call stack size exceeded

能帮忙看一下吗

发现个小问题

在留言的添加和修改的表单界面 此时刷新页面 会提示要登录

http://localhost:9090/msg/add
http://localhost:9090/msg/modify/99070020

你好,我clone了你的项目 但是打包无法生效

在webpack上npm run start 是生效的,但是打包后打开网页就会报下面这些错误
请问这是什么原因造成的 找了好久都没有找到原因
ncaught TypeError: Cannot read property 'call' of undefined
at e (mainifest.f8a65f.js:1)
at Object. (app.1fabfb.js:1)
at e (mainifest.f8a65f.js:1)
at window.webpackJsonp (mainifest.f8a65f.js:1)
at app.1fabfb.js:1
vendor.86bd5e.js:25 Uncaught TypeError: Super expression must either be null or a function, not undefined
at a (vendor.86bd5e.js:25)
at vendor.86bd5e.js:25
at Object. (vendor.86bd5e.js:25)
at e (mainifest.f8a65f.js:1)
at Object. (vendor.86bd5e.js:24)
at e (mainifest.f8a65f.js:1)
at Object. (vendor.86bd5e.js:1)
at e (mainifest.f8a65f.js:1)
at window.webpackJsonp (mainifest.f8a65f.js:1)
at vendor.86bd5e.js:1

chrome浏览器，版本号36无法打开。升级到最新的版本才能正常打开

个人建议可以把前后端文件放到一个库里：https://github.com/kenberkeley/msg-board-api

个人建议可以把前后端文件放到一个库里：https://github.com/kenberkeley/msg-board-api

此项目基础上加上antd框架

1、安装antd
npm install --save-dev antd
2、在.babelrc的plugins里：
"plugins": [
"transform-runtime",
"transform-decorators-legacy",
"antd"
]
3、npm start 后就报错了，麻烦看下怎么结合antd，谢谢

有些看不明白的地方想请教一下

刚学习react时间不久，在您的项目中有些写法看的不太明白，例如
app.js中的
import store, { history } from 'STORE'
import routes from 'ROUTE'
routes/index.js中
require('COMPONENT/Welcome').default
STORE和ROUTE时自定义的吗？如何来定义他们具体的位置
这种写法很多

看到你吐槽rn的starter, 我也是这么认为的!

录了一个基本的配置,撸了一个上午

您好，我下载了您的项目，但是运行出现这样的错误

mainifest.js:586 Uncaught TypeError: Cannot read property 'call' of undefined
127.0.0.1/:16947 Uncaught TypeError: webpack_require(...) is not a function
您好，我是初学者，对于webpack配置不是很熟，网上的教程也没有您的复杂，出现错误之后，想要直接打包，使用webpack的devtool工具，但是始终无法出现dist文件。请问具体webpack如何改，才能直接可以打包出文件，还有直接使用w7附带的CMD打开两个窗口也能运行嘛？请指点一下

import后面加;报错

ERROR in ./src/app.js

  error  semi  Extra semicolon
  E:\wanmagu.com\React-weixin\react-seller\src\app.js:2:26
  import React from 'react';
                            ^


✖ 1 problem (1 error, 0 warnings)

为什么我在import xxx 后面加了;会报上面这个错误，不晓得出错的原因在哪里

react-dome安装问题

@kenberkeley 按照作者的所表述的方法，做个下载-安装包-然后start，react-demo文件start后报错。
错误显示：
events.js:160
throw er; // Unhandled 'error' event
^

Error: listen EADDRINUSE 127.0.0.1:9000
at Object.exports._errnoException (util.js:1007:11)
at exports._exceptionWithHostPort (util.js:1030:20)
at Server._listen2 (net.js:1253:14)
at listen (net.js:1289:10)
at net.js:1399:9
at _combinedTickCallback (internal/process/next_tick.js:77:11)
at process._tickCallback (internal/process/next_tick.js:98:9)
at Module.runMain (module.js:577:11)
at run (node.js:348:7)
at startup (node.js:140:9)
at node.js:463:3

npm ERR! Darwin 15.6.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v6.2.2
npm ERR! npm v3.10.3
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: cross-env NODE_ENV=development node build/dev-server.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'cross-env NODE_ENV=development node build/dev-server.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the react-demo package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! cross-env NODE_ENV=development node build/dev-server.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs react-demo
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls react-demo
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /Users/ruizhengyun/dev/rzy_javascript/react/react-demo/npm-debug.log

部署到正式环境的问题

就是部署到正式环境，运行npm run build之后，就不用再运行react-demo 下面的 npm start 了吧，但是这样网站打不开了啊。我看里面的代码， 只有dev环境下才有 9000 端口这个服务啊， 该怎么办呢？

Cannot resolve module 'react/lib/ReactMount' i

npm start 报错如下:

ERROR in ./src/app.js
Module not found: Error: Cannot resolve module 'react/lib/ReactMount' in /Applications/XAMPP/xamppfiles/htdocs/react-demo/src
 @ ./src/app.js 1:330-361

发现是 react 版本 15.3.1 安装下来是 15.4.0.
为啥会这样？ 怎么解决？
谢谢。

如何安装与启动

使用 cnpm 替代 npm 可大大减少安装依赖耗时：
npm install -g cnpm --registry=https://registry.npm.taobao.org

首先，您需要打开两个命令窗口，记为窗口 A 和窗口 B
窗口 A 用于启动前端开发服务器，窗口 B 用于启动后端 RESTful API

假设您想在 /Users/ken/ 目录下存放项目代码，那就分别在窗口 A B 敲下：cd /Users/ken 切换到该路径

之后，在窗口 B 中敲下：

$ git clone https://github.com/kenberkeley/msg-board-api.git`
### 拉取代码...

$ cd msg-board-api
$ cnpm i
### 安装依赖...

$ npm start

同样地，在窗口 A 中敲下：

$ git clone https://github.com/kenberkeley/react-demo.git
$ cd react-demo
$ cnpm i
$ npm start

编译完毕后，默认情况下浏览器会自动弹出并访问 localhost:9090

后端api配置的端口号是8989，webpack.dev配置的服务器端口是9090，会产生跨域问题，希望修复

npm start 报错

在msg-board-api文件夹下安装的时候提示这样的错误，一开始 not found ‘express’ 安装之后又提示别的 ，这是什么情况？

import

import App from 'COMPONENT/App' 这么引用什么情况？
import App from './components/App'不是应该这样吗

npm install error

node scripts/build.js

Binary found at D:\react-demos\react-demo\node_modules\node-sass\vendor\win32-x64-51\binding.node
Testing binary
Binary has a problem: Error: %1 is not a valid Win32 application.
\?\D:\react-demos\react-demo\node_modules\node-sass\vendor\win32-x64-51\binding.node
at Object.Module._extensions..node (module.js:598:18)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19)
at module.exports (D:\react-demos\react-demo\node_modules\node-sass\lib\binding.js:19:10)
at Object. (D:\react-demos\react-demo\node_modules\node-sass\lib\index.js:14:35)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)

run install错误信息

Error: [email protected] postinstall: node scripts/build.js
9601 verbose stack Exit status 1
9601 verbose stack at EventEmitter. (D:\Program Files\nodejs\node_global\node_modules\npm\lib\utils\lifecycle.js:279:16)
9601 verbose stack at emitTwo (events.js:106:13)
9601 verbose stack at EventEmitter.emit (events.js:192:7)
9601 verbose stack at ChildProcess. (D:\Program Files\nodejs\node_global\node_modules\npm\lib\utils\spawn.js:40:14)
9601 verbose stack at emitTwo (events.js:106:13)
9601 verbose stack at ChildProcess.emit (events.js:192:7)
9601 verbose stack at maybeClose (internal/child_process.js:890:16)
9601 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
9602 verbose pkgid [email protected]