从零开始搭建React同构应用(一)

前端之家收集整理的这篇文章主要介绍了从零开始搭建React同构应用(一)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

从零开始搭建React同构应用(一)

前言

毕业入职公司后开始搞React,从刚开始只会简单的setState,到后面webpack复杂的配置,Redux,Server Render,都一一上手。期间遇到很多问题,踩过很多坑,最近想以blog的方式把自己开发React同构应用的历程记录下来,一方面可以和大家分享下使用React的经验,另一方面也算是对自己一年来工作的小总结。

主要内容

  • webpack配置

  • @H_404_15@babel-loader的配置

  • 在浏览器环境中使用@H_404_15@async函数

代码

这边文章的Demo我已经上传Github

安装webpack

@H_404_15@npm install webpack -D

这里要说明的一点是,webpack一般是全局安装,不过接下来的项目采用@H_404_15@npm命令来编译配置,@H_404_15@npm run command执行时会自动添加@H_404_15@node_modules/.bin目录至@H_404_15@PATH环境变量,因此不用担心找不到命令。

配置webpack.config.js

先创建一个最简单的webpack配置文件

const path = require('path');
//入口文件
let entry = {
    index: './module/index/Index_entry.js'
};

//浏览器端的配置
let browserConfig = {
    entry,output: {
        path: path.join(__dirname,'build'),publicPath: '/build',filename: "js/[name].bundle.js",chunkFilename: "js/[id].bundle.js"
    },module: {
        loaders: [
            {
                test: /\.jsx?$/,exclude: /node_modules/,loader: `babel`,}
        ]
    }
};

module.exports = [browserConfig];

这里我将@H_404_15@entry和@H_404_15@browserConfig独立开来,@H_404_15@module.exports导出的是一个数组,这是为了方便后面@H_404_15@server render的配置。

更详细的配置说明,可以参照webapck的官方文档,这里就不一一说明了。

babel的配置

@H_404_15@babel能做什么

一般我在开发React app的工作中有三个需求

  • 将JSX转换成ES5语法

  • 将ES7转换成ES5语法

  • 启用async函数支持

安装@H_404_15@babel-loader

先安装@H_404_15@babel-core和@H_404_15@babel-loader。

@H_404_15@npm install --save-dev babel-loader babel-core

在我刚刚学习@H_404_15@webpack的时候,天真的以为装完这两个包,就可以转码JSX了,结果就是一直报错,提示说不识别JSX语法。。。弄的我疑惑了很久。。。后来才知道,装完上面两个包之后,还需要进一步的配置@H_404_15@(presets),比如指定babel将当前的@H_404_15@es7的代码转换到 @H_404_15@es2015 的代码,将JSX语法 @H_404_15@<Component/> 转换成@H_404_15@React.createElement(Component)等等。

配置@H_404_15@.babelrc

babel官方预先设定了6个常用的presets,我们平常需要的是@H_404_15@babel-preset-es2015和@H_404_15@babel-preset-react。

@H_404_15@npm install --save-dev babel-preset-es2015 babel-preset-react

在项目根目录创建@H_404_15@.babelrc。当然这里也可以在@H_404_15@webpack.config.js中的@H_404_15@loaders配置。不过个人觉得在@H_404_15@.babelrc中配置会更清晰一些。

{
  "presets": [
    "react","es2015"
  ]
}

这样前两个需求就可以完美解决了,哈哈。

启用@H_404_15@async函数

@H_404_15@regenerator函数让我们有把异步的函数写成同步的能力,使得代码的可维护性和可阅读性大大提高,而@H_404_15@async则是@H_404_15@regenerator的语法糖,一般来说@H_404_15@regenerator函数的执行是需要@H_404_15@co作为其执行器的,而@H_404_15@async函数不用,因此使用起来更加方便优雅。关于@H_404_15@async函数的知识可以参考阮一峰大神的书籍ECMAScript 6 入门

如果现在用上面的配置,直接使用@H_404_15@regenerator函数的话,会报@H_404_15@regeneratorRuntime is not defined错误,这个错误之前也是困扰过我,后面才知道,@H_404_15@regenerator无法直接被编译成es5的代码。必须添加polyfill,即@H_404_15@regenerator的runtime库才能运行。

先安装对应的@H_404_15@babel plugin,这个插件默认会帮我们把@H_404_15@async函数转换成@H_404_15@regenerator函数

@H_404_15@npm install babel-plugin-transform-regenerator

代码转换好了后,代码运行时还要一个包 @H_404_15@regenerator-runtime/runtime。

@H_404_15@npm i regenerator-runtime -S

然后在用到@H_404_15@async函数文件头部添加

@H_404_15@import 'regenerator-runtime/runtime';

比如在@H_404_15@Index.jsx中

import React from 'react';
import 'regenerator-runtime/runtime';

export default class extends React.Component {
    constructor() {
        super();

        this.state = {
            pageData: 'loading'
        }
    }

    getAsyncData() {
        return new Promise((resolve,reject) => {
            setTimeout(() => {
                resolve({
                    code: 200,msg: 'success',data: 'hello!'
                })
            },2000)
        });
    }

    async componentDidMount() {

        let data = await this.getAsyncData();

        this.setState({
            pageData: data.data
        })

    }

    render() {
        return (
            <div>
                data: {this.state.pageData}
            </div>
        )
    }

}

将@H_404_15@.babelrc修改成如下所示

{
  "presets": [
    "react","es2015"
  ],"plugins": [
    "transform-regenerator"
  ]
}

至此,babel可以完美解决我们上面提出的3个需求啦。让我们可以先编译试试。
现在@H_404_15@package.json中添加

"scripts": {
    "watch": "webpack -d -w --progress --colors"
  },

执行@H_404_15@npm run watch

ok,编译成功

搭建一个简单的静态文件服务器

推荐使用@H_404_15@anywhere,详细配置在这

@H_404_15@npm i anywhere -g

添加@H_404_15@npm script

"scripts": {
    "watch": "webpack -d -w --progress --colors","test-server": "anywhere -s -p 8000 -d ./build"
  },

我们启动HTTP服务器

@H_404_15@npm run test-server

打开@H_404_15@http://127.0.0.1:8000/,正常的话如下图所示

大家想亲自尝试的可以fork一份代码研究,哈哈。

第一次写文章,大家多多包涵,有什么错误尽管指出来,^_^。

原文链接:https://www.f2er.com/react/305468.html

猜你在找的React相关文章