转载

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）
二、理解React
三、webpack入门
四、现在开始探索&&扩展阅读

一、先把例子跑起来（setup your background）

可以fork我在github上的[ react-webpack ]demo项目，也可以从头开始：

1.1 我们在名为react-webpack的新项目中要做的第一件事，就是新建一个package.json文件，它看起来应该是这个样子的：

 1 {  2   "name": "react-webpack",  3   "version": "1.0.0",  4   "description": "webpack demo",  5   "main": "index.js",  6   "scripts": {  7     "start": "webpack-dev-server --hot --progress --colors",  8     "build": "webpack --progress --colors"  9   }, 10   "repository": { 11     "type": "git", 12     "url": ".." 13   }, 14   "keywords": [ 15     "react", 16     "webpack" 17   ], 18   "author": "yixuan", 19   "devDependencies": { 20     "babel-core": "^5.8.25", 21     "babel-loader": "^5.3.2", 22     "css-loader": "^0.12.1", 23     "react": "^0.13.3", 24     "react-hot-loader": "^1.3.0", 25     "react-router": "^0.13.3", 26     "webpack": "^1.12.2", 27     "webpack-dev-server": "^1.11.0" 28   }, 29   "dependencies": { 30     "lodash": "~3.10.1", 31     "react-kendo": "~0.13.11" 32   } 33 }

View Code

