脚本宝典收集整理的这篇文章主要介绍了

从react-start到co源码(一)

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

react作为当前十分流行的前端框架,相信很多前端er都有蠢蠢欲动的学习它的想法。工欲善其事,必先利其器。这篇文章就简单的给大家介绍一下如何我快速的搭建一个react前端开发环境。主要针对于react小白,大神不喜勿喷。
从标题可以看出,这里不会仅仅只介绍一下react的开发环境如何搭建。我将这个系列分成三篇介绍:


接下来就开始介绍react开发环境的基本搭建。react需要通过webpack进行打包,所以请确保自己的机器上安装了webpacknodejs。无安装的请自行谷歌。

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

总结

以上是脚本宝典为你收集整理的

从react-start到co源码(一)

全部内容,希望文章能够帮你解决

从react-start到co源码(一)

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过