搭建 React + webpack + Babel 开发环境

前言

本文记录了通过 npm 搭建 React + webpack + Babel 开发环境的过程，笔者在此踩了很多坑，这里谨记录正确的搭建流程，供大家参考与交流学习。

推荐使用最新版本的 npm，且 webpack 与 Babel 均采取局部安装，而不是全局安装。

首先新建一个文件夹 demo，我们将在该文件夹下配置环境：

1	mkdir demo && cd demo

安装 React

安装 React 主要需要安装 react 与 react-dom 两个包：

1
2
3

npm init -y
npm install --save react react-dom

安装 webpack

安装 webpack 命令如下：

1	npm install --save-dev webpack

在根目录 demo 文件夹下新建一个 webpack.config.js 的配置文件：

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

通过配置文件，我们可以对 webpack 进行高度的自定义配置，具体配置方法请参考这里。

在 package.json 文件中 scripts 下添加如下代码：

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

这是推荐的最佳实践。

通过配置 build，我们可以使用 npm run build 命令来对文件进行打包。

安装 Babel

首先安装 babel-loader 与 babel-core：

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

为了让 Babel 能够搭配 webpack 使用，需要配置 webpack.config.js 文件，在 module.exports 中添加如下代码：

module: {
  rules: [
    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
  ]
}

然后安装 babel-preset-env：

1	npm install babel-preset-env --save-dev

我们还需要在根目录 demo 文件夹下创建 .babelrc 配置文件，并在里面定义：

1
2
3

{
  "presets": ["env"]
}

为了能够在 React 中使用 JSX 与 ES6 语法，还需要安装 babel-preset-react 与 babel-preset-es2015：

1	npm install --save-dev babel-preset-react babel-preset-es2015

配置 .babelrc 文件，在 presets 数组中添加 react 与 es2015 两项，文件内容变为：

1
2
3

{
  "presets": ["env", "react", "es2015"]
}

配置完成

现在，React + webpack + babel 的环境已经搭建完成，我们可以测试一下。

在 demo 文件夹下新建 index.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>React Demo</title>
</head>
<body>
    <div id="root"></div>
    <script type="text/javascript" src="dist/bundle.js"></script>
</body>
</html>

在 demo/app 目录下新建文件 index.js：

import React from 'react';
import ReactDOM from 'react-dom';
function HelloExample(props) {
    return <div>Hello {props.name} !</div>;
}
ReactDOM.render(
    <HelloExample name="SongZiming"/>,
    document.getElementById('root')
);

执行打包命令：

1	npm run build

命令行出现如下提示，说明 webpack 打包成功。

用浏览器打开 index.html，显示 Hello SongZiming ! ，测试成功！

前言

安装 React

安装 webpack

安装 Babel

配置完成

参考资料