Webpack4不求人(2) ——手把手搭建TypeScript+React16+ReactRouter5同构应用脚手架

头像
xialeistudio
    阅读 8 分钟
    6

    同构应用

    使用同一份应用代码，同时提供浏览器环境和服务器环境下的应用，解决传统浏览器单页应用的两个顽固问题：

    • 不利于SEO，浏览器环境代码是在客户端渲染，大部分爬虫都只能爬到一个空白的入口文件
    • 代码在浏览器渲染，低端机可能会卡顿

    接下来我们一起从零开始搭建基于Webpack的React同构应用脚手架。

    SSR流程

    1. Web应用构建完成后输出CSS、JS和HTML
    2. SSR应用构建完成后输出一个CommonJs模块文件，可以将虚拟DOM在服务端渲染为HTML字符串
    3. Node.js新建HTTP服务器，收到请求后调用SSR模块导出的render函数输出HTML到客户端

    初始化项目

    mkdir react-ssr-example
cd react-ssr-example
yarn init -y

yarn add webpack webpack-cli webpack-dev-server -D # 安装Webpack
yarn add react react-dom react-router-dom # 安装React
yarn add @types/react @types/react-dom @types/react-router-dom -D # 安装React声明文件
yarn add express # 安装express
yarn add css-loader sass-loader node-sass mini-css-extract-plugin # 安装CSS相关模块
yarn add ts-loader typescript # 安装TypeScript
yarn add html-webpack-plugin # 安装HTML处理插件

    目录结构

    脚手架的完整目录如下：(这些文件一步步都会有)

    |----build # 构建结果目录
        |----styles # 样式
                |----main.css
        |----bundle.ssr.js # SSR应用文件
        |----bundle.web.js # Web应用文件
        |----index.html # Web应用入口HTML
|----src # 应用源码
        |----home # 首页组件
                |----index.scss # 首页SCSS
                |----index.tsx # 首页组件
        |----signin # 登录页组件
                |----index.scss # 登录页SCSS
                |----index.tsx # 登录页组件
        |----App.tsx # 应用路由设置
        |----index.html # Web应用入口HTML
        |----main.ssr.tsx # SSR入口文件
        |----main.web.tsx # Web入口文件
|----index.js #　express服务器入口
|----package.json
|----tsconfig.json # TypeScript配置文件
|----webpack.config.js # Web应用webpack配置
|----webconfig.ssr.config.js # SSR应用Webpack配置

    工具配置

    1.TypeScript配置，新建tsconfig.json

    {
    "compilerOptions": {
      "target": "es5", 
      "module": "commonjs", 
      "jsx": "react", 
      "strict": true,
      "lib": [
        "DOM"
      ],
      "esModuleInterop": true
    },
    "include": [
      "./src/**/*.ts",
      "./src/**/*.tsx"
    ],
    "exclude": [
      "node_modules"
    ]
  }

    主要是添加了jsx设置和include设置

    2.Web环境webpack配置，新建webpack.config.js

    const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssPlugin = require('mini-css-extract-plugin');

module.exports = {
    entry: './src/main.web', // 入口文件
    output: {
        path: path.resolve(__dirname, 'build'), // 输出目录
        filename: 'bundle.web.js' // 输出文件
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/, // ts文件处理
                use: 'ts-loader'
            },
            {
                test: /\.scss$/, // scss文件处理
                use: [MiniCssPlugin.loader, 'css-loader', 'sass-loader']
            },
            {
                test: /\.css$/, // css文件处理
                use: [MiniCssPlugin.loader, 'css-loader']
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            chunks: ['main'], // chunk名称，entry是字符串类型，因此chunk为main
            filename: 'index.html', // 输出到build目录的文件名
            template: 'src/index.html' // 模板路径
        }),
        new MiniCssPlugin({
            filename: 'styles/[name].[contenthash:8].css', // 输出的CSS文件名
            chunkFilename: 'styles/[name].[contenthash:8].css'
        })
    ],
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.json'] // 添加ts和tsx后缀
    }
};

    3.SSR环境Webpack配置，新建webpack.ssr.config.js

    const path = require('path');
const MiniCssPlugin = require('mini-css-extract-plugin');

