react环境配置

来源：互联网发布：水浒卡片全套淘宝编辑：程序博客网时间：2024/05/18 01:52

前言

前几天学习react，看了阮一峰的react入门博客，参考链接：
http://www.ruanyifeng.com/blog/2015/03/react。

在这篇博客中，所有的例子都是通过引入三个相关的js文件来实现react。下面看下第一个demo代码：

<!DOCTYPE html><html>  <head>    <script src="../build/react.js"></script>    <script src="../build/react-dom.js"></script>    <script src="../build/browser.min.js"></script>  </head>  <body>    <div id="example"></div>    <script type="text/babel">      ReactDOM.render(        <h1>Hello, world!</h1>,        document.getElementById('example')      );    </script>  </body></html>

对于引入的这三个js文件，作者这样写到：

“上面代码一共用了三个库： react.js 、react-dom.js 和 Browser.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。“

也就是说在上面的例子中，我们给浏览器的是一个JSX文件。浏览器需要将JSX转化成ES6，然后再将ES6转为ES5，最后执行ES5。而这些转化很消耗时间，所以做线上项目的时候，我们就需要在线下先将这些文件进行转化，然后给客户端浏览器直接返回转化好的ES5。这样，用户端的渲染速度就大大提升，从而提高用户体验。

下面就说一下如何搭建一个react环境，来实现上面所说的功能。

1、Node.js

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。
Node.js 的包管理器 npm，是全球最大的开源库生态系统。

我们需要使用npm进行包管理，所以需要先安装nodejs。安装参考官方文档：
http://nodejs.cn/download/。

可以使用如下命令来测试是否安装成功：

node -vnpm  -v

2、使用npm进行项目初始化

在用nodejs进行创作前，首先应该初始化配置文件，这条命令主要为了自动生成package.json。

按提示，一步步来完成项目文件的配置，没有的可以不写，直接enter,这样初始
化时会创建默认的文件，最后创建完的目录如下所示:

每个项目的根目录下面，一般都有一个package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。

package.json这是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等。在终端中使用npm init命令可以自动创建这个package.json文件。

输入这个命令后，终端会问你一系列诸如项目名称，项目描述，作者等信息，不过不用担心，如果你不准备在npm中发布你的模块，这些问题的答案都不重要，回车默认即可。

具体更详细的关于package.json的文档，可以参考如下文档：
http://javascript.ruanyifeng.com/nodejs/packagejson.html

3、使用NPM配置react环境

执行以下命令，加载相关依赖：

npm install --save react react-dom babelify babel-preset-react babel-preset-es2015

4、webpack热加载配置

首先在跟目录下新建一个index.html的页面，新建一个index.js。

页面内容如下：

<div id="example">123</div><script type="text/javascript" src="./src/index.js"></script>

var React  = require('react');var ReactDOM = require('react-dom'); ReactDOM.render(    <h1>hello react</h1>,    document.getElementById("example"));

此时如果直接引入index.js文件，浏览器是会报错的。因为它不知道如何解析JSX。下面就介绍下如何用webpack实现热加载。

首先在根目录下新建一个package.config.js，文件内容如下：

var webpack = require('webpack');var path = require('path');module.exports = {  context: __dirname + '/src',  devtool: debug ? "inline-sourcemap" : null,  entry: "./js/index.js",  module: {    loaders: [      {        test: /\.js?$/,        exclude: /(node_modules)/,        loader: 'babel-loader',        query: {          presets: ['react', 'es2015'],        }      }    ]  },  output: {    path: __dirname + '/src/',    filename: "bundle.js"  }};

之后安装webpack：

npm install -g webpack//全局安装webpacknpm install -g webpack-dev-server//全局安装webpack开发的服务器npm install -save webpack-dev-server //在目录文件夹下安装npm install -save webpacknpm install --save-dev babel-loader babel-core//安装babel-loader babel-core

执行完以上命令之后，package.json文件的内容如下：

{  "name": "hello-react",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "author": "timor",  "license": "ISC",  "dependencies": {    "babel-preset-es2015": "^6.24.1",    "babel-preset-react": "^6.24.1",    "babelify": "^7.3.0",    "react": "^15.6.1",    "react-dom": "^15.6.1",    "webpack": "^3.1.0",    "webpack-dev-server": "^2.5.1"  }}

执行webpack，会生成一个bundle.js。然后在index.html中引入这个js。刷新页面，我们就可以看到刚刚所写的内容。

为了避免没次修改代码都要手动的打包一次，再来做点配置：

webpack --watch//监听变动并自动打包

此时，我们已经不需要没次都手动的去打包代码了，每次改动代码以后webpack都会自己重新打包，重新刷新页面就可以看到修改后的效果了。

那么，想不想让你的浏览器监测你都代码的修改，并自动刷新修改后的结果，其实Webpack提供一个可选的本地开发服务器，这个本地服务器基于node.js构建，可以实现你想要的这些功能，不过它是一个单独的组件，在webpack中进行配置之前需要单独安装它作为项目依赖。

npm install --save-dev webpack-dev-server

这时候，刚刚配置的webpack-server就派上用场了。

直接执行命令 webpack-dev-server --hot --inline

在浏览器输入http://localhost:8080/就可以了～

大功告成，最后附上项目目录：
这里写图片描述

阅读全文

1 0