利用yarn实现一个webpack+react种子
一、初始化项目
首先确保你的node版本>=4.0.并且确保yarn可以正常工作,关于安装yarn,你可以看这里
我们先创建个空文件夹比如yarn-react-webpack-seed,然后输入命令:
yarninit
yarn如果没有安装,全程用npm代替也没问题。
项目会初始化package.json,然后填写一些基本信息即可。
接下来我们开始安装依赖项,再package.json的添加下面内容
"dependencies":{ "react":"^15.4.0-rc.4", "react-dom":"^15.3.2", "react-router":"^2.8.1" }, "devDependencies":{ "babel":"^6.5.2", "babel-core":"^6.17.0", "babel-loader":"^6.2.5", "babel-preset-es2015":"^6.16.0", "babel-preset-react":"^6.16.0", "history":"^4.3.0", "react-hot-loader":"^3.0.0-beta.6", "webpack":"^1.13.2", "webpack-dev-server":"^1.16.2" },
运行命令:
yarninstall
你也可以自行添加依赖,输入yarnaddxxx即可。
yarnaddreact yarnaddwebpack--dev ...
项目创建好后,我们接下来创建一些必要的文件和目录;
+build +src -webpack.config.js -package.json -index.html -server.js
二、webpack
webpack(更多)是一款模块处理器,他会将你所有的代码打包成静态文件,放到你的开发的App中。
打开webpack.config.js,然后添加下面的代码:
varwebpack=require('webpack'); module.exports={ entry:[ "webpack-dev-server/client?http://localhost:9000", 'webpack/hot/only-dev-server', "./src/index" ], output:{ path:__dirname+'/build', filename:"bundle.js", publicPath:'/build/', }, module:{ loaders:[ { test:/\.js?$/, loaders:["react-hot-loader/webpack",'babel-loader?presets[]=react,presets[]=es2015'], exclude:/node_modules/ }, { test:/\.less$/, loader:"style!css!less" } ] }, plugins:[ newwebpack.NoErrorsPlugin(), newwebpack.HotModuleReplacementPlugin() ] };
这份文件大概有四个配置项entry,output,module,plugins.
entry:指定打包的入口文件,每有一个键值对,就是一个入口文件。
output:配置打包结果,path定义了输出的文件夹,filename则定义了打包结果文件的名称,filename里面的[name]会由entry中的键替换,例子中的/build/bundle.js便是生成的文件。
module:定义了对模块的处理逻辑,这里可以用loaders定义了一系列的加载器,以及一些正则。当需要加载的文件匹配test的正则时,就会进行处理。这里我们使用了react-hot和babel。babel-loader是我们使用ES-6进行开发时用于生成JS文件。
loader对文件进行处理,这正是webpack强大的原因。比如这里定义了凡是.js结尾的文件都是用babel-loader做处理,而.jsx结尾的文件会先经过jsx-loader处理,然后经过babel-loader处理。yarnadd添加这些插件。babel中的preset配置你也可以.babelr文件中定义:
{ "presets":["es2015","react"], }
plugins:这里定义了需要使用的插件,比如commonsPlugin在打包多个入口文件时会提取出公用的部分,生成common.js。
这个时候我们再package.json中加入script字段,
"scripts":{ "start":"nodeserver.js", "build":"webpack--progress--colors" }
这个时候我们输入一个yarnstart命令时候我们会启动一个webpackserver这个时候你可以访问http://localhost:9000/看到我们的页面了;如果你使用yarnrunbuild时候可以将文件自动生成到bulid/下。
接下来我们新建index.html文件
<!doctypehtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>React+React-Router+Webpack+YarnSeed</title> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=device-width,initial-scale=1.0,user-scalable=no"> </head> <body> <divid="app"></div> <scriptsrc="./build/bundle.js"></script> </body> </html>
在index.html中最重要的是引入bundle.js,实际上index.html你可以随意修改任何代码,重要是的引入生成后的文件以及含有react渲染的DOM。
三、React-router
完成项目的基本创建,接下来我们创建src/index.js项目的入口文件。代码如下:
importReactfrom'react'; importReactDOMfrom'react-dom'; importAppfrom'./app'; ReactDOM.render(<App/>,document.getElementById('app'));
接下来我们再创建一些包含路由组件的文件src/app.js
importReact,{Component}from'react'; import{render}from'react-dom'; import{Router,Route,hashHistory}from'react-router'; //components importLinksfrom'./components/links.js'; importStartfrom'./components/start.js'; importGuidefrom'./components/guide.js'; importHowfrom'./components/how.js'; classAppextendsComponent{ render(){ return( <Routerhistory={hashHistory}> <Routepath="/"component={Links}> <Routepath="/start"component={Start}/> <Routepath="/how"component={How}/> <Routepath="/guide"component={Guide}/> </Route> </Router> ); } } exportdefaultApp;
头部是我们将要用的react和react-router的模块引进来。同时我们把用到的组件Links,Start,Guide等引进来。然后我们需要配置router
在Route中设置具体的path和组件。
接下来我们看看如何进行路由的切换,这些内容存放到src/components/links.js中。
importReactfrom'react'; import{Link}from'react-router' letLinks=React.createClass({ render(){ return( <div> <aside> <h4>Categories</h4> <ulrole="nav"> <li><Linkto="/start"activeStyle={{color:'#3498db'}}>Start</Link></li> <li><Linkto="/how"activeStyle={{color:'#3498db'}}>How</Link></li> <li><Linkto="/guide"activeStyle={{color:'#3498db'}}>Guide</Link></li> </ul> </aside> <divclassName="pagemain"> {this.props.children} </div> </div> ); } }); exportdefaultLinks;
在Link中我们可以指定具体的路由地址。
剩下的就是添加组件了,比如我们添加一个简单的start.js到components下面。
importReactfrom'react'; letStart=React.createClass({ render(){ return( <divclassName="c-home"> <imgalt="guide"src="http://img1.vued.vanthink.cn/vuedd144134a46129d7068d36025d64ba905.png"/> <h4>React+React-Router+Webpack+YarnSeed</h4> </div> ); } }); exportdefaultStart;
其他的组件代码就不详细展示了。
这个时候我们输入yarnrunbuild,我们可以看到build下会生成一个bundle.js文件。如果输入yarnrunstart就可以看见页面了
本地输入yarnstart然后访问http://localhost:9000就可以看到自己写的内容了。
关于React-Router的更多配置,可以参考官方文档的教程。
四、发布
实际上我们有很多方法可以上线你的服务,但是非常好的一件事情是webpack可以轻松的使用生成的文件。其中你可以快速的将这些资源文件放到cdn上,然后将index.html放到主机上,更新我们的脚本路径就可以了。
这次改变用yarn的安装速度确实比原来npm快了很多几乎都是10s内就完成了。不需要长时间等待或者切换taobaonpm镜像。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。