從react-start到co源碼(一)

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上得到文章中的全部代碼。