nature book bug burger costumes doctors hospital office shoes skull rocket

Webpack2 上配置 React + ES2015

万事开头难,而我在尝试做一个好的开始

前言

React 的学习是一个技术栈的学习,有很多方法可以开始,甚至 JSX 和 ES6 也是可选的,webpack 也不是必须的。但是很快我就发现,要发挥 React 的最大优势,需要采用这样的技术栈开始。

在本文中,我们将一起配置一个最基础的 React 前端环境,主要通过 Webpack2。在结束时,我们将得到一个 “Hello World”,并且是通过理解最新的技术栈。

什么是 Webpack

Webpack 是德国开发者 Tobias Koppers 开发的模块加载器,能够 针对 JavaScript 代码的模块打包。 在 Webpack 当中, 所有的资源都被当作是模块, js, css, 图片等等.. 但是自发布以来,它演变成了一个针对所有前端代码的管理工具(不管是其本身有意还是社区的意愿)。

什么是 React

React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。

什么是 ES2015

ES2015 就是之前讲的 ES6,而 ES2016 就是 ES7,他们都是 JS 的下一代语法。(我们通过第三方工具,可以提前体验)

什么是 Babel

能够实现 ES6 到 ES5 的代码转换(以前叫 6to5)。对 ES6 的支持程度比其它同类更高,而且 Babel 拥有完善的文档和一个很棒的在线交互式编程环境。

准备工作

用 npm 安装必须的模块,以下是清单:

{
  // babel 的核心功能模块,所有的 babel 包都依赖它
  "babel-core": "^6.24.0",
  // webpack 的 babel 加载器,带 JSX 编译支持
  "babel-loader": "^6.4.1",
  // ES2015语法支持,可以使用 ES6 最新特性
  "babel-preset-es2015": "^6.24.0",
  // 专为 react 优化,使代码支持 React ES6 classes 的写法,同时支持 JSX 语法格式
  "babel-preset-react": "^6.23.0",
  // react 的核心功能模块,所有的 react 包都依赖它
  "react": "^15.4.2",
  // react DOM 相关功能模块,独立出来发展和维护
  "react-dom": "^15.4.2",
  // webpack 核心模块
  "webpack": "^2.2.1"
}

可以通过 sudo npm i -S webpack@2.2.1 这样的方式安装,要注意版本号。新的版本配置方式会稍有不同,需要对照 npmjs.com

除此之外,还推荐全局安装 webpack-dev-server,用于开发环境简化工作。请安装 2.4.2 版本:sudo npm i -g webpack-dev-server@2.4.2

配置 webpack

我们将通过 webpack.config.js 文件配置 webpack,其中最重要的概念是加载器。webpack 把资源对应不同加载器,最终转为 js 代码。以这种方式,达到 js 可以控制和管理他们。

下面我们在项目根目录下创建 webpack.config.js 文件,内容如下:

// webpack.config.js
const webpack = require('webpack');
const path = require('path');
const config = {
  //程序入口.
  entry: [
    './src/index.js'
  ],
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  // webpack 的主目录.
  context: __dirname,
  devServer: {
    // 静态文件位置
    contentBase: path.join(__dirname, 'public'),
  },
  module: {
    rules: [
      //配置 js 后缀的文件,应该采用哪种加载器.
      {
        test: /\.js$/,
        use: [{ loader: 'babel-loader' }],
        exclude: /node_modules/
      }
    ]
  }
};
//模块导出
module.exports = config;

这份配置里涉及到两个文件夹,publicsrc,他们分别需要在项目根目录下创建。

(注:上面使用的 const 是 ES2015 的关键字,用于申明常量(不被改变的变量)。 )

配置 babel

babel 是转换 ES2015 的关键,它允许我们自由的使用最新的 JS 语法,并且转为 ES5。上面的 webpack 配置中,我们把关于 babel 的配置外置了。

我们需要在项目根目录下创建 .babelrc 文件,配置 ES6 的转换规则。内容如下:

{
  "presets": [
    ["es2015", {"modules": false}],
    "react"
  ]
}

创建入口文件

入口文件是必须的,可以有多个,作为程序的主入口。下面我们在 src 目录下创建 index.js 文件,作为入口文件。

// src/index.js

//导入 react 核心库.
import React from 'react';
//导入 react DOM 库.
import ReactDOM from 'react-dom';

//在 #root 显示 hello world.
ReactDOM.render(
  <h1>Hello World!</h1>,
  document.getElementById('root')
);

(注:上面的 import * from * 就是 ES2015 的语法,用于导入。)

创建 HTML

HTML 模板是可选的,我们可以采用插件实现虚拟 HTML,也可以采用 EJS 这样的模板引擎。本文中,我们创建一个普通的 html 文件,作为 HTTP 访问的入口。

public 目录下创建 index.html 文件,内容如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Hello</title>
</head>
<body>

  <div id="root">Loading...</div>

  <script src="/bundle.js"></script>

</body>
</html>

细心的朋友可能注意到,上面引用了 bundle.js 文件。我们不需要创建这个文件,使用 webpack-dev-server 来调试的时候,它会在内存中存在。项目上线后,则可以通过 webpack 实际生成它。
通过这种配合,更有利于我们在开发环境调试。

启动程序

我们已经完成了所有的准备工作,请在 shell 中切到 webpack.config.js 所在的根目录。执行 webpack-dev-server 命令启动程序。

等待启动完成后,打开浏览器输入 localhost:8080 访问。

参考资料