使用webpack、babel、react、antdesign配置单页面应用开发环境

这是Webpack+React系列配置过程记录的第一篇。其他内容请参考：

本文内容将记录使用webpack、babel、react、antdesign配置单页面应用开发环境的过程。这是我首次使用前端框架开发Web应用，在此之前，我写Web代码使用最原生的HTML、CSS、JS，即使是敲这些文字的这一刻，我还没能熟练使用jQuery库。最近想跨出这个怪圈，希望使用一些“前沿”一些的框架重构之前写的书籍分享网站的管理后台后台，因此才选择使用webpack、babel、react、ant design作为突破口。

主要依赖库的版本如下（PS. 不同版本配置不一定一样）：

webpack： 2.4.1
react： 15.4.2
react-dom： 15.4.2
babel-core： 6.24.1
babel-loader： 7.0.0
antd： 2.5.2

准备静态Web服务器

静态Web服务器可以使用Nginx、Apache等现成的服务器软件，仅用于接下来对配置结果的测试和校验。

为了节省安装这些服务器软件的精力，我直接使用node.js配合express写了个简单的静态服务器。也把这一步骤记录下来。

创建项目目录demo，并使用npm init命令初始化node.js空项目，生成package.json文件。
使用npm安装express。
创建Web的启动脚本index.js。
创建存放静态资源的目录public
在public中创建页面文件index.html

index.js文件的内容如下：

var express = require('express');
var app = express();
app.use('/', express.static('public'));
var server = app.listen(2000, function() {
  var port = server.address().port;
  console.log('Open http://localhost:%s', port);
});

index.html文件的内容如下:

<html>
  <head></head>
  <body>
    <p>Hello world</p>
  </body>
</html>

使用node启动index.js，就可以在浏览器中输入 http://localhost:2000访问到index.html中的内容了。

接下来才是真正开始本文的真正内容。我的目的很明确——开发一个网页，因此我将从React开始。

使用React开发页面

使用React框架编写页面的方法有两种，第一种是直接在html文件中直接引用react.js和react-dom.js，然后在后续的脚本中使用React带来的能力。

仅改动前文提到的index.html文件即可做到：

<html>
  <head>
    <script src="https://unpkg.com/react@15/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
  </head>
  <body>
    <p>Hello world</p>
    <div id='main'/>
    <script>
      var e = React.createElement('p', null, 'This is React');
      ReactDOM.render(e, document.getElementById('main'));
    </script>
  </body>
</html>

在浏览器中访问index.html，你将看到页面使用React渲染了一行文字。

但是通过这种方式使用React并不能很好发挥其作用。我们要使用ES6、JSX、UI重用等特性，因此我们将使用下面的第二种方法。

使用Webpack、Babel和React开发页面

这种方法实际上你所写的代码并不是最终在用户浏览器上执行的代码。源代码将经过Babel和Webpack进行转换处理，然后生成可在用户浏览器上执行的代码。这个过程有点像C或者C++的编译。

安装React

使用下面命令安装React(参考：https://facebook.github.io/react/docs/installation.html)

npm install react@15.4.2 react-dom@15.4.2 --save

由于在写这篇文章之前做过了一次测试，预料到如果使用最新版本的react，后面引入的ant design将会报兼容性错误，故指定了react的版本。

因为浏览器并没有提供给我们引入其他模块的能力，我们也就无法直接使用React模块，这时需要Webpack的帮助。

安装与配置Webpack

使用下面命令安装Webpack

npm install webpack --save-dev

配置Webpack的方法有好几种，我使用的是配置文件的方式。在项目根目录下生成webpack.config.js文件。内容如下：

var path = require('path');
module.exports = {
  entry: './public/index.js',
  output: {
    filename: 'out.js',
    path: path.resolve(__dirname, 'public')
  }
};

这个文件配置了webpack的入口为public目录下的index.js，转换后生成的文件为public/out.js。

接下来在package.json配置一个build命令，内容为：

...
"scripts": {
    "build": "webpack --config webpack.config.js",
    "start": "node index.js",
  },
...

这样就可以使用npm run build调用webpack对js文件进行转换。

再看一下此刻的public目录的index.js文件内容：

import React from 'react';
import ReactDOM from 'react-dom';
var e = React.createElement('p', null, 'This is React');
ReactDOM.render(e, document.getElementById('main'));

而index.html文件的内容：

<html>
  <head>
  </head>
  <body>
    <p>Hello world</p>
    <div id='main'></div>
    <script src="out.js"></script>
  </body>
</html>

注意到html中script标签引用的js文件是out.js，这个文件是webpack生成的，是最终在用户浏览器上执行的脚本。

现在我们执行npm run build命令，项目文件布局内容如下图所示：

项目文件布局

确实生成了我们想要的out.js文件了。

Webpack有一个优点就是针对JS文件，它能够做到按需加载。后面你将会发现对于其他类型的文件，如：css、html、jade等，只要使用了适当的插件也能做到按需加载。

到这里，你会发现不需要使用Babel，我们就可以使用React开发页面内容了。但是你会注意到，除了import语句是webpack做了兼容性处理的，我所使用的其他语法都是ES5的语法。

如果在index.js中使用JSX语法，webpack构建的时候就会报错。同样地，如果在index.js中添加ES6的语法，尽管webpack构建时不会报错，但生成的out.js文件末尾部分依旧可以找到这部分ES6语法的代码，这样的代码被用户加载到浏览器中执行，是否能被浏览器支持是无法得到保证的。

为此，我们需要引入Babel，让其把所有浏览器可能不支持的语法转换成ES5的语法。

安装与配置Babel

使用Babel的方法也有好多种，官网的帮助文档可以根据环境提供对应的帮助。本文是基于Webpack使用Babel，因此无论是增加的依赖库还是配置流程均只对Webpack的场景有效。我们将使用Webpack关于Babel的一个扩展加载器babel-loader关联这两者。而且关于Babel的配置也集合到webpack.config.js中，通过webpack传递给babel，这样可以省去独立配置babel步骤。

安装基于Webpack的Babel使用下面命令：

npm install --save-dev babel-loader
npm install --save-dev babel-core

上文提到，Babel用于把新版本的JS代码翻译成大多数浏览器都支持的ES5版本的代码。要做到这些翻译，只需要使用对应的扩展即可。例如：

babel-preset-env根据配置环境计算babel对代码填充何种等级的polyfill，已包括es2015的配置，但没有包括stage-x。官方首推。
babel-preset-[stage-0、stage-1、stage-2、stage-3]与ES7相关的配置;
除此之外，Babel还可以有其他扩展，比如我们希望使用JSX语法，这时需要引入babel-preset-react处理器。

根据官方的推荐，我们暂时先使用这几个：

npm install --save-dev babel-preset-react
npm install --save-dev babel-preset-stage-0
npm install --save-dev babel-preset-env

在webpack.config.js中配置babel，内容更新为：

var path = require('path');
module.exports = {
  entry: './public/index.js',
  output: {
    filename: 'out.js',
    path: path.resolve(__dirname, 'public')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env', 'stage-0', 'react'],
            plugins: []
          }
        }
      }
    ],
  },
};

