Webpack+React+ES6入门指南[转]

时间  2019-11-11
标签 webpack+react+es6 webpack react 入门 指南 栏目 React 繁體版
原文   原文链接

React无疑是今年最火的前端框架，github上的star直逼30,000，基于React的React Native的star也直逼20,000。有了React，组件化彷佛再也不步履蹒跚，有了React Native，前端的边界彷佛广阔无边。而Webpack凭借它异步加载和可分离打包等优秀的特性，走在取代Grunt和Gulp的路上。而面向将来的ES6，模块化的支持彷佛已成定局。css

咱们如今就能够打造本身的Webpack+React+ES6环境而且开始探索起来。html

这篇文章就给还没走在这条路上的前端一个入门的指南。前端

文章导读：node

 

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

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

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

{
  "name": "react-webpack",
  "version": "1.0.0",
  "description": "webpack demo",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --hot --progress --colors",
    "build": "webpack --progress --colors"
  },
  "repository": {
    "type": "git",
    "url": ".."
  },
  "keywords": [
    "react",
    "webpack"
  ],
  "author": "yixuan",
  "devDependencies": {
    "babel-core": "^5.8.25",
    "babel-loader": "^5.3.2",
    "css-loader": "^0.12.1",
    "react": "^0.13.3",
    "react-hot-loader": "^1.3.0",
    "react-router": "^0.13.3",
    "webpack": "^1.12.2",
    "webpack-dev-server": "^1.11.0"
  },
  "dependencies": {
    "lodash": "~3.10.1",
    "react-kendo": "~0.13.11"
  }
}

1.2 第二步就是建立咱们webpack的配置文件webpack.config.js：git

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

 

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

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>New React App</title>
    <link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
  </head>
  <body>
    <section id="react"></section>
    <script src="bundle.js"></script>
  </body>
</html>

 

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

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

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

 

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

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

hello.js:

import React from 'react';
let Hello = React.createClass({
    render() {
        return(<div>Hello World!</div>);
  }
});
export default Hello;

1.4 执行：

1 npm install

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

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

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

1.5 程序跑起来，执行：

1 npm start

而后访问[http://localhost:8080/webpack-dev-server/]咱们就能够看到项目跑起来了。

 

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

简单的说，全部的数据流动都会通过Dispatcher。Action能够经过action creator产生并被提供给dispatcher，但多数状况下action是经过用户与views的交互产生。

在View层捕获用户的交互，产生一个Action，经过触发注册在Dispatcher上面的事件回调，使得相关的Store响应Action，而后会触发到Store上面的onChange事件，进一步的更新View。

数据流动也始终是如上图所示的单向流动的。

实践了这个例子：[thinking in react]会对理解React的基本工做原理有很好地帮助。

 

3、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有关的工做，都在这个文件中进行。

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

var webpack = require('webpack');
module.exports = {
    entry: [
      'webpack/hot/only-dev-server',
      "./js/app.js"
    ],
    output: {
        path: './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" },
            {test: /\.less/,loader: 'style-loader!css-loader!less-loader'}
        ]
    },
    resolve:{
        extensions:['','.js','.json']
    },
    plugins: [
             new webpack.NoErrorsPlugin()
    ]
};

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

它的主要的配置参数有：

- entry：

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

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

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

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

这也是咱们npm start启动了服务器以后访问http://localhost:8080/webpack-dev-server/能够访问到页面的缘由。

- output：

output: {
        path: './build',
        filename: "bundle.js"
    },

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

- module：

webpack将全部的资源都看作是模块，而模块就须要加载器：

module: {
        loaders: [
            { test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ },
            { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
            { test: /\.css$/, loader: "style!css" },
            {test: /\.less/,loader: 'style-loader!css-loader!less-loader'}
        ]
    },

对于不一样的文件，咱们能够自行配置使用不一样的加载器。也能够自行实现合心意的加载器。

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

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

- resolve：

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

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

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

- plugin:

plugins: [
    new webpack.NoErrorsPlugin()
  ]

咱们能够在plugin参数中配置咱们须要用到的各类各样的插件。好比咱们想将多个文件分开打包，可能会用到:

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

 

 

4、如今开始探索&&扩展阅读

面向将来的ES6，模块化的支持彷佛已成定局。咱们经过从webpack中的配置便可立刻开始编写ES6的代码。

经过打造这样的工做环境，咱们能够同时使用多种面向将来的新技术开始新的探索。

如今就开始探索吧！不要等到将来到来，却发现本身还没作好准备。

 

扩展阅读：

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

[webpack入门]

[webpack-howto]

[webpack home]

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程