React + webpack2 环境配置

创建 dev 目录，npm init --yes 生成 package.json，确保安装 webpack webpack-dev-server

1. 安装配置 Babel

它是一个 JavaScript 编译器。使用它的目的有两个：

• 让代码支持 ES6 语法

• 支持 React 的一些特性（如 JSX 语法）

  正好有两个 preset 可以完成这样的任务。

  • babel-preset-es2015 语法包，有了它就可以随意使用 ES6 的新特性，const、箭头函数等
  • babel-preset-react 语法包，它是专门用于 React 的优化，让你在代码中可以使用 React ES6 classes 的写法，同时直接支持 JSX 语法格式。

  1.1 安装 Babel loader
  loader 用于文件特定格式的转换

  // 安装 babel-core 核心模块和 babel-loader
  npm install babel-core babel-loader --save-dev
  // 安装 ES6 和 React 支持
  npm install babel-preset-es2015 babel-preset-react --save-dev

  1.2 配置 .babelrc (可以在 webpack.config.js中配置)
  安装完 Babel 和它的插件，配置一个它的规则，在项目的根目录新建一个 .babelrc 空文件。

  // 告诉 Babel，编译 JavaScript 代码的时候要用这两个 presets 编译
  {
  'presets': ['es2015', 'react']
  }

2. 安装配置 ESLint（代码规范检查）

　　ESLint 代码检查工具，它的强大之处和 Babel 类似，提供一个完全可以配置的检查规则，而且提供了非常多的第三方 plugin，适合不同的开发场景，输出的错误信息也非常明晰，同时有着 ES6 语法的最佳支持，还支持 JSX 语法。

　　2.1 安装 ESLint loader
　　同样为 webpack 添加这个 loader，它应该是 preLoaders，在资源加载之前，先用 preLoaders 进行处理，代码检查肯定是要在代码转换之前进行的。

npm insatll eslint eslint-loader --save-dev

ESLint 有许多配置好的格式插件，这里使用 Airbnb 配置合集 eslint-config-aribnb，这个配置合集里面还包括如下下面这三个插件

npm install eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y --save-dev
npm install eslint-config-airbnb --save-dev

　　2.2 配置 .eslintrc
　　和 Babel 类似，ESLint 也是通过配置文件来自定义它的检查规则的，在项目根目录下创建 .eslintrc 文件，写入如下代码：

{
  'extends': 'airbnb',
  'rules': {
    'comma-dangle': ['error', 'never']
  }
}

3. 配置 webpack

　　配置好了 Babel 和 ESLint，使用 webpack 把它们整合。
　　安装 html-webpack-plugin：自动生成 HTML 页面，并自动引入正确的 JavaScript 依赖。

npm install webpack-webpack-plugin --save-dev

　　在项目根目录下创建 webpack.config.js 文件

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// const ROOT_PATH = path.resolve(__dirname);

const APP_PATH = path.resolve(__dirname, 'app');
const BUILD_PATH = path.resolve(__dirname, 'build');

module.exports = {
    entry: {
        app: path.resolve(APP_PATH, 'index.jsx')
    },
    output: {
        filename: 'bundle.js',
        path: BUILD_PATH
        // publicPath: ''
    },
    module: {
        rules: [
            {
                test: /\.jsx$/,
                loader: 'babel-loader',
                options: {
                    // 添加 ES6， react 语法支持
                    presets: ['es2015', 'react'],

                    // 在开发环境才启用 HMR 和 Catch Error
                    env: {
                        development: {
                            presets: ['react-hmre']
                        }
                    }
                },
                include: APP_PATH
            },
            {
                test: /\.jsx$/,
                enforce: 'pre',
                loader: 'eslint-loader',
                // 发现以下配置的 options 未作用
                options: {
                    extends: 'airbnb',
                    rules: {
                        indent: ['off'],
                        'comma-dangle': 2
                    }
                },
                include: APP_PATH
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    devServer: {
        port: 8081
    },
    plugins: [
        new HtmlWebpackPlugin({ title: 'use react app' })
    ]
};

这里添加了一个 resolve 参数，把 JSX 扩展名添加进去，这样就可以在 JS 中 import 加载 JSX 扩展名的脚本

4. 添加测试页面

　　添加 react 库到项目中

npm install react react-dom --save

在 app 目录下新建 index.jsx 文件,执行 npm run dev，打开浏览器 http://localhost:8081 查看运行效果

5. 添加组件热加载（HMR）功能

　　Babel 为我们做好了类似的工作，只需要安装 Babel 的 preset

npm install babel-preset-hmre --save-dev

这个 preset 里面其实包括两个方面。

• react-transform-hmr 用来实现上面所说的热加载;
• react-transform-catch-errors 用来捕获 render 里面的方法，并且直接展示在页面上。
  配置见上面的 webpack.config.js

6.总结

这里配置的 React + webpack2 开发环境，有如下特性：

• 支持 ES6 语言特性
• 支持 JSX 语法
• 支持 ESLint 作为代码检查工具
• 支持 HMR 热加载