利用yarn实现一个webpack+react种子

利用yarn实现一个webpack+react种子

一、初始化项目

首先确保你的node 版本 >=4.0.并且确保yarn可以正常工作，关于安装yarn，你可以看这里

我们先创建个空文件夹 比如yarn-react-webpack-seed,然后输入命令：

yarn init

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"

},

运行命令:

yarn install

你也可以自行添加依赖，输入yarn add xxx即可。

yarn add react

yarn add webpack --dev

...

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

+ build

+ src

- webhttp://pack.config.js

- package.json

- index.html

- server.js

二、webpack

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

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

var webpack = 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: [

new webpack.NoErrorsPlugin(),

new webpack.HotModuleReplacementPlugin()

]

};

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

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

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

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

loader对文件进行处理，这正是webpack强大的原因。比如这里定义了凡是.js结尾的文件都是用babel-loader做处理，而.jsx结尾的文件会先经过jsx-loader处理，然后经过babel-loader处理。yarn add添加这些插件。babel中的preset配置你也可以.babelr文件中定义：

{

"presets": [ "es2015", "react"],

}

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

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

"scripts": {

"start": "node server.js",

"build": "webpack --progress --colors"

}

这个时候我们输入一个yarn start命令时候我们会启动一个webpack server这个时候你可以访问 http://localhost:9000/ 看到我们的页面了; 如果你使用yarn run build时候可以将文件自动生成到bulid/下。

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

在index.html中最重要的是引入 bundle.js,实际上index.html你可以随意修改任何代码，重要是的引入生成后的文件以及含有react渲染的DOM。

三、React-router

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

import React from 'react';

import ReactDOM from 'react-dom';

import App from './app';

ReactDOM.render(, document.getElementById('app'));

接下来我们再创建一些包含路由组件的文件src/app.js

import React, { Component } from 'react';

import { render } from 'react-dom';

import { Router, Route, hashHistory } from 'react-router';

// components

import Links from './components/links.js';

import Start from './components/start.js';

import Guide from './components/guide.js';

import How from './components/how.js';

class App extends Component {

render() {

return (

);

}

}

export default App;

头部是我们将要用的react和react-router的模块引进来。 同时我们把用到的组件Links,Start,Guide等引进来。然后我们需要配置router

在Route中设置具体的path 和组件。

接下来我们看看如何进行路由的切换，这些内容存放到src/components/links.js中。

import React from 'react';

import { Link } from 'react-router'

let Links = React.createClass({

render() {

return(

{this.props.children}

);

}

});

export default Links;

在Link 中我们可以指定具体的路由地址。

剩下的就是添加组件了，比如我们添加一个简单的start.js到components下面。

import React from 'react';

let Start = React.createClass({

render() {

return(

);

}

});

export default Start;

其他的组件代码就不详细展示了。

这个时候我们输入yarn run build,我们可以看到build下会生成一个bundle.js 文件。 如果输入 yarn run start就可以看见页面了

本地输入 yarn start 然后访问 http://localhost:9000 就可以看到自己写的内容了。

关于React-Router的更多配置，可以参考官方文档的教程。

四、发布

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

这次改变用yarn的安装速度确实比原来npm快了很多几乎都是10s内就完成了。不需要长时间等待或者切换taobao npm 镜像。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。