Webpack+React+ES6入门指南[转]
React无疑是今年最火的前端框架，github上的star直逼30,000，基于React的React Native的star也直逼20,000。有了React，组件化似乎不再步履蹒跚，有了React Native，前端的边界似乎广阔无边。而Webpack凭借它异步加载和可分离打包等优秀的特性，走在取代Grunt和Gulp的路上。而面向未来的ES6，模块化的支持似乎已成定局。
我们现在就可以打造自己的Webpack+React+ES6环境并且开始探索起来。
这篇文章就给还没走在这条路上的前端一个入门的指南。
文章导读：
一、先把例子跑起来（setup your background）
可以fork我在github上的[react-webpack]demo项目，也可以从头开始：
1.1 我们在名为react-webpack的新项目中要做的第一件事，就是新建一个package.json文件，它看起来应该是这个样子的：
{
"name": "react-webpack",
"version": "1.0.0",
"description": "webpack demo",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --hot --progress --colors",
"build": "webpack --progress --colors"
},
"repository": {
"type": "git",
"url": ".."
},
"keywords": [
"react",
"webpack"
],
"author": "yixuan",
"devDependencies": {
"babel-core": "^5.8.25",
"babel-loader": "^5.3.2",
"css-loader": "^0.12.1",
"react": "^0.13.3",
"react-hot-loader": "^1.3.0",
"react-router": "^0.13.3",
"webpack": "^1.12.2",
"webpack-dev-server": "^1.11.0"
},
"dependencies": {
"lodash": "~3.10.1",
"react-kendo": "~0.13.11"
}
}
1.2 第二步就是创建我们webpack的配置文件webpack.config.js：
var webpack = require('webpack');
module.exports = {
entry: [
'webpack/hot/only-dev-server',
"./js/app.js"
],
output: {
path: './build',
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ },
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
{ test: /\.css$/, loader: "style!css" }
]
},
resolve:{
extensions:['','.js','.json']
},
plugins: [
new webpack.NoErrorsPlugin()
]
};
1.3 同时我们还需要在入口文件index.html中引入程序跑起来的一些必要的东西，虽然他的作用看起来没有那么明显：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>New React App</title>
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<section id="react"></section>
<script src="bundle.js"></script>
</body>
</html>
注意，这里面引用的bundle.js文件非常重要，他是我们打包后的入口文件，不引入它程序是跑不起来的。
app.js文件是程序的入口文件，我们在这里处理简单的类似路由的逻辑：
import React from 'react';
import Router from 'react-router';
import { DefaultRoute, Link, Route, RouteHandler } from 'react-router';
import HelloHandler from './hello.js';
let App = React.createClass({
render() {
return (
<div className="nav">
<Link to="app" className="homelink">Home </Link>
<Link to="hello" className="hellolink"> Say Hello</Link>
{/* this is the importTant part */}
<RouteHandler/>
</div>
);
}
});
let routes = (
<Route name="app" path="/" handler={App}>
<Route name="hello" path="/hello" handler={HelloHandler}/>
</Route>
);
Router.run(routes, function (Handler) {
React.render(<Handler />, document.body);
});
相信你已经看到了ES6的身影，没错，在这里，我们写ES6的代码,只要新建js文件，我们就在里面写ES6的代码。
我们在入口文件上放上了一个连接，分离我们最熟悉的helloworld代码。也是为了方便以后我们写其他的例子可以有单独的文件，易于管理和查看，就像下面看到的项目目录一样，一个js文件就是一个小例子的代码。
hello.js:
import React from 'react';
let Hello = React.createClass({
render() {
return(<div>Hello World!</div>);
}
});
export default Hello;
1.4 执行：
1 npm install
再加上一些必要的文件入口，我们的项目现在看起来应该是这样的：
从我的github上面fork下来的目录应该是这样的：
里面包含了一些我已经写好的小例子。当然，我们按照上面的目录来创建就没错啦。
1.5 程序跑起来，执行：
1 npm start
然后访问[http://localhost:8080/webpack-dev-server/]我们就可以看到项目跑起来了。
二、理解React
随着Facebook开源了React Native for Android，React的前景似乎更加光明。它从最早的UI框架慢慢演变成了一套web应用的解决方案，并且它衍生出来的React Native更是承载着宏伟的目标：learn once, write anywhere。这对前端来说似乎是种不可抗拒的吸引力。
React有三个关键词：
- Just the ui
- virtual dom
- data flow
要理解React，我从它的这三个关键词入手。
2.1 Just the ui
React 负责UI层面的展现，尽管很多人用React作[MVC]架构中的View层,但这并不是React的本意。
一般的情况下，我们在开发过程中，通常会使用模板或者直接使用HTML来构建UI，而HTML是静态的，使用模板在大多数情况下是可以满足需求的，但是在复杂的逻辑情境中就显得有些吃力了，过多的if else或者逻辑控制在模板里，都会让代码变得难以维护，当然这还是说整个项目中使用统一的模板的情况下。
React换了一种思路解决问题，它把UI拆分成组件，而不是通过模板引擎和展示逻辑，使得它可以易于拓展和维护。因此它引入了JSX这种语法规则，可以让我们使用类似HTML的语法去写js的函数调用。
2.2 virtual dom
浏览器渲染页面的一般过程通常是这样的：
1 加载html->生成DOM树->解析css生成Render树->生成页面
那么React的virtual dom是怎么做的呢？
1 生成virtual dom->diff->必要的DOM更新
在这里面大部分的操作放在js中去完成，因为我们都知道dom操作是很昂贵的。所以在一般的情况下React的性能还是很不错的。
2.3 data flow
React中的数据流是沿着组件树从上到下单向流动的。
这里的data flow指的是一种应用架构的实现方式，比如说，数据存放在哪里，在哪里触发事件，如何响应用户操作。它不是React提供的什么新功能，应该是React构建应用的实践。我们理解了之后的Flux或许就更加容易理解data flow这个概念了。
2.4 Flux overview
Flux是facebook配套React强推的一种应用架构思想。它利用数据的单向流动为React的可复用的视图组件提供了补充。
与React的数据流动方式相同，在Flux架构中，数据也是单向流动的：
简单的说，所有的数据流动都会经过Dispatcher。Action可以通过action creator产生并被提供给dispatcher，但多数情况下action是通过用户与views的交互产生。
在View层捕获用户的交互，产生一个Action，通过触发注册在Dispatcher上面的事件回调，使得相关的Store响应Action，然后会触发到Store上面的onChange事件，进一步的更新View。
数据流动也始终是如上图所示的单向流动的。
实践了这个例子：[thinking in react]会对理解React的基本工作原理有很好地帮助。
三、Webpack入门
3.1 什么是Webpack？
说Webpack是类似Grunt和Gulp一样的打包工具并不合适，说Webpack是类似Browserify的模块管理工具也还有点类似。然而Webpack做的事情远不止这些。
Webpack出自facebook的Instagram团队，在网上找到了比较好的对它主要特性的归纳，如下：
1 同时支持CommonJS和AMD模块（对于新项目，推荐直接使用CommonJS）；
2 串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对CoffeeScript、ES6的支持；
3 可以基于配置或者智能分析打包成多个文件，实现公共模块或者按需加载；
4 支持对CSS，图片等资源进行打包，从而无需借助Grunt或Gulp；
5 开发时在内存中完成打包，性能更快，完全可以支持开发过程的实时打包需求；
6 对sourcemap有很好的支持，易于调试。
Webpack将项目中的一切资源都看做是模块，模块之间可以互相依赖，Webpack对他们做统一的管理，打包和发布，用于我们的工作流中。
3.2 webpack.config.js文件
在前面我们跑起来了的例子中，我们可以看到webpack.config.js文件，所有跟webpack有关的工作，都在这个文件中进行。
它看起来，目前是这样的：
var webpack = require('webpack');
module.exports = {
entry: [
'webpack/hot/only-dev-server',
"./js/app.js"
],
output: {
path: './build',
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ },
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
{ test: /\.css$/, loader: "style!css" },
{test: /\.less/,loader: 'style-loader!css-loader!less-loader'}
]
},
resolve:{
extensions:['','.js','.json']
},
plugins: [
new webpack.NoErrorsPlugin()
]
};
它通常放在根目录下，他自己也是一个标准的Commonjs模块，我们可能已经看到了require，module.exports这样的标志性关键词。
它的主要的配置参数有：
- entry：
entry: [
'webpack/hot/only-dev-server',
"./js/app.js"
],
它定义了打包的入口文件，数组中的文件会按顺序进行，并且它会自行解决依赖问题。
在这里其实我们还定义了Webpack开发服务器，webpack-dev-server，我们可以在package.json文件中看到：
"scripts": {
"start": "webpack-dev-server --hot --progress --colors",
"build": "webpack --progress --colors"
},
这也是我们npm start启动了服务器之后访问http://localhost:8080/webpack-dev-server/可以访问到页面的原因。
- output：
output: {
path: './build',
filename: "bundle.js"
},
它定义了输出文件的的位置，包括路径，文件名，还可能有运行时的访问路径（publicPath）参数。
- module：
webpack将所有的资源都看做是模块，而模块就需要加载器：
module: {
loaders: [
{ test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ },
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
{ test: /\.css$/, loader: "style!css" },
{test: /\.less/,loader: 'style-loader!css-loader!less-loader'}
]
},
对于不同的文件，我们可以自行配置使用不同的加载器。也可以自行实现合心意的加载器。
在这里我们配置了babel-loader，可以让我们在js文件中随心所欲的开始写ES6规范的代码。
Webpack的加载器之间可以进行串联，一个加载器的输出可以成为另一个加载器的输入。比如LESS文件先通过less-load处理成css，然后再通过css-loader加载成css模块，最后由style-loader加载器对其做最后的处理，从而运行时可以通过style标签将其应用到最终的浏览器环境。
- resolve：
resolve:{
extensions:['','.js','.json']
},
Webpack 是使用类似 Browserify 的方式在本地按目录对依赖进行查找。
resolve属性中的extensions数组中用于配置程序可以自行补全哪些后缀。比如说我们要require一个common.js文件，添加了这个配置我们只要写：require('common')；就可以了。
- plugin:
plugins: [
new webpack.NoErrorsPlugin()
]
我们可以在plugin参数中配置我们需要用到的各种各样的插件。比如我们想将多个文件分开打包，可能会用到:
{
entry: { a: "./a", b: "./b" },
output: { filename: "[name].js" },
plugins: [ new webpack.CommonsChunkPlugin("init.js") ]
}
四、现在开始探索&&扩展阅读
面向未来的ES6，模块化的支持似乎已成定局。我们通过从webpack中的配置即可马上开始编写ES6的代码。
通过打造这样的工作环境，我们可以同时使用多种面向未来的新技术开始新的探索。
现在就开始探索吧！不要等到未来到来，却发现自己还没做好准备。
扩展阅读：
Webpack+React+ES6入门指南[转]的更多相关文章
- Webpack+React+ES6开发模式入门指南
React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了Reac ...
- webpack+react+es6开发模式
一.前言 实习了两个月,把在公司用到的前端开发模式做个简单的整理.公司里前端开发模式webpack+react+redux+es6,这里去掉了redux. webpack, react, redux等 ...
- webpack + react + es6, 并附上自己碰到的一些问题
最近一直在学react,react的基础部分已经学得差不多了,然而自己并没有做详细的记录,有兴趣的同志可以参考阮一峰老师的教程,个人觉得挺不错的,链接如下:https://github.com/rua ...
- Webpack+React+ES6 最新环境搭建和配置（2017年）
刚刚学习React,发现React在ES6下的语法才是本体,结合ES6新的语言特性,使组件化开发显得更加直观.而且现在的Angular2也开始使用支持强类型的TypeScript,转译(transpi ...
- webpack学习（六）—webpack+react+es6（第3篇）
接上篇 : webpack学习(六)—webpack+react+es6(第2篇) 上篇其实是有问题的,问题在取服务器数据这块.this.props 表示那些一旦定义,就不再改变的特性,而 this. ...
- webpack学习（六）—webpack+react+es6（第2篇）
接上篇 webpack学习(五)—webpack+react+es6(第1篇) 本文做个简单的图片加文字的页面.其中,配置文件跟上篇一致.项目结构: index.html <!DO ...
- webpack学习（五）—webpack+react+es6（第1篇）
如果你看过webpack学习系列的前一个文章,接下来做的东西会比较简单 :webpack学习(四)— webpack-dev-server react发展的很快,现在大部分开发react相关的项目,都 ...
- Webpack+React项目入门——入门及配置Webpack
一.入门Webpack 参考文章:<入门Webpack,看这篇就够了> 耐心看完这篇非常有帮助 二.React+Webpack环境配置 参考文章:<webpack+react项目初体 ...
- webpack React+ES6
webpack踩坑之路——构建基本的React+ES6项目 webpack是最近比较火的构建工具,搭配上同样比较火的ReacJS与ES6(ES2015)一定是现在很多潮流 programmer 的 ...
随机推荐
- 关于c#的一些笔记
序: 在vs中,可以生成三种项目: 第一种:控制台项目:用于练习C#语法 第二种:桌面程序项目:比如我们经常看到的桌面程序(CS). 第三种:web项目:用于开发网站 1.我们先来说一下.net和C ...
- 使用SignalR+Asp.net创建实时聊天应用程序
一.概述: 使用 ASP.NET 那么 SignalR 2 创建一个实时聊天应用程序.将 SignalR 添加 MVC 5 应用程序中,并创建聊天视图发送并显示消息. 在Demo中,将学习Signal ...
- Docker源码编译
官方建议docker源码编译在docker容器内进行,因为官方提供的容器内已经继承了编译需要的环境,如果非要自己搭建编译环境也不是不可以,就是稍微有些繁琐.以下以1.8.2版本为例. 1.pull d ...
- jquery动态创建节点
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 利用ng-click、ng-switch和click-class制作切换的tabl
效果如下图,当分别点击1,2,3时,下面的不同颜色的div会切换 <html ng-app> <head> <title></title> <sc ...
- An unexpected error has occurred" error appears when you try to create a SharePoint Enterprise Search Center on a Site Collection
The Enterprise Search Center requires that the Publishing feature be enabled. To enable the Publishi ...
- Android Studio 项目代码全部消失--出现原因及解决方法
出现原因,自己把项目地址父层目录文件名修改了,导致原来打开的项目位置不对,代码全部消失.这样就只要关闭项目,打开一下你修改路径下的项目即可.因为原来的项目还在原来的路径下寻找,但是原来的路径发生了改变
- unity下载文件二（http同步下载）
说到下载,其实C#里的网络模块,真的是被各种封装,最终就看你对这个语言中库的熟悉程度了. 抛开C#中IO效率的弊病不说,真的很容易,记住,太过于注重效率或者追求极致,你将会死的很惨,有时候折中才是最好 ...
- CollectionView 简用
创建一个CollectionView 分为几个步骤 1.先创建布局FlowLayout 设置布局格式 2.创建CollectionView 并使用布局Flowlayout -initWithFram ...
- OC登陆界面登陆按钮动画
1.原作者:@entotsu 1.1 原作者连接:https://github.com/entotsu/TKSubmitTransition 2.使用: import "HyTransiti ...