注意到我们在module.rules中添加了一个规则。这个规则只要匹配到node_modules以外的js后缀的文件就会使用babel-loader进行转换，转换过程依次使用了plugins和presets制定的扩展。注意presets的处理顺序比较特别，是从右到左顺序执行的。

到这里就配置完babel了。我们修改index.js文件：

import React from 'react';
import ReactDOM from 'react-dom';
class Text extends React.Component {
  render() {
    return (
      <p>This is a react Component</p>
    );
  }
}
ReactDOM.render(<Text/>, document.getElementById('main'));

使用命令编译并启动服务器，没有再因为JSX语法报错。

npm run build
npm start

在浏览器访问index.html可以看到“This is a react Component”，这说明Babel很好地工作了。

到这里如果没有其他需求就可以开始开发了。

使用Ant Design作为React的UI库

由于我已经怕自己造轮子了，这里我要引入基于React的一个Ant Design规范UI库antd。

安装Ant Design

npm install --save antd

好了可以直接使用Ant Design的UI了。修改index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import { DatePicker } from 'antd';
class Text extends React.Component {
  render() {
    return (
      <div>
        <p>This is a react Component</p>
        <DatePicker/>
      </div>
    );
  }
}
ReactDOM.render(<Text/>, document.getElementById('main'));

重新构建后执行，在浏览器访问index.html可以看到多了个日期选择器，但是没有相应的样式。

加载样式表

想要在js中引入css样式表，需要添加webpack的加载器，这样在js中引入的css样式将会被webpack构建成以动态方式插入到html文件中。

针对css样式，需要下面两个加载器：

npm install --save-dev css-loader
npm install --save-dev style-loader

然后在webpack.config.js中配置一个新的规则：

var path = require('path');
module.exports = {
  entry: './public/index.js',
  output: {
    filename: 'out.js',
    path: path.resolve(__dirname, 'public')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env', 'stage-0', 'react'],
            plugins: []
          }
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ],
  },
};

注意不要犯我的一个错误：因为antd的样式是放在node_modules中的，不要在css的loader中添加exclude命令刨除掉node_modules目录。

这时候可以在index.js中添加下面一行代码：

...
import { DatePicker } from 'antd';
import 'antd/dist/antd.css';  // Add
...

重新构建运行就可以看到日期选择器有样式了。

配置按需加载

上述方法实际上加载整个antd包到最终生成的out.js文件中了。不信的话，在浏览器访问index.html可以在console中看到下面的提示：

Ant Design警告

配置按需加载需要使用另外一个Babel的插件babel-plugin-import，安装命令如下：

npm install --save-dev babel-plugin-import

因为这是Babel的插件，所以它的配置要在babel-loader的plugins节点中配置。修改后的webpack.config.js内容如下：

var path = require('path');
module.exports = {
  entry: './public/index.js',
  output: {
    filename: 'out.js',
    path: path.resolve(__dirname, 'public')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env', 'stage-0', 'react'],
            plugins: [['import', {"libraryName": "antd", "style": "css"}]]
          }
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ],
  },
};

这样就完成了按需加载的配置了。

使用antd的组件的时候也无需再增加import样式文件的语句了。去除掉刚刚在index.js中增加的那一行语句吧。重新构建运行，你会看到警告没有了。out.js中的行数从原来的13万多行减少到了5万多。

到此配置完毕。

注：所有内容均参考自React、Babel、Webpack、AntDesign、第三方插件等的官方网站或对应Github。

本文来自作者同步博客

最后编辑于：2017.12.07 01:41:52

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 196,099评论 5赞 462
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 82,473评论 2赞 373
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 143,229评论 0赞 325
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 52,570评论 1赞 267
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 61,427评论 5赞 358
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 46,335评论 1赞 273
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 36,737评论 3赞 386
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 35,392评论 0赞 254
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 39,693评论 1赞 294
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 34,730评论 2赞 312
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 36,512评论 1赞 326
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,349评论 3赞 314
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 37,750评论 3赞 299
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,017评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,290评论 1赞 251
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 41,706评论 2赞 342
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 40,904评论 2赞 335