Webpack 和 React 实战_ES2015(es6)

上一篇: 【译】2016 年 JavaScript 回顾下一篇:(译 & 转载) 2016 JavaScript 后...

Webpack 和 React 实战

发布时间：2019-08-10 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了Webpack 和 React 实战，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

TL;DR

      
      
      @H_777_7@
      
      
$ gIT clone https://github.COM/nodejh/start-react-with-webpack react-sample
$ cd react-sample && npm install
$ npm run dev
然后打开浏览器输入 http://localhost:8080，并尝试随意修改一下 app 目录里面的代码，就能看到效果了。
为了避免包版本问题导致程序不能运行，根目录下有一个 npm-shrinkwrap.json 文件，这里面所有包的版本都是固定的。 npm install 时首先会检查在根目录下有没有 npm-shrinkwrap.json，如果 shrinkwrap 文件存在的话，npm 会使用它（而不是 package.json）来确定安装的各个包的版本号信息。
1. 安装并配置 Webpack
首先创建并初始化一个项目目录：

      
      
      
      
      
$ mkdir react-sample &amp;& cd react-sample
$ npm init
安装 webpack：

      
      
      
      
      
$ npm i webpack --save-dev
然后配置 webpack.config.js：

      
      
      
      
      
# 创建一个 webpack.config.js 文件
$ touch webpack.config.js
<!-- more -->
在该文件中加入下面的内容：

      
      
      
      
      
const webpack = require('webpack');
const path = require('path');

// 定义打包目录路径
const BUILD_DIR = path.resolve(__dirname, './build');
// 定义组件目录路径
const APP_DIR = path.resolve(__dirname, './app');

const config = {
  entry: `${APP_DIR}/index.jsx`, // 文件打包的入口点
  output: {
    path: BUILD_DIR, // 输出目录的绝对路径
    filename: 'bundle.js', // 输出的每个包的相对路径
  },
  resolve: {
    extensions: ['', '.js', '.jsx'], // 开启后缀名的自动补全
  },
};

module.exports = config;
这是一个最基本的 webpack 配置文件。
接下来在 build/ 目录中创建一个 index.htML 文件：

      
      
      PE="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="
  
    
    Start <a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a> with Webpack
  
  
    
    
  
" title="" data-original-title="复制">
      
      
<html>
  <head>
    <meta charset="utf-8">
    <title>Start React with Webpack</title>
  </head>
  <body>
    <div id="app" />
    <script type="text/javascript" src="./bundle.js"></script>
  </body>
</html>
2. 配置加载器 babel-loader
加载器是把一个资源文件作为入参转换为另一个资源文件的 node.js 函数。
由于我们写 React 的时候使用的是 JSX 语法和 ES6 语法，而浏览器并不完全支持它们。所以需要使用 babel-loader 来让 webpack 加载 JSX 和 ES6 的文件。
babel-loader 的主要作用如下图：

安装依赖包：

      
      
      
      
      
$ npm i babel-core babel-loader babel-PReset-es2015 babel-preset-react --save-dev
babel-preset-es2015 是转换 ES6 的包；babel-preset-react 是转换 JSX 的包。
接下来需要修改 webpack.config.js：

      
      
      
      
      
// Existing Code ....
const config = {
  // Existing Code ....
  module: {
    loaders: [{
      test: /.(js|jsx)$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel-loader',
      query: {
        presets: ['es2015', 'react']
      }
    }]
  }
};
3. Hello React
安装 React：

      
      
      
      
      
$ npm i react react-dom --save
在 app 目录下新建一个 index.jsx 文件，然后将下面的内容添加到 index.jsx 中：

      
      
      button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import React From 'react';
import {render} from 'react-dom';

class App extends React.Component {
  render () {
    return  Hello React!;
  }
}

render(, document.getElementById('app'));
" title="" data-original-title="复制">
      
      
import React from 'react';
import {render} from 'react-dom';

