配置React的Babel 6和Webpack 2环境
2016-08-31 22:42
1146 查看
Facebook的一帮子工程师在忙碌之余开发除了一套前段UI框架
项目地址：https://github.com/future-challenger/petshop/tree/master/client
虽然学
按照要求填写
使用npm安装webpack。
Webpack需要某些配置才能完成给他的工作。所以我们需要创建一个
在该文件中添加如下的代码。
Webpack的配置最少需要两项，一个是入口属性，一个是输出属性。
就如同配置项名称所表达的一样。entry是打包所需要的入口文件。如果你对静态语言，比如c/c++之类的熟悉的话。这个入口文件就是c/c++包含main方法的文件。Webpack支持多个入口文件。这里目录src/client/app里的index.jsx文件就是整个应用的入口文件。
output指明webpack在打包完成后需要做什么。这里，使用src/client/public目录存放打包后生成的文件bundle.js。
在src/client/app目录下创建文件index.jsx。并添加如下代码。
在terminal里输入下面的命令。
命令会调用webpack，生成开发环境下的bundle.js文件以及关联的map文件bundle.js.map。这两个文件都在配置文件制定的目录src/client/public下。
但是目前只看到了编译之后的js文件，不够直观。在目录src/client下创建一个index.html文件。这样js文件是否加载成功都能看到了。
现在打开浏览器，你就会看到“Yo”了。
注意：
因此，如果我们要使用React代码，我们就需要使用一个工具把JSX和ES2015翻译成浏览器都支持的语法。
在安装webpack的时候我们就接触到了一个概念加载器，Webpack就是用这个加载器来翻译指定的文件的。
使用npm安装babel-loader。
babel-preset-es2015和babel-preset-react是
创建一个.babelrc的文件，并添加一下内容。
下一步就是告诉webpack使用
打开webpack.config.js并添加如下内容。
现在环境配置就都完成了。下面写几行代码体验一下。
把index.jsx文件里的
执行我们上面说的命令。
现在你就可以在浏览器里看到Yo React了。
现在webpack就在监视模式下运行了，每次文件修改发生之后都会自动打包。要看到实际效果，可以把Yo React修改成任何其他的字符串。之后在浏览器里刷新一下就会看到结果。
如果你连刷新浏览器都懒得可以使用react-hot-loader。
在packages.json文件里修改。
现在使用命令
创建一个新的文件叫做AwesomeComponent.jsx,并添加如下代码。
在index.jsx文件中引入。
如果webpack已经运行在监视模式下了，那么直接刷新一下浏览器就可以看到
React。这个框架最大的有点就在于让UI的开发都基于
组件，这样View都是根据props和state变化的。
项目地址：https://github.com/future-challenger/petshop/tree/master/client
虽然学
React比起来其他的前端框架要容易不少，但是其生态的各种工具（Babel, Webpack 2）却着实让人费一番功夫。事实上，这些工具不只适用于
React。但是为了发挥
ES2015和
JSX的威力需要它们。这里，我们主要讨论如何建立
React的开发环境，工具的事不做主要讨论。
现在开始进入正题
创建一个目录react-demo的目录，并在里面初始化npm项目。mkdir react-demo cd react-demo npm init
按照要求填写
npm init命令需要的输入内容就可以。
安装配置Webpack
Webpack是一个模块打包工具，可以把模块以及其依赖项一起打包成静态资源的工具。由于对加载器的支持，webpack和React完美契合。本文的后面会详细讨论。
使用npm安装webpack。
npm install webpack --save-dev
Webpack需要某些配置才能完成给他的工作。所以我们需要创建一个
webpack.config.js的配置文件。
touch webpack.config.js
在该文件中添加如下的代码。
var webpack = require('webpack');
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');
var config = {
entry: APP_DIR + '/index.jsx',
output: {
path: BUILD_DIR,
filename: 'bundle.js'
}
};
module.exports = config;Webpack的配置最少需要两项，一个是入口属性，一个是输出属性。
APP_DIR指向React项目的代码所在目录，
BUILD_DIR指向打包后文件的输出目录。
就如同配置项名称所表达的一样。entry是打包所需要的入口文件。如果你对静态语言，比如c/c++之类的熟悉的话。这个入口文件就是c/c++包含main方法的文件。Webpack支持多个入口文件。这里目录src/client/app里的index.jsx文件就是整个应用的入口文件。
output指明webpack在打包完成后需要做什么。这里，使用src/client/public目录存放打包后生成的文件bundle.js。
在src/client/app目录下创建文件index.jsx。并添加如下代码。
console.log('Hello World!');在terminal里输入下面的命令。
$ ./node_modules/.bin/webpack -d
命令会调用webpack，生成开发环境下的bundle.js文件以及关联的map文件bundle.js.map。这两个文件都在配置文件制定的目录src/client/public下。
但是目前只看到了编译之后的js文件，不够直观。在目录src/client下创建一个index.html文件。这样js文件是否加载成功都能看到了。
<html> <head> <meta charset="utf-8"> <title>React.js using NPM, Babel6 and Webpack</title> </head> <body> <div id="app" /> <script src="public/bundle.js" type="text/javascript"></script> <span style="float:center">Yo!</span> </body> </html>
现在打开浏览器，你就会看到“Yo”了。
注意：
有一个webpack的加载器`html-loader`可以自动创建html文件。里面会把编译以后的js文件的路径添加好。
使用Babel-Loader
就如前文所说，使用JSX和ES2015我们的开发效率会更高。但是JSX语法和ES2015在某些浏览器里是不兼容的。因此，如果我们要使用React代码，我们就需要使用一个工具把JSX和ES2015翻译成浏览器都支持的语法。
Babel就是干这个用的。
在安装webpack的时候我们就接触到了一个概念加载器，Webpack就是用这个加载器来翻译指定的文件的。
使用npm安装babel-loader。
npm install babel-loader babel-preset-es2015 babel-preset-react --save-dev
babel-preset-es2015和babel-preset-react是
babel-loader使用的插件。专门用来翻译JSX和ES2015语法。安装之后还需要配置一下才能使用。
创建一个.babelrc的文件，并添加一下内容。
touch .babelrc
{
"presets": ["es2015", "react"]
}下一步就是告诉webpack使用
babel-loader来打包文件。
打开webpack.config.js并添加如下内容。
var webpack = require('webpack');
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');
var config = {
entry: APP_DIR + '/index.jsx',
output: {
path: BUILD_DIR,
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.jsx$/,
use: [
'babel-loader',
],
include: [
// path.resolve(__dirname, "app")
APP_DIR
],
},
};
module.exports = config;loaders属性对应的值是一个数组。不过我们只是用
babel-loader。每一个加载器都需要通过
test属性指定可以处理的文件的后缀。我们的
babel-loader用来处理.js和.jsx文件。
include属性指定处理哪个目录下的文件。
loader属性就是加载器的名称。
现在环境配置就都完成了。下面写几行代码体验一下。
Hello React
使用npm安装react和react-dom。npm install react react-dom --save
把index.jsx文件里的
console.log(...)替换成下面的代码。
import React from 'react';
import {render} from 'react-dom';
class App extends React.Component {
render() {
return <p> Yo, React </p>
}
}
render(<App />, document.getElementById('app'));执行我们上面说的命令。
./node_modules/.bin/webpack -d
现在你就可以在浏览器里看到Yo React了。
更进一步
让webpack监视文件变化
每次修改了文件之后还要停止-启动一次webpack的命令实在是太麻烦了。我们可以简单的修改一下命令。./node_modules/.bin/webpack -d --watch
现在webpack就在监视模式下运行了，每次文件修改发生之后都会自动打包。要看到实际效果，可以把Yo React修改成任何其他的字符串。之后在浏览器里刷新一下就会看到结果。
如果你连刷新浏览器都懒得可以使用react-hot-loader。
使用npm运行
命令./node_modules/.bin/webpack可以简化一下。
在packages.json文件里修改。
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack -d --watch",
"build": "webpack -p"
},现在使用命令
npm run build就可以让webpack在产品模式下运行了。在这个模式下会自动压缩打包好的文件。命令
npm run dev会在监视模式下运行webpack。
添加一些文件
在示例中，我们只有一个叫做App的组件。我们来添加更多组件。
创建一个新的文件叫做AwesomeComponent.jsx,并添加如下代码。
import React from 'react';
class AwesomeComponent extends React.Component {
constructor(props) {
super(props);
this.state = {likesCount: 0};
this.onLike = this.onLike.bind(this);
}
onLike() {
let newLikesCount = this.state.likesCount + 1;
this.setState({likesCount: newLikesCount});
}
render() {
return (
<div>
Likes: <span>{this.state.likesCount}</span>
<div><button onClick={this.onLike}>Like Me</button></div>
</div>
);
}
}
export default AwesomeComponent;在index.jsx文件中引入。
import React from 'react';
import {render} from 'react-dom';
import AwesomeComponent from './AwesomeComponent.js';
class App extends React.Component {
render() {
return (
<div>
<p> Yo, React </p>
<AwesomeComponent />
</div>
)
}
}
render(<App />, document.getElementById('app'));如果webpack已经运行在监视模式下了，那么直接刷新一下浏览器就可以看到
AwesomeComponent的运行结果了。
总结
本文可以用来指导你配置React的开发环境。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用webpack、babel、react、antdesign配置单页面应用开发环境
- Material-UI + React + Babel + Webpack 环境配置
- 配置React的Babel 6和Webpack 2环境
- Material-UI + React + Babel + Webpack 环境配置
- React + Typescript + Webpack 开发环境配置
- React+webpack 的开发环境配置步骤（二）
- 手把手教你webpack、react和node.js环境配置（上篇）
- React+webpack 的开发环境配置步骤（三）
- React+Webpack+Babel开发环境的搭建
- webpack+react项目初体验——记录我的webpack环境配置
- webpack入门+react环境配置
- react+webpack+babel环境搭建
- 使用webpack和babel搭建react开发环境
- React+Webpack+babel开发环境搭建
- Webpack+Babel+React开发环境搭建
- 在React+Babel+Webpack环境中使用ESLint
- webpack配置开发环境（html-webpack-plugin、css-loader、less-loader、babel-loader）
- webpack入门+react环境配置
- 手把手教你webpack、react和node.js环境配置（下篇）
- webpack +Reactjs +babel 加载器配置