未加星标

使用yarn 制作一个webpack + react 种子

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2016 | 作者 红领巾 ] 0人收藏点击收藏
前言

很早以前写过 使用React-router和Webpack快速构建一个react程序 。很多网友发现版本太老,于是乎最近又重新组织了下结构,使用最近发布的yarn作为包管理工具,介绍下基本安装步骤。并且这次代码包提到了github上,这样大家也可以有个直接参考。

项目地址

初始化项目

* 首先确保你的node 版本 >=4.0.并且确保yarn可以正常工作,关于安装,你可以看这里 * 我们先创建个空文件夹 比如 yarn-react-webpack-seed ,然后输入命令:

yarn init

yarn 如果不行也可以用 npm init 代替。

然后初始化 package.json ,填写一些基本信息 接下来我们开始安装依赖项,我的 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放到主机上,更新我们的脚本路径就可以了。

如果有什么问题可以发送邮件给我[[email protected]]以及 原作者

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: React浏览器Facebook其实
分页:12
转载请注明
本文标题:使用yarn 制作一个webpack + react 种子
本站链接:http://www.codesec.net/view/483134.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(62)