class App extends React.Component {
  render () {
    return <h1> Hello React!</h1>;
  }
}

render(<App/>, document.getElementById('app'));

这个时候，执行下面的命令打包：

      
      
      
      
      
webpack -w
-w 参数表示持续监测项目目录，如果文件发生修改，则重新打包。
打包完成后，将 build/index.html 用浏览器打开，就能看到 Hello React!，如下：

4. 自动刷新和热加载
懒是第一生产力。每次写完代码，都要重新打包，重新刷新浏览器才能看到结果，显然很麻烦。
那有没有能够自动刷新浏览器的方法呢？当然有，这个时候就需要 webpack-dev-server 这个包。

      
      
      
      
      
$ npm install webpack-dev-server -g
webpack-dev-server 提供了两种自动刷新模式：
Iframe 模式
@H_126_382@
不需要额外配置，只用修改路径
应用被嵌入了一个 iframe 内部，页面顶部可以展示打包进度信息
因为 Iframe 的关系，如果应用有多个页面，无法看到当前页面的 URL 信息

inline 模式

需要添加 --inline 配置参数
提示信息在控制台中和浏览器的console中显示
页面的 URL 改变，可以在浏览器地址栏看见

接下来启动 webpack-dev-server：

      
      
      
      
      
$ webpack-dev-server --inline --hot --content-base ./build/
--hot 参数就是热加载，即在不刷新浏览器的条件下，应用最新的代码更新。在浏览器中可能看到这样的输出：

      
      
      
      
      
[HMR] Waiting for update signal from WDS...
[WDS] Hot Module Replacement enabled.
--content-base ./ 参数表示将当前目录作为 server 根目录。命令启动后，会在 8080 端口创建一个 HTTP 服务，通过访问 http://localhost:8080/index.html 就可以访问我们的项目了，并且修改了项目中的代码后，浏览器会自动刷新并实现热加载。
当然，命令行输入这么长，还是不太方便，所以还有一种更简单的方式，在 package.json 中配置 webpack develop server：

      
      
      
      
      
// Existing Code ....
"scripts": {
    "dev": "webpack-dev-server --inline --hot --content-base ./build/"
  }
然后通过 npm start dev 来启动即可。
5. 添加一个新的组件
在 app 目录中新建一个 AwesomeComponent.jsx 文件，并添加如下代码：

      
      
      extends Component {
  constructor(props) {
    super(props);
    this.state = {
      likesCount: 0
    };
    this.onLike = this.onLike.bind(this);
  }


  onLike() {
    let newLikesCount = this.state.likesCount + 1;
    this.setState({
      likesCount: newLikesCount
    });
  }


  render() {
    return (
      
        Likes: {this.state.likesCount}
        
          
        
      
    );
  }
}


export default AwesomeComponent;" title="" data-original-title="复制">
      
      
import React, { Component } from 'react';

class AwesomeComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      likesCount: 0
    };
    this.onLike = this.onLike.bind(this);
  }


  onLike() {
    let newLikesCount = this.state.likesCount + 1;
    this.setState({
      likesCount: newLikesCount
    });
  }


  render() {
    return (
      <div>
        Likes: <span>{this.state.likesCount}</span>
        <div>
          <button onClick={this.onLike}>Like Me</button>
        </div>
      </div>
    );
  }
}


export default AwesomeComponent;
然后修改 index.jsx：

      
      
      return (
      
         Hello React!
        
      
    );
  }
}

// ..." title="" data-original-title="复制">
      
      
// ...
import AwesomeComponent from './AwesomeComponent.jsx';
// ...
class App extends React.Component {
  render () {
    return (
      <div>
        <p> Hello React!</p>
        <AwesomeComponent />
      </div>
    );
  }
}

// ...


