【转载】React初学者教程15：设置React开发环境

概述：学习如何配置 Node、Babel 和 Webpack 来高效创建 React 应用。著作权归作者所有。

商业转载请联系作者获得授权,非商业转载请注明出处。

原文:http://www.w3cplus.com/react/setting-up-react-environment.html©w3cplus.com

注意：本文主要是针对原文中本人遇到问题的处理方式进行分享，如有不足之处希望指出。

---

一、开发工具概述

设置 React 开发环境，我们需要用到 Node.JS、Babel、Webpack 以及一款编辑器作为开发工具。

1. Node.JS

很长一段时间，JavaScript 只是为浏览器写代码。Node.js 改变了这一切，它允许我们用 JavaScript 编写可以运行在服务器上的应用程序，并且可以访问浏览器做梦都想不到的 API 和系统资源。它基本上是一个完整的应用程序开发运行时， 它的应用程序全部都是创建和运行在 JavaScript 上，而不是 Java、C#、C++ 等之上。

这里我们只是用 Node.js 来管理依赖，并且将 JSX 转换为 JavaScript 所需的步骤捆在一起。将 Node.js 当作是让开发环境工作的胶水。

2. Babel

Babel 是一个 JavaScript 转换器，它将 JavaScript 变成 JavaScript（现在是将高版本的 ES6/ES7 转换为 ES5）。这听起来有点古怪，所以我来澄清一下。如果我们在代码中使用最新的 JavaScript 功能，那么旧浏览器在遇到新的函数/属性时，是不认识的。如果代码中包含有 JSX，没有浏览器会知道要用它做什么！

Babel 所做的就是将你的新奇的 JS 或者 JSX 转换成大多数浏览器能理解的 JS 形式。我们已经用了浏览器内的版本来将 JSX 转换为 JavaScript。后面，你会看到我们如何将 Babel 集成为构建过程的一部分，来将 JSX 生成为浏览器能读的 JS 文件。

3. Webpack

我们要依赖的最后一个工具是 webpack，它是一个模块打包器。先把花哨的标题放一边，你的应用包含的很多框架和库有很多依赖，你所依赖的这些功能的不同部分可能只是一个较大组件的一个子集。

你可能不要要所有不需要的代码，而 webpack 这类工具会扮重要的角色，让你只包含让应用程序能工作所需的相关代码。它们经常把所有相关的代码（甚至来自不同源文件）打包为一个文件：

我们将依赖 webpack 把 React 库、JSX 文件和任何其它 JavaScript 的相关部分打包为一个文件。它还能扩展到 CSS（LESS/SASS）文件和应用程序所用的其它类型的素材，但是这里我们只关注 JavaScript。

---

二、项目目录

项目目录

三、问题处理

1、最后一步[创建和测试应用程序]的时候如果是Windows系统要注意命令用反斜杠:

解决方法：

[Mac上输入以下代码]：

./node_modules/.bin/webpack

[Windows应该这样]：

.\node_modules\.bin\webpack

------------------------------------------------------------------------------------------------------------------

2、执行出现Can't resolve 'babel'的错误：

babel错误

解决方法：

需要在webpack.config.js文件里修改babel的配置

loader:'babel',

//修改为：

loader:'babel-loader'

webpack-config.js源码

------------------------------------------------------------------------------------------------------------------

3、ERROR in Cannot find module 'babel-core'. using react.js, webpack, and express server

解决方法：

在终端/命令行提示符中输入：

npm install babel-core babel-loader--save-dev