国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

從react-start到co源碼(一)

gekylin / 1505人閱讀

摘要：安裝這個預設主要包含了如下兩個插件實現熱加載捕獲中的方法并展現在界面上修改上述的文件文件通過上面的幾個步驟我們就大致完成了開發環境的基本搭建。應該在中進行配置以上就是簡單的環境搭建后面會推出后續的文章。

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上獲得文章中的所有代碼。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81215.html

相關文章

  • 從react-start到co源碼(二)

    摘要：第三篇腳手架依賴的核心庫的源碼解析。這三篇文章都是我在日常學習中總結出來的，文章中涉及到的所有代碼可以從我的上找到。 react作為當前十分流行的前端框架，相信很多前端er都有蠢蠢欲動的學習它的想法。工欲善其事，必先利其器。這篇文章就簡單的給大家介紹一下如何我快速的搭建一個react前端開發環境。主要針對于react小白，大神不喜勿噴。從標題可以看出，這里不會僅僅只介紹一下react的...

    MockingBird 評論0 收藏0

  • 從react-start到co源碼(三)

    摘要：第三篇腳手架依賴的核心庫的源碼解析。該篇是這個系列文章的第三篇主要是對的源碼進行分析講解。的源碼十分簡單但實現的功能卻是十分的強大。源碼概括源碼主要包含了兩部分公共方法和私有方法。 react作為當前十分流行的前端框架，相信很多前端er都有蠢蠢欲動的學習它的想法。工欲善其事，必先利其器。這篇文章就簡單的給大家介紹一下如何我快速的搭建一個react前端開發環境。主要針對于react小白，...

    wind5o 評論0 收藏0

  • JavaScript - 收藏集 - 掘金

    摘要：插件開發前端掘金作者原文地址譯者插件是為應用添加全局功能的一種強大而且簡單的方式。提供了與使用掌控異步前端掘金教你使用在行代碼內優雅的實現文件分片斷點續傳。 Vue.js 插件開發 - 前端 - 掘金作者：Joshua Bemenderfer原文地址: creating-custom-plugins譯者：jeneser Vue.js插件是為應用添加全局功能的一種強大而且簡單的方式。插....

    izhuhaodev 評論0 收藏0

  • 走一步再走一步，揭開co的神秘面紗

    摘要：其實就是判斷了的屬性是不是個函數再接著，如果是個函數或者生成器，那就像你自己調用函數一樣，手動傳到里面去執行。 前言 原文地址 源碼地址 了解co的前提是已經知曉generator是什么，可以看軟大神的Generator 函數的語法,co是TJ大神寫的能夠使generator自動執行的函數庫，而我們熟知的koa也用到了它管理異步流程控制，將異步任務書寫同步化，爽的飛起，也擺脫了一直以來...

    _Dreams 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<