UPDATE
2016.10.15
更新 webpack-dev-server 的配置方法
设置 webpack-dev-server (old)
上面我们直接通过浏览器浏览的 html 文件，接下来我们需要利用 webpack-dev-server 来创建一个 HTTP Server。
首先安装 webpack-dev-server：

      
      
      
      
      
$ npm i webpack-dev-server --save-dev
然后在 package.json 的 script 里面加入 build 和 dev 两个命令：

      
      
      
      
      
{
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
  }
}

webpack-dev-server - 在 localhost:8080 建立一个 Web 服务器
--devtool eval - 为你的代码创建源地址。当有任何报错的时候可以让你更加精确地定位到文件和行号
--progress - 显示合并代码进度
--colors - 命令行中显示颜色！
--content-base build - 指向设置的输出目录

然后就可以使用 npm run dev 的命令来启动项目：

      
      
      
      
      
$ npm run dev
在浏览器地址栏输入 localhost:8080 即可看到页面。
如果需要浏览器自动刷新，将 webpack.config.js 中的 entry: APP_DIR + '/index.jsx 改为下面这样：

      
      
      
      
      
entry: [
   'webpack-dev-server/client?http://localhost:8080',
   'webpack/hot/dev-server',
    APP_DIR + '/index.jsx'
]
这样的话，每次当代码发生变化之后，webpack 会自动重新打包，浏览器也会自动刷新页面。
2016.11.19 更新

使用 ES6 语法编写 webpack.config.js
修改 babel-loader 加载器的配置方法：将添加 .babelrc 文件改为在 webpack.config.js 中配置
?：webpack-dev-server --inline --hot --content-base ./build/ ➡️ webpack-dev-server --inline --hot --content-base ./build/

babel-loader 加载器的配置方法(old)
接下来需要配置 babel-loader，告诉 webpack 我们使用了 ES6 和 JSX 插件。先通过touch .babelrc 创建一个名为 .babelrc 的配置文件。然后加入下面的代码：

      
      
      
      
      
{
  "presets" : ["es2015", "react"]
}
然后再修改 webpack.config.js，使 webpack 在打包的时候，使用 babel-loader：

      
      
      
      
      
// Existing Code ....
VAR config = {
  // Existing Code ....
  module: {
    loaders : [
      {
        test : /.jsx?/,
        include : APP_DIR,
        loader : 'babel'
      }
    ]
  }
}
自动刷新和热加在的配置(old, wrong)
当然，命令行输入这么长，还是不太方便，所以还有一种更简单的方式，直接在 webpack.cofig.js 中配置 webpack develop server：

      
      
      
      
      
{
  entry: {
    // ...
  },
  // ...
  devServer: {
    hot: true,
    inline: true
  }
}

Github Issue: https://github.com/nodejh/nodejh.github.io/issues/12

脚本宝典总结

以上是脚本宝典为你收集整理的Webpack 和 React 实战全部内容，希望文章能够帮你解决Webpack 和 React 实战所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

上一篇: 【译】2016 年 JavaScript 回顾下一篇:(译 & 转载) 2016 JavaScript 后...

猜你在找的ES2015(es6)相关文章

vuex 基本入门和使用（二） 2019-08-19
默认参数如何在JavaScript ES6中工作 2018-11-14
JavaScript ES6功能：好的部件 2018-11-14
如何使用ES6箭头函数使您的JavaScript更易于阅读 2018-11-14
如何使用ES6在JavaScript中有条件地构建对象 2018-11-14
关于如何使用Fetch API执行HTTP请求的实用ES6指南示例代码 2018-11-14
5个在ES6中修复的JavaScript“坏”的部分 2018-11-13
分享干货ECMAScript 2015（ES6）提示和技巧非常有用 2018-11-13
JavaScript ES6 - 写得少，做得更多 write less, do more 2018-11-13
什么时候（和为什么）你应该使用ES6箭头功能 - 何时不应该使用ES6箭头功能 2018-11-12

全站导航更多

最新ES2015(es6)教程

热门ES2015(es6)教程