从react-start到co源码(一)

gekylin 发布于2019-08-20 13:44 / 1691人阅读

摘要：安装这个预设主要包含了如下两个插件实现热加载捕获中的方法并展现在界面上修改上述的文件文件通过上面的几个步骤我们就大致完成了开发环境的基本搭建。应该在中进行配置以上就是简单的环境搭建后面会推出后续的文章。

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

GPU云服务器云服务器从域名到网站 spark从入门到前端从入门到精通云计算从入门到精通

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81215.html

从react-start到co源码(二)

摘要：第三篇脚手架依赖的核心库的源码解析。这三篇文章都是我在日常学习中总结出来的，文章中涉及到的所有代码可以从我的上找到。 react作为当前十分流行的前端框架，相信很多前端er都有蠢蠢欲动的学习它的想法。工欲善其事，必先利其器。这篇文章就简单的给大家介绍一下如何我快速的搭建一个react前端开发环境。主要针对于react小白，大神不喜勿喷。从标题可以看出，这里不会仅仅只介绍一下react的...

MockingBird 2019-08-20 13:46 评论0 收藏0
从react-start到co源码(三)

摘要：第三篇脚手架依赖的核心库的源码解析。该篇是这个系列文章的第三篇主要是对的源码进行分析讲解。的源码十分简单但实现的功能却是十分的强大。源码概括源码主要包含了两部分公共方法和私有方法。 react作为当前十分流行的前端框架，相信很多前端er都有蠢蠢欲动的学习它的想法。工欲善其事，必先利其器。这篇文章就简单的给大家介绍一下如何我快速的搭建一个react前端开发环境。主要针对于react小白，...

wind5o 2019-08-20 13:55 评论0 收藏0
JavaScript - 收藏集 - 掘金

摘要：插件开发前端掘金作者原文地址译者插件是为应用添加全局功能的一种强大而且简单的方式。提供了与使用掌控异步前端掘金教你使用在行代码内优雅的实现文件分片断点续传。 Vue.js 插件开发 - 前端 - 掘金作者：Joshua Bemenderfer原文地址: creating-custom-plugins译者：jeneser Vue.js插件是为应用添加全局功能的一种强大而且简单的方式。插....

izhuhaodev 2019-08-21 11:44 评论0 收藏0
走一步再走一步，揭开co的神秘面纱

摘要：其实就是判断了的属性是不是个函数再接着，如果是个函数或者生成器，那就像你自己调用函数一样，手动传到里面去执行。前言原文地址源码地址了解co的前提是已经知晓generator是什么，可以看软大神的Generator 函数的语法,co是TJ大神写的能够使generator自动执行的函数库，而我们熟知的koa也用到了它管理异步流程控制，将异步任务书写同步化，爽的飞起，也摆脱了一直以来...

_Dreams 2019-08-20 16:37 评论0 收藏0