转载

使用React-route和Webpack快速构建一个react程序

初始化项目

我们先创建个空文件夹，然后初始化 package.json ,填写一些基本信息。

$ npm init

接下来我们开始安装依赖项，我的 package.json 的依赖项如下

  "devDependencies": {     "babel": "^5.5.6",     "babel-core": "^5.5.6",     "babel-loader": "^5.1.4",     "history": "^1.13.1",     "react": "^0.13.3",     "react-hot-loader": "^1.2.7",     "react-router": "^0.13.3",     "webpack": "^1.12.6",     "webpack-dev-server": "^1.12.1"   }

运行命令:

$ npm install

项目创建好后，我们接下来创建一些必要的文件和目录；

$ mkdir js css && touch index.html webpack.config.js

webpack

webpack （更多）是一款模块处理器，他会将你所有的代码打包成静态文件，放到你的开发的App中。

打开webpack.config.js，然后添加下面的代码:

var webpack = require('webpack');   module.exports = {       entry: [       'webpack/hot/only-dev-server',       "./js/app.js"     ],     output: {         path: __dirname + '/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" }         ]     },     plugins: [       new webpack.NoErrorsPlugin()     ] };

这份文件大概有四个配置项 entry , output , module , plugins .

entry :指定打包的入口文件，每有一个键值对，就是一个入口文件。

output ：配置打包结果，path定义了输出的文件夹，filename则定义了打包结果文件的名称，filename里面的[name]会由entry中的键替换,例子中的 /build/bundle.js 便是生成的文件。

resolve ：定义了解析模块路径时的配置，常用的就是extensions，可以用来指定模块的后缀，这样在引入模块时就不需要写后缀了，会自动补全.

module ：定义了对模块的处理逻辑，这里可以用loaders定义了一系列的加载器，以及一些正则。当需要加载的文件匹配test的正则时，就会进行处理。这里我们使用了 react-hot 和 babel 。 babel-loader 是我们使用ES-6进行开发时用于生成JS文件。

最后我们生成了一个style.css仅仅做个例子，告诉我们如何引入样式文件，实际上我们可以加载诸如 sass-loader 这样的加载器。

loader 对文件进行处理，这正是webpack强大的原因。比如这里定义了凡是.js结尾的文件都是用babel-loader做处理，而.jsx结尾的文件会先经过jsx-loader处理，然后经过babel-loader处理。当然这些loader也需要通过npm install安装。

plugins : 这里定义了需要使用的插件，比如commonsPlugin在打包多个入口文件时会提取出公用的部分，生成common.js。

NoErrorsPlugin : 定义代码出现错误时的时受否自动重新加载。

这个时候我们再 package.json 中加入script 字段，

"scripts": {     "start": "webpack-dev-server --hot --progress --colors",     "build": "webpack --progress --colors"   }

这个时候我们输入一个 npm start 命令时候我们会启动一个webpack server这个时候你可以访问 localhost:8080/webpack-dev-server/#/ ;如果你使用 npm run build 时候可以将文件自动生成到 bulid/ 下。

接下来我们新建 index.html 文件

<!doctype html>   <html lang="en">     <head>     <meta charset="utf-8">     <title>New React App</title>   </head>   <body>     <section id="react"></section>     <script src="bundle.js"></script>   </body> </html>

现在我们访问浏览器可以便会引进新创建的 bundle.js ,实际上你可以引进任何你想要的资源。

React-router

完成项目的基本创建，接下来我们创建 app.js 项目的入口文件。代码如下:

import React from 'react';   import Router from 'react-router';   import { DefaultRoute, Link, Route, RouteHandler } from 'react-router';  import LoginHandler from './components/Login.js';  let App = React.createClass({     render() {     return (       <div className="nav">         <Link to="app">Home</Link>         <Link to="login">Login</Link>          {/* this is the importTant part */}         <RouteHandler/>       </div>     );   } });  let routes = (     <Route name="app" path="/" handler={App}>     <Route name="login" path="/login" handler={LoginHandler}/>   </Route> );  Router.run(routes, function (Handler) {     React.render(<Handler/>, document.body); });

文章头部是我们将要用的 react 和 react-router 的插件包引进来。同事我们还引入login.js作为我们的Login React 组件。接着，我们使用React 创建一个类。这个例子中，其实就是一个简单的导航条会出现所有的子组件中。我们简单的 Link 到我们的路由: App 和 Login .然后React route将会被 RouteHandler 组件初始化。

在这个App中，我们定义路由并且指定了相应的处理程序（React 组件）。我们定义了我们的根路径为app，并且其他的地址将会是App的子组件。这个例子中，我们添加了一个登录页面，用于用户登录到App中。

最后，React-router会将我们定义的一切加载到document.body中来。这就是index.html转变成我们React App.

Components

弄到这了，我们需要添加组件(Components).在我们的 /js 目录下，我们需要开始创建组件。我们创建Login.js：

import React from 'react';  let Login = React.createClass({     render() {     return(<div>Welcome to login</div>);   } });  export default Login;

其实那只是一个非常简单的组件，内容为显示"Welcaome to Login"。这个时候我们可以运行下我们的app。 npm start 然后访问 http://localhost :8080/webpack-dev-server/#

这个时候，你可以见到一个导航条上有两个链接Home 和 Login.如果点击Login这个时候可以显示我们刚刚创建的内容。

如果上面一切顺利，那么现在你可以自己创建更多内容来充实自己App.如果你项目中使用Flux(强烈推荐，地址 ),你可以在你的js 文件夹下使用任何结构。Facebook 官方也有一个使用flux聊天 Demo 可供学习。

发布

实际上我们有很多方法可以上线你的服务，但是非常好的一件事情是webpack 可以轻松的使用生成的文件。其中你可以快速的将这些资源文件放到cdn上，然后将index.html放到主机上，更新我们的脚本路径就可以了。

博客地址: http://www.jackpu.com/shi-yong-react-routehe-webpackkuai-su-gou-jian-ge-reactcheng-xu/

如果有什么问题可以发送邮件给我 kakashjack@gmail.com 以及原作者

原文 https://segmentfault.com/a/1190000004543791

正文到此结束

所属分类：编程技术

本文标签： 目录 App build kk CDN 代码开发文章 js Facebook dependencies ACE https CSS 插件博客 ip UI json http mail 配置 Document 主机 node 安装解析 core web tar HTML src
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

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

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

问题交流

使用React-route和Webpack快速构建一个react程序

初始化项目

webpack

React-router

Components

发布

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流