1.2 第二步就是创建我们webpack的配置文件webpack.config.js：

 1 var webpack = require('webpack');  2 module.exports = {  3     entry: [  4       'webpack/hot/only-dev-server',  5       "./js/app.js"  6     ],  7     output: {  8         path: './build',  9         filename: "bundle.js" 10     }, 11     module: { 12         loaders: [ 13             { test: //.js?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ }, 14             { test: //.js$/, exclude: /node_modules/, loader: 'babel-loader'}, 15             { test: //.css$/, loader: "style!css" } 16         ] 17     }, 18     resolve:{ 19         extensions:['','.js','.json'] 20     }, 21     plugins: [ 22       new webpack.NoErrorsPlugin() 23     ] 24 };

View Code

1.3 同时我们还需要在入口文件index.html中引入程序跑起来的一些必要的东西，虽然他的作用看起来没有那么明显：

 1 <!doctype html>  2 <html lang="en">  3   <head>  4     <meta charset="utf-8">  5     <title>New React App</title>  6     <link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.css">  7     <link rel="stylesheet" type="text/css" href="css/main.css">  8   </head>  9   <body> 10     <section id="react"></section> 11     <script src="bundle.js"></script> 12   </body> 13 </html>

View Code

注意，这里面引用的bundle.js文件非常重要，他是我们打包后的入口文件，不引入它程序是跑不起来的。

app.js文件是程序的入口文件，我们在这里处理简单的类似路由的逻辑：

 1 import React from 'react';  2 import Router from 'react-router';  3 import { DefaultRoute, Link, Route, RouteHandler } from 'react-router';  4   5 import HelloHandler from './hello.js';  6   7 let App = React.createClass({  8   render() {  9     return ( 10       <div className="nav"> 11         <Link to="app" className="homelink">Home  </Link> 12         <Link to="hello" className="hellolink">  Say Hello</Link> 13         {/* this is the importTant part */} 14         <RouteHandler/> 15       </div> 16     ); 17   } 18 }); 19  20 let routes = ( 21   <Route name="app" path="/" handler={App}> 22     <Route name="hello" path="/hello" handler={HelloHandler}/> 23   </Route> 24 ); 25  26 Router.run(routes, function (Handler) { 27   React.render(<Handler />, document.body); 28 });

View Code

相信你已经看到了ES6的身影，没错，在这里，我们写ES6的代码,只要新建js文件，我们就在里面写ES6的代码。

我们在入口文件上放上了一个连接，分离我们最熟悉的helloworld代码。也是为了方便以后我们写其他的例子可以有单独的文件，易于管理和查看，就像下面看到的项目目录一样，一个js文件就是一个小例子的代码。

hello.js:

 1 import React from 'react';  2   3 let Hello = React.createClass({  4   5   render() {  6     return(<div>Hello World!</div>);  7   }  8 });  9  10 export default Hello;

View Code

1.4 执行：

1 npm install

再加上一些必要的文件入口，我们的项目现在看起来应该是这样的：

Webpack+React+ES6开发模式入门指南

从我的github上面fork下来的目录应该是这样的：

Webpack+React+ES6开发模式入门指南

里面包含了一些我已经写好的小例子。当然，我们按照上面的目录来创建就没错啦。

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架构中，数据也是单向流动的：

Webpack+React+ES6开发模式入门指南

简单的说，所有的数据流动都会经过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有关的工作，都在这个文件中进行。

它看起来，目前是这样的：

 1 var webpack = require('webpack');  2 module.exports = {  3     entry: [  4       'webpack/hot/only-dev-server',  5       "./js/app.js"  6     ],  7     output: {  8         path: './build',  9         filename: "bundle.js" 10     }, 11     module: { 12         loaders: [ 13             { test: //.js?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ }, 14             { test: //.js$/, exclude: /node_modules/, loader: 'babel-loader'}, 15             { test: //.css$/, loader: "style!css" }, 16             {test: //.less/,loader: 'style-loader!css-loader!less-loader'} 17         ] 18     }, 19     resolve:{ 20         extensions:['','.js','.json'] 21     }, 22     plugins: [ 23       new webpack.NoErrorsPlugin() 24     ] 25 };

View Code

它通常放在根目录下，他自己也是一个标准的Commonjs模块，我们可能已经看到了require，module.exports这样的标志性关键词。

它的主要的配置参数有：

- entry：

1 entry: [ 2       'webpack/hot/only-dev-server', 3       "./js/app.js" 4     ],

它定义了打包的入口文件，数组中的文件会按顺序进行，并且它会自行解决依赖问题。

在这里其实我们还定义了Webpack开发服务器，webpack-dev-server，我们可以在package.json文件中看到：

1 "scripts": { 2     "start": "webpack-dev-server --hot --progress --colors", 3     "build": "webpack --progress --colors" 4   },

这也是我们npm start启动了服务器之后访问 http://localhost:8080/webpack-dev-server/ 可以访问到页面的原因。

- output：

1 output: { 2         path: './build', 3         filename: "bundle.js" 4     },

它定义了输出文件的的位置，包括路径，文件名，还可能有运行时的访问路径（publicPath）参数。

- module：

webpack将所有的资源都看做是模块，而模块就需要加载器：

1 module: { 2         loaders: [ 3             { test: //.js?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ }, 4             { test: //.js$/, exclude: /node_modules/, loader: 'babel-loader'}, 5             { test: //.css$/, loader: "style!css" }, 6             {test: //.less/,loader: 'style-loader!css-loader!less-loader'} 7         ] 8     },

对于不同的文件，我们可以自行配置使用不同的加载器。也可以自行实现合心意的加载器。

在这里我们配置了babel-loader，可以让我们在js文件中随心所欲的开始写ES6规范的代码。

Webpack的加载器之间可以进行串联，一个加载器的输出可以成为另一个加载器的输入。比如LESS文件先通过less-load处理成css，然后再通过css-loader加载成css模块，最后由style-loader加载器对其做最后的处理，从而运行时可以通过style标签将其应用到最终的浏览器环境。

- resolve：

1  resolve:{ 2       extensions:['','.js','.json'] 3   },

Webpack 是使用类似 Browserify 的方式在本地按目录对依赖进行查找。

resolve属性中的extensions数组中用于配置程序可以自行补全哪些后缀。比如说我们要require一个common.js文件，添加了这个配置我们只要写：require('common')；就可以了。

- plugin:

1 plugins: [ 2      new webpack.NoErrorsPlugin() 3  ]

我们可以在plugin参数中配置我们需要用到的各种各样的插件。比如我们想将多个文件分开打包，可能会用到:

1 { 2   entry: { a: "./a", b: "./b" }, 3   output: { filename: "[name].js" }, 4   plugins: [ new webpack.CommonsChunkPlugin("init.js") ] 5 }

四、现在开始探索&&扩展阅读

面向未来的ES6，模块化的支持似乎已成定局。我们通过从webpack中的配置即可马上开始编写ES6的代码。

通过打造这样的工作环境，我们可以同时使用多种面向未来的新技术开始新的探索。

现在就开始探索吧！不要等到未来到来，却发现自己还没做好准备。

扩展阅读：

[ 基于webpack的前端工程化探索 ]

[ webpack入门 ]

[ webpack-howto ]

[ webpack home ]

正文到此结束

所属分类：编程技术

本文标签： js 数据智能 key dist git 调试需求 json build ip UI 代码 DOM 开源 node 配置 GitHub Document 开发服务器 map 管理解析 dependencies 关键词 web description Facebook Android 参数 http 目录 tar CSS HTML 插件 core Bootstrap App onchange src
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

Webpack+React+ES6开发模式入门指南

一、先把例子跑起来（setup your background）

二、理解React

2.1 Just the ui

2.2 virtual dom

2.3 data flow

2.4 Flux overview

三、Webpack入门

3.1 什么是Webpack？

3.2 webpack.config.js文件

- entry：

- output：

- module：

- resolve：

- plugin:

四、现在开始探索&&扩展阅读

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流