module.exports = {
    entry: './src/main.ssr',
    target: 'node', // 必须指定为Node.js，否则会打包Node.js内置模块
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.ssr.js',
        libraryTarget: 'commonjs2' // 打包为CommonJs模块才能被Node.js加载
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader'
            },
            {
                test: /\.scss$/,
                use: [MiniCssPlugin.loader, 'css-loader', 'sass-loader']
            },
            {
                test: /\.css$/,
                use: [MiniCssPlugin.loader, 'css-loader']
            }
        ]
    },
    plugins: [
        new MiniCssPlugin({
            filename: 'styles/[name].[contenthash:8].css',
            chunkFilename: 'styles/[name].[contenthash:8].css'
        })
    ],
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.json']
    }
};

    4.package.json添加npm命令

    {
    "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server",
    "build-ssr": "webpack --config webpack.ssr.config.js"
  }
}

    应用编码

    src/home/index.tsx

    import React from 'react';
import './index.scss';

export default class Home extends React.Component {
    render() {
        return (
            <div className="main">首页</div>
        )
    }
}

    src/home/index.scss

    .main {
    color: red;
}

    src/signin/index.tsx

    import React from 'react';
import { withRouter } from 'react-router-dom';

function SignIn(props: any) {
    return (
        <button onClick={() => props.history.replace('/')}>登录</button>
    )
}
export default withRouter(SignIn);

    src/App.tsx

    import React from 'react';
import { Switch, Route, Link } from 'react-router-dom'; // router

// 导入页面组件
import Home from './home';
import SignIn from './signin';

// 导出路由组件配置
export default function App() {
    return (
        <Switch>
            <Route path="/signin" component={SignIn} />
            <Route path="/" component={Home} />
        </Switch>
    )
}

    index.html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

    src/main.ssr.tsx

    import React from 'react';
import { StaticRouter, Link } from 'react-router-dom';
import { renderToString } from 'react-dom/server';
import App from './App'; // 将路由组件导入进来

export function render(req: any) { // 导出一个渲染函数，根据请求链接进行分发
    const context = {};
    const html = renderToString(
        <StaticRouter location={req.url} context={context}>
            <header>
                <nav>
                    <ul>
                        <li><Link to="/">首页</Link></li>
                        <li><Link to="/signin">登录</Link></li>
                    </ul>
                </nav>
            </header>
            <App />
        </StaticRouter>
    );
    return [html, context]; // 导出context和html渲染结果
}

    src/main.web.tsx

    import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Link } from 'react-router-dom';
import App from './App';

ReactDOM.render( // 渲染路由
    <BrowserRouter>
        <header>
            <nav>
                <ul>
                    <li><Link to="/">首页</Link></li>
                    <li><Link to="/signin">登录</Link></li>
                </ul>
            </nav>
        </header>
        <App />
    </BrowserRouter>, document.querySelector('#app'))

    index.js

    const express = require('express'); // 加载express
const { render } = require('./build/bundle.ssr'); // 加载ssr

const app = express();

app.use(express.static('.')) // 静态资源配置


app.get('/*', (req, res) => { // 所有请求都走这里处理，必须加*
    const [html, context] = render(req)
    console.log(context) // context目前没发现啥用处
    res.send(`
    <html>
    <head>
        <meta charset="UTF-8">
        <title>SSR</title>
        <link href="build/styles/main.8f173ff5.css" rel="stylesheet">
    </head>
    <body>
        <div id="app">${html}</div>
        <script src="build/bundle.web.js"></script>
    </body>
    </html>
    `);
    console.log(context)
});

app.listen(8080)

    注意：

    • 静态资源配置必须在最上面
    • app.get('/')必须有号
    • HTML字符串必须手动引入CSS和Web构建结果

    执行构建

    npm run build # 构建Web
npm run build-ssr #　构建SSR
node index.js # 启动Express服务器

    查看结果

    首页样式

    image-20200302173258430

    首页代码

    image-20200302173322601

    登录页样式

    image-20200302173344488

    登录页代码

    image-20200302173405907

    源码地址

    Https://github.com/xialeistud...

    0.jpeg

    webpackssrreactreact-router
    xialeistudio
    21.5k 声望5k 粉丝
    « 上一篇
    Webpack4不求人系列（1）
    下一篇 »
    Webpack4不求人(3) ——性能优化

    引用和评论

    推荐阅读
    头像
    基于llama3和langchain使用RAG搭建你的私有知识库！

    xialeistudio赞 4阅读 7k

    头像
    一些react使用小技巧（中）

    夕水赞 7阅读 3.6k评论 5

    头像
    一些react使用小技巧（下）

    夕水赞 5阅读 3.4k评论 6

    头像
    前端微服务跨域配置解决办法，devServer为例

    smallStone赞 7阅读 6.9k评论 29

    头像
    深入浅出React中的refs

    夕水赞 3阅读 3.3k

    头像
    startViewTransition的简单示例

    热饭班长赞 1阅读 3.7k

    头像
    开发自定义Taro插件解决跨平台难题

    南玖赞 1阅读 2.4k

    0 条评论
    得票最新