從react-start到co源碼(一)

gekylin 發(fā)布于2019-08-20 13:44 / 1514人閱讀

摘要：安裝這個(gè)預(yù)設(shè)主要包含了如下兩個(gè)插件實(shí)現(xiàn)熱加載捕獲中的方法并展現(xiàn)在界面上修改上述的文件文件通過上面的幾個(gè)步驟我們就大致完成了開發(fā)環(huán)境的基本搭建。應(yīng)該在中進(jìn)行配置以上就是簡(jiǎn)單的環(huán)境搭建后面會(huì)推出后續(xù)的文章。

react作為當(dāng)前十分流行的前端框架，相信很多前端er都有蠢蠢欲動(dòng)的學(xué)習(xí)它的想法。工欲善其事，必先利其器。這篇文章就簡(jiǎn)單的給大家介紹一下如何我快速的搭建一個(gè)react前端開發(fā)環(huán)境。主要針對(duì)于react小白，大神不喜勿噴。
從標(biāo)題可以看出，這里不會(huì)僅僅只介紹一下react的開發(fā)環(huán)境如何搭建。我將這個(gè)系列分成三篇介紹:

第一篇--快速搭建一個(gè)react開發(fā)環(huán)境。

第二篇--快速開發(fā)一個(gè)react開發(fā)環(huán)境腳手架工具。有了這個(gè)工具，在任何地方都能夠一鍵生成環(huán)境。

第三篇--腳手架依賴的核心庫co的源碼解析。

接下來就開始介紹react開發(fā)環(huán)境的基本搭建。react需要通過webpack進(jìn)行打包，所以請(qǐng)確保自己的機(jī)器上安裝了webpack和nodejs。無安裝的請(qǐng)自行谷歌。

安裝babel

react使用jsx的語法，這種語法形式瀏覽器是不能識(shí)別的。所以需要借助babel編譯器對(duì)我們的文件進(jìn)行編譯。簡(jiǎn)單的說這里的babel就有兩個(gè)作用：

一是編譯一些基本的react特性

二是讓我們能夠使用es6等語法形式
接下來通過如下方式安裝和配置對(duì)應(yīng)的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語法的解析和優(yōu)化

1. 配置.babelrc文件

{
  "presets":["es2015", "react"]  // 告訴babel解析js語法的時(shí)候需要使用這兩個(gè)preset
}

上面就是我們對(duì)babel-loader的基本配置, 為了保持js語法的一致性和嚴(yán)謹(jǐn)性,我們還需要安裝和配置eslint。

安裝eslint 1. 安裝eslint-loader

npm install eslint eslint-loader --save-dev

安裝好eslint-loader之后我們還需要安裝一個(gè)第三方配置好的格式插件這里我們將使用eslint-config-standard-react這個(gè)插件。

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文件

在根目錄下建立一個(gè).eslintrc文件, 同時(shí)寫入如下代碼：

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

添加HMR功能

HMR(Hot Module Replacement)功能就是通常所說的熱加載功能, babel提供了一個(gè)預(yù)設(shè)babel-preset-react-hmre可以很好的幫助我們完成react組件的熱加載功能。

1. 安裝babel-preset-react-hmre

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

這個(gè)預(yù)設(shè)主要包含了如下兩個(gè)插件：

react-transform-hmr:實(shí)現(xiàn)熱加載
react-transform-catch-errors:捕獲render中的方法并展現(xiàn)在界面上

2. 修改上述的.babelrc文件

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

webpack.config.js文件

通過上面的幾個(gè)步驟,我們就大致完成了react開發(fā)環(huán)境的基本搭建。下面就是我們完整的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應(yīng)該在preLoaders中進(jìn)行
    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簡(jiǎn)單的環(huán)境搭建,后面會(huì)推出后續(xù)的文章。喜歡的同學(xué)歡迎關(guān)注,并可以從我的github--Pavooo上獲得文章中的所有代碼。