react作为当前非常盛行的前端框架，置信许多前端er都有捋臂张拳的进修它的主意。工欲善其事，必先利其器。这篇文章就简朴的给人人引见一下怎样我疾速的搭建一个react前端开辟环境。重要针对于react小白，大神不喜勿喷。
从题目可以看出，这里不会仅仅只引见一下react的开辟环境怎样搭建。我将这个系列分红三篇引见:

• 第一篇–疾速搭建一个react开辟环境。

• 第二篇–疾速开辟一个react开辟环境脚手架东西。有了这个东西，在任何地方都可以一键天生环境。

• 第三篇–脚手架依靠的中心库co的源码剖析。

接下来就最先引见react开辟环境的基础搭建。react须要经由过程webpack举行打包，所以请确保本身的机械上装置了webpack和nodejs。无装置的请自行谷歌。

装置babel

react运用jsx的语法，这类语法情势浏览器是不能辨认的。所以须要借助babel编译器对我们的文件举行编译。简朴的说这里的babel就有两个作用：

• 一是编译一些基础的react特征

• 二是让我们可以运用es6等语法情势
  接下来经由过程以下体式格局装置和设置对应的loader。

1. 装置babel-loader

// 装置 babel-core 和 babel-loader
npm install babel-core babel-loader --save-dev
// 装置babel的es6和react支撑
npm install babel-preset-es2015 babel-preset-react --save-dev

babel-preset-es2015:将es6语法剖析成浏览器支撑的es5语法
babel-preset-react:用于react语法的剖析和优化

1. 设置.babelrc文件

{
  "presets":["es2015", "react"]  // 通知babel剖析js语法的时刻须要运用这两个preset
}

上面就是我们对babel-loader的基础设置, 为了坚持js语法的一致性和严谨性,我们还须要装置和设置eslint。

装置eslint

1. 装置eslint-loader

npm install eslint eslint-loader --save-dev

装置好eslint-loader以后 我们还须要装置一个第三方设置好的花样插件 这里我们将运用eslint-config-standard-react这个插件。

2. 装置eslint-config-standard-react

npm install eslint-config-standard eslint-config-standard-react eslint-plugin-promise eslint-plugin-react eslint-plugin-standard --save-dev 

3. 设置.eslintrc文件

在根目录下竖立一个.eslintrc文件, 同时写入以下代码：

{
  "extends": ["standard", "standard-react"]
}

增加HMR功用

HMR(Hot Module Replacement)功用就是一般所说的热加载功用, babel供应了一个预设babel-preset-react-hmre可以很好的协助我们完成react组件的热加载功用。

1. 装置babel-preset-react-hmre

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

这个预设重要包括了以下两个插件：

react-transform-hmr:完成热加载
react-transform-catch-errors:捕捉render中的要领并展如今界面上

2. 修正上述的.babelrc文件

{
  "presets": ["react", "es2015"],
  "env": {
    "development": {
      "presets": ["react-hmre"]
    }
  }
}

webpack.config.js文件

经由过程上面的几个步骤,我们就大抵完成了react开辟环境的基础搭建。下面就是我们完全的webpack.config.js文件。

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const OpenBrowserPlugin = require('open-browser-webpack-plugin')

const ROOT_PATH = path.resolve(__dirname)
const SRC_PATH = path.resolve(__dirname, 'src')
const BUILD_PATH = path.resolve(__dirname, 'build')

const webpackOptions = {
  devtool: '#source-map',
  entry: {
    app: path.resolve(SRC_PATH, 'index.jsx')
  },
  output: {
    path: BUILD_PATH,
    filename: 'bundle.js'
  },
  module: {
    //eslint应该在preLoaders中举行
    preLoaders: [
      {
        test: /\.jsx?$/,
        loader: 'eslint',
        exclude: /node_modules/
      }
    ],
    //设置loaders
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel',
        exclude: /node_modules/
      },
      {
        test:  /\.css?$/,
        loader: 'style!css!stylus',
        include: SRC_PATH
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'react-start'
    }),
    new OpenBrowserPlugin({ url: 'http://localhost:8080' })
  ],
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    hot: true,
    inline: true,
    progress: true
  }
}
module.exports = webpackOptions

以上就是react简朴的环境搭建,后面会推出后续的文章。喜好的同砚迎接关注,并可以从我的github—Pavooo上取得文章中的一切代码。