React服务端渲染（项目搭建）

栏目: 服务器 · 发布时间: 6年前

内容简介：目前单页面应用（SPA）很是流行，同时也带了一些问题，如SEO不友好，首屏在网络较差的情况下加载慢。为了解决这些问题仿佛又回到了传统web开发模式上去了，回去是不可能的，已经入坑了是不可能回去的。React作为一个SPA应用开发框架同时也支持服务端渲染，本系列文章将从以下几点介绍如何搭建一个React服务端渲染的项目如果你倾向于开箱即用的体验，可以尝试更高层次的解决方案Next.js，Next.js并且提供了一些额外的功能。本系列文章皆在让你了解如何搭建服务端渲染，当你熟悉后能更直接地控制应用程序，在你阅

目前单页面应用（SPA）很是流行，同时也带了一些问题，如SEO不友好，首屏在网络较差的情况下加载慢。为了解决这些问题仿佛又回到了传统web开发模式上去了，回去是不可能的，已经入坑了是不可能回去的。React作为一个SPA应用开发框架同时也支持服务端渲染，本系列文章将从以下几点介绍如何搭建一个React服务端渲染的项目

  • 项目搭建
  • 前后端路由同构
  • 数据预取和同步

如果你倾向于开箱即用的体验，可以尝试更高层次的解决方案Next.js，Next.js并且提供了一些额外的功能。本系列文章皆在让你了解如何搭建服务端渲染，当你熟悉后能更直接地控制应用程序，在你阅读之前，你需要具备以下技术能力

前端

  1. React全家桶（React、React-Router、Redux）(熟悉)
  2. Webpack (熟悉)
  3. Babel (了解)
  4. Eslint (了解)
  5. ES6 (了解)
  6. Promise (了解)

后端

  • Express(了解)

Webpack配置

服务端渲染就是让服务端生成html字符串，然后把生成好的html字符串发送给浏览器，浏览器收到html后进行渲染，而客户端只做DOM的事件绑定。至此我们需要打包出两份代码，一份由服务端执行渲染html，一份由浏览器执行，大部分代码都可以在 服务端 和 客户端 执行

目录结构

React服务端渲染（项目搭建） 
+---config                          配置目录
|       dev.env.js                  开发环境配置
|       prod.env.js                 生产环境配置
|       util.js
|       webpack.config.base.js      公用打包配置
|       webpack.config.client.js    客户端打包配置
|       webpack.config.server.js    服务端打包配置
+---public
|       favicon.ico
+---src                             源码目录
|   +---assets                      资源目录
|       App.jsx                     根组件
|       entry-client.js             客户端打包入口
|       entry-server.js             服务端打包入口
|       server.js                   服务端启动js
|       setup-dev-server.js         开发环境打包服务
|   .babelrc                        babel配置文件
|   .eslintignore
|   .eslintrc.js                    eslint配置文件
|   index.html                      模板html
|   package-lock.json
|   package.json
复制代码

公用配置

首先编写服务端和客户端通用的配置，包括js、字体、图片、音频等文件对应的各种loader。在公用配置中区分是开发环境还是生产环境，如果是生产环境使用UglifyJsPlugin插件进行js丑化，并且使用DefinePlugin插件定义不同环境下的配置

webpack.config.base.js 

const webpack = require("webpack");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");

let env = "dev";
let isProd = false;
let prodPlugins = [];
if (process.env.NODE_ENV === "production") {
  env = "prod";
  isProd = true;
  prodPlugins = [
    new UglifyJsPlugin({sourceMap: true})
  ];
}

const baseWebpackConfig = {
  devtool: isProd ? "#source-map" : "#cheap-module-source-map",
  resolve: {
    extensions: [".js", ".jsx", ".json"]
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        loader: ["babel-loader", "eslint-loader"],
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        loader: "url-loader",
        options: {
          limit: 10000,
          name: "static/img/[name].[hash:7].[ext]"
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: "static/fonts/[name].[hash:7].[ext]"
        }
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env": require("./" + env + ".env")
    }),
    ...prodPlugins
  ]
}

module.exports = baseWebpackConfig;

复制代码

客户端配置

客户端配置和普通单页面应用配置一样，使用HtmlWebpackPlugin插件把打包后的样式和js注入到模板index.html中，指定 dist 为打包后的根目录，后续express会以该目录作为静态资源目录做资源映射。 util.js 中的 styleLoaders 函数中编写了css、postcss、sass、less、stylus等loader配置，在生产环境中使用ExtractTextPlugin插件把样式提取到css文件中

webpack.config.client.js 

const path = require("path");
const merge = require("webpack-merge");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const baseWebpackConfig = require("./webpack.config.base");
const util = require("./util");

const isProd = process.env.NODE_ENV === "production";

const webpackConfig = merge(baseWebpackConfig, {
  entry: {
    app: "./src/entry-client.js"
  },
  output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "static/js/[name].[chunkhash].js",
    publicPath: "/dist/"  // 打包后输出路径以/dist/开头
  },
  module: {
    rules: util.styleLoaders({
        sourceMap: isProd ? true : false,
        usePostCSS: true,
        extract: isProd ? true : false
      })
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "index.html"
    })
  ]
});

if (isProd) {
  webpackConfig.plugins.push(
    new ExtractTextPlugin({
      filename: "static/css/[name].[contenthash].css"
    })
  );
}

module.exports = webpackConfig;
复制代码

服务端配置

服务端配置不同于客户端，服务端运行于node中，不支持babel，不支持样式，同时也不支持一些浏览器全局对象如window、document，对于babel使用babel-loader进行转换，对于样式使用插件提取出来，服务端只运行js生成html片段，样式由客户端打包并供浏览器下载执行。有人会使用babel-register或babel-node，这两者都是在node中用babel进行转换，而且都是实时转码，因而性能上会有一定影响，建议在开发环境中使用，生产环境中应先预先转换好代码

webpack.config.server.js 

const path = require("path");
const webpack = require("webpack");
const merge = require("webpack-merge");
const baseWebpackConfig = require("./webpack.config.base");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const util = require("./util");

const webpackConfig = merge(baseWebpackConfig, {
  entry: {
    app: "./src/entry-server.js"
  },
  output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "entry-server.js",
    libraryTarget: "commonjs2"  // 打包成commonjs2规范
  },
  target: "node",  // 指定node运行环境
  module: {
    rules: util.styleLoaders({
        sourceMap: true,
        usePostCSS: true,
        extract: true
      })
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env.REACT_ENV": JSON.stringify("server")  // 指定React环境为服务端
    }),
    // 服务端不支持window document等对象，需将css外链
    new ExtractTextPlugin({
      filename: "static/css/[name].[contenthash].css"
    })
  ]
});

module.exports = webpackConfig;
复制代码

Babel和Eslint

React需要用babel插件来转换，安装babel-core、babel-preset-env、babel-preset-react、babel-loader。babel配置如下

{
  "presets": ["env", "react"]
}
复制代码

env包含es2015、es2016、es2017及最新版本，react用于转换React

注：babel使用的是6.x版本

良好的代码规范是合作开发的基础，本文使用eslint进行代码规范检查，安装eslint、eslint-plugin-react、babel-eslint、eslint-loader。eslint配置如下

module.exports = {
    root: true,
    parser: "babel-eslint",
    env: {
      es6: true,
      browser: true,
      node: true
    },
    extends: [
      "eslint:recommended",
      "plugin:react/recommended"
    ],
    parserOptions: {
      sourceType: "module",
      ecmaFeatures: {
        jsx: true
      }
    },
    rules: {
      "no-unused-vars": 0,
      "react/display-name": 0,
      "react/prop-types": 0
    },
    settings: {
      react: {
        version: "16.4.2"
      }
    }
  }
复制代码

配置 jsx:true 启用对jsx的支持，配置 eslint:recommended 启用eslint核心规则，配置 plugin:react/recommended 启用对react语义支持。

eslint中文官网：cn.eslint.org

eslint-plugin-react插件： github.com/yannickcr/e…

入口

编写入口组件App.jsx

import React from "react";
import "./assets/app.css";

class Root extends React.Component {
  render() {
    return (
      <div>
        <div className="title">This is a react ssr demo</div>
        <ul className="nav">
          <li>Bar</li>
          <li>Baz</li>
          <li>Foo</li>
          <li>TopList</li>
        </ul>
        <div className="view">
        </div>
      </div>
    );
  }
}

export default Root;
复制代码

在客户端入口中获取根组件然后进行挂载

entry-client.js 

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.hydrate(<App />, document.getElementById("app"));
复制代码

React16提供了一个函数hydrate()，在服务端渲染时用来替代render，hydrate不会对dom进行修补只会对文本进行修补，如果文本不一样使用客户端的文本内容

服务器端入口将App组件module.exports即可

entry-server.js 

import React from "react";
import App from "./App";

module.exports = <App/>;
复制代码

在server.js中使用express启动服务，处理任何get请求。从服务端打包后的js中获取根组件，读取打包后的index.html模板，将dist映射为express静态资源目录并以 /dist 作为url前缀（和客户端打包配置中 output.publicPath 保持一致）。React为服务端渲染提供了renderToString()函数，用来把组件渲染成html字符串，调用此函数传入根组件，将返回的html字符串替换掉模板中占位符

server.js 

const express = require("express");
const fs = require("fs");
const path = require("path");
const ReactDOMServer = require("react-dom/server");
const app = express();

let serverEntry = require("../dist/entry-server");
let template = fs.readFileSync("./dist/index.html", "utf-8");

// 静态资源映射到dist路径下
app.use("/dist", express.static(path.join(__dirname, "../dist")));

app.use("/public", express.static(path.join(__dirname, "../public")));

/* eslint-disable no-console */
const render = (req, res) => {
  console.log("======enter server======");
  console.log("visit url: " + req.url);

  let html = ReactDOMServer.renderToString(serverEntry);
  let htmlStr = template.replace("<!--react-ssr-outlet-->", `<div id='app'>${html}</div>`);
  // 将渲染后的html字符串发送给客户端
  res.send(htmlStr);
}

app.get("*", render);

app.listen(3000, () => {
  console.log("Your app is running");
});
复制代码

打包之前的index.html如下

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="shortcut icon" href="/public/favicon.ico">
    <title>React SSR</title>
</head>
<body>
    <!--react-ssr-outlet-->
</body>
</html>
复制代码

运行

在package.json中编写scripts

"scripts": {
    "start": "node src/server.js",
    "build": "rimraf dist && npm run build:client && npm run build:server",
    "build:client": "webpack --config config/webpack.config.client.js",
    "build:server": "webpack --config config/webpack.config.server.js"
}
复制代码

先运行 npm run build 打包客户端和服务端，然后运行 npm run start 启动服务，打开浏览器输入 http://localhost:3000 。打开浏览器的network查看服务端返回的内容

React服务端渲染（项目搭建）

可以看到是最终渲染后的html内容

开发环境热更新

通过以上方式运行存在一些问题，每次更改代码后都需要打包客户端和服务端，然后重新启动服务。当重启服务器后需要刷浏览更改后的代码才会生效，这对于在开发模式下极大的影响了开发效率和体验。在单页面应用中React提供了脚手架create-react-app，其内部使用了webpack-dev-server作为开发环境的服务支持热更新。有人会使用脚手架作为客户端再使用express或koa作为服务端，这样一来客户端和服务端占用了两个服务端口，无法通用，如果客户端不用脚手架使用webpack进行打包并加上watch功能，服务端把打包后的资源做资源映射，虽然服务端和客户端公用了同一服务，但是无法做到浏览器热更新，比较好的方法是使用webpack-dev-middleware和webpack-hot-middleware这两个中间件。webpack-dev-middleware中间件不会把打包后的资源写入磁盘而是在内存中处理，当文件内容变动时会进行重新编译，webpack-hot-middleware中间件就是做热更新用的

先对package.json进行修改

"scripts": {
    "dev": "node src/server.js",
    "start": "cross-env NODE_ENV=production node src/server.js",
    "build": "rimraf dist && npm run build:client && npm run build:server",
    "build:client": "cross-env NODE_ENV=production webpack --config config/webpack.config.client.js",
    "build:server": "cross-env NODE_ENV=production webpack --config config/webpack.config.server.js"
}
复制代码

将客户端和服务端打包脚本更改为生产环境，服务启动脚本同样加上生产环境标识。在 server.js 中判断当前环境是否是生产环境，生产环境保持原有的逻辑，非生产环境使用webpack-dev-middleware和webpack-hot-middleware进行热更新 

const isProd = process.env.NODE_ENV === "production";

let serverEntry;
let template;
if (isProd) {
  serverEntry = require("../dist/entry-server");
  template = fs.readFileSync("./dist/index.html", "utf-8");
  // 静态资源映射到dist路径下
  app.use("/dist", express.static(path.join(__dirname, "../dist")));
} else {
  require("./setup-dev-server")(app, (entry, htmlTemplate) => {
    serverEntry = entry;
    template = htmlTemplate;
  });
}
复制代码

上述代码调用了 setup-dev-server.js 中module.exports出的函数，传入express实例app对象和一个打包成功后的回调函数。在 setup-dev-server.js 中，客户端使用webpack-dev-middleware和webpack-hot-middleware，服务端使用webpack打包并且进行watch

webpack-dev-middleware 注：webpack-dev-middleware使用的是1.x版本

webpack-hot-middleware

客户端

使用webpack函数打包之前先将webpack-hot-middleware/client添加至entry中，再添加HotModuleReplacementPlugin插件（该插件用来启用热更新）。给 clientCompiler 对象设置打包完成后的回调，webpack-dev-middleware是打包在内存中的，需要从文件系统中读取index.html然后调用传入的回调函数把模板传出去 

const webpack = require("webpack");
const clientConfig = require("../config/webpack.config.client");

// 修改入口文件，增加热更新文件
clientConfig.entry.app = ["webpack-hot-middleware/client", clientConfig.entry.app];
clientConfig.output.filename = "static/js/[name].[hash].js";
clientConfig.plugins.push(new webpack.HotModuleReplacementPlugin());

// 客户端打包
const clientCompiler = webpack(clientConfig);

const devMiddleware = require("webpack-dev-middleware")(clientCompiler, {
publicPath: clientConfig.output.publicPath,
noInfo: true
});
// 使用webpack-dev-middleware中间件服务webpack打包后的资源文件
app.use(devMiddleware);

clientCompiler.plugin("done", stats => {
  const info = stats.toJson();
  if (stats.hasWarnings()) {
    console.warn(info.warnings);
  }
    
  if (stats.hasErrors()) {
    console.error(info.errors);
    return;
  }
  // 从webpack-dev-middleware中间件存储的内存中读取打包后的inddex.html文件模板
  template = readFile(devMiddleware.fileSystem, "index.html");
  update();
});

// 热更新中间件
app.use(require("webpack-hot-middleware")(clientCompiler));
复制代码

服务端

webpack不仅可以打包到磁盘还可以打包到自定义的文件系统如内存文件系统，使用 outputFileSystem 属性指定打包输出的文件系统。服务端打包时使用watch函数检测文件变动，打包完成后同样从内存中获取entry-server.js文件内容，这里读取出来的是字符串，而 ReactDOMServer.renderToString(serverEntry) 传入的是一个组件对象，我们需要使用node中的 module 进行编译，实例化一个module调用 _compile 方法，第一个参数是javascript代码，第二个自定义的名称，最后获取 entry-server.js 中module.exports出的对象 

const webpack = require("webpack");
const MFS = require("memory-fs");
const serverConfig = require("../config/webpack.config.server");

// 监视服务端打包入口文件，有更改就更新
const serverCompiler = webpack(serverConfig);
// 使用内存文件系统
const mfs = new MFS();
serverCompiler.outputFileSystem = mfs;
serverCompiler.watch({}, (err, stats) => {
  const info = stats.toJson();
  if (stats.hasWarnings()) {
    console.warn(info.warnings);
  }

  if (stats.hasErrors()) {
    console.error(info.errors);
    return;
  }

  // 读取打包后的内容并编译模块
  const bundle = readFile(mfs, "entry-server.js");
  const m = new module.constructor();
  m._compile(bundle, "entry-server.js");
  serverEntry = m.exports;
  update();
});
复制代码
module.exports = function setupDevServer(app, callback) {
  let serverEntry;
  let template;
  const update = () => {
    if (serverEntry && template) {
      callback(serverEntry, template);
    }
  }
  ...
}
复制代码

打包和访问同步

运行 npm run dev 后终端输出如下的时候打开浏览器访问 http://localhost:3000 

E:\react-ssr>npm run dev

> react-ssr@1.0.0 dev E:\react-ssr
> node src/server.js

Your app is running
复制代码

这个时候会出现如下错误

E:\react-ssr>npm run dev

> react-ssr@1.0.0 dev E:\react-ssr
> node src/server.js

Your app is running
======enter server======
visit url: /
TypeError: Cannot read property 'replace' of undefined
    at render (E:\react-ssr\src\server.js:32:26)
    at Layer.handle [as handle_request] (E:\react-ssr\node_modules\express\lib\r
outer\layer.js:95:5)
    at next (E:\react-ssr\node_modules\express\lib\router\route.js:137:13)
    at Route.dispatch (E:\react-ssr\node_modules\express\lib\router\route.js:112
:3)
    at Layer.handle [as handle_request] (E:\react-ssr\node_modules\express\lib\r
outer\layer.js:95:5)
    at E:\react-ssr\node_modules\express\lib\router\index.js:281:22
    at param (E:\react-ssr\node_modules\express\lib\router\index.js:354:14)
    at param (E:\react-ssr\node_modules\express\lib\router\index.js:365:14)
    at Function.process_params (E:\react-ssr\node_modules\express\lib\router\ind
ex.js:410:3)
复制代码

问题行所在代码

let htmlStr = template.replace("<!--react-ssr-outlet-->", `<div id='app'>${html}</div>`);
复制代码

经过一段时间后输出如下

...
    at next (E:\react-ssr\node_modules\express\lib\router\index.js:275:10)
    at middleware (E:\react-ssr\node_modules\webpack-hot-middleware\middleware.j
s:37:48)
    at Layer.handle [as handle_request] (E:\react-ssr\node_modules\express\lib\r
outer\layer.js:95:5)
    at trim_prefix (E:\react-ssr\node_modules\express\lib\router\index.js:317:13
)
    at E:\react-ssr\node_modules\express\lib\router\index.js:284:7
    at Function.process_params (E:\react-ssr\node_modules\express\lib\router\ind
ex.js:335:12)
    at next (E:\react-ssr\node_modules\express\lib\router\index.js:275:10)
webpack built 545c3865aff0cdac2a64 in 3570ms
复制代码

webpack built 545c3865aff0cdac2a64 in 3570ms 表示webpack已经打包完成

这是因为webpack打包客户端和服务端的时候是异步的，当打包完成后调用回调函数才给 template 赋值，在打包过程中express服务已经启动，访问服务器的时候 template 是undefined。为了同步浏览器请求和webpack打包同步，这里使用 Promise

setup-dev-server.js 

module.exports = function setupDevServer(app, callback) {
  let serverEntry;
  let template;
  let resolve;
  const readyPromise = new Promise(r => { resolve = r });
  const update = () => {
    if (serverEntry && template) {
      callback(serverEntry, template);
      resolve(); // resolve Promise让服务端进行render
    }
  }
  
  ...
  
  return readyPromise;
}
复制代码

先创建一个Promise实例，将 resolve 函数赋值给外部变量 resolve ，最后返回 readyPromise 。在回调函数中调用 resolve 使Promise变成fulfilled状态

server.js 

let serverEntry;
let template;
let readyPromise;
if (isProd) {
  serverEntry = require("../dist/entry-server");
  template = fs.readFileSync("./dist/index.html", "utf-8");
  // 静态资源映射到dist路径下
  app.use("/dist", express.static(path.join(__dirname, "../dist")));
} else {
  readyPromise = require("./setup-dev-server")(app, (entry, htmlTemplate) => {
    serverEntry = entry;
    template = htmlTemplate;
  });
}
复制代码
app.get("*", isProd ? render : (req, res) => {
  // 等待客户端和服务端打包完成后进行render
  readyPromise.then(() => render(req, res));
});
复制代码

express接收get请求，当readyPromise变成fulfilled状态才调用 render 函数。

编写热更新代码

运行 npm run dev ，浏览器访问 http://localhost:3000 ，打开浏览器的network面板

React服务端渲染（项目搭建）

看到http://localhost:3000/__webpack_hmr请求和console中的[HMR] connected说明热更新已生效，但是现在是否可以热更新了？让我们来试一下。打开 App.jsx 修改 <div className="title">This is a react ssr demo</div> 为 <div className="title">This is updated title</div> ，在终端看到如下输出 

...
webpack building...
webpack built 6d23c952cd6c3bf01ed6 in 299ms
复制代码

在浏览器页面上中并没有看到任何变化，但是在console 面板看到警告

React服务端渲染（项目搭建）

服务端重新打包后发送通知给浏览器，浏览器端已经收到通知，但是更新的模块 ./src/App.jsx 没有实现更新，所以无法进行热更新。

webpack-hot-middleware插件只是为浏览器和服务器通信架起了一座桥梁，服务端发生改变会通知客户端，实际上热更新并不是这个插件做的事情，需要使用webpack's HMR API来编写热更新代码

实际上webpack很多loader插件都是自己实现热更新，下面是style-loader插件的部分源码

style-loader/index.js 

var hmr = [
	// Hot Module Replacement,
	"if(module.hot) {",
	// When the styles change, update the <style> tags
	"	module.hot.accept(" + loaderUtils.stringifyRequest(this, "!!" + request) + ", function() {",
	"		var newContent = require(" + loaderUtils.stringifyRequest(this, "!!" + request) + ");",
	"",
	"		if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];",
	"",
	"		var locals = (function(a, b) {",
	"			var key, idx = 0;",
	"",
	"			for(key in a) {",
	"				if(!b || a[key] !== b[key]) return false;",
	"				idx++;",
	"			}",
	"",
	"			for(key in b) idx--;",
	"",
	"			return idx === 0;",
	"		}(content.locals, newContent.locals));",
	"",
	// This error is caught and not shown and causes a full reload
	"		if(!locals) throw new Error('Aborting CSS HMR due to changed css-modules locals.');",
	"",
	"		update(newContent);",
	"	});",
	"",
	// When the module is disposed, remove the <style> tags
	"	module.hot.dispose(function() { update(); });",
	"}"
].join("\n");
复制代码

我们在 entry-client.js 中编写热更新代码，以 App.jsx 作为热更新依赖入口 

// 热更新
if (module.hot) {
  module.hot.accept("./App.jsx", () => {
    const NewApp = require("./App").default;
    ReactDOM.hydrate(<NewApp />, document.getElementById("app"));
  });
}
复制代码

此时打开 App.jsx 修改 <div className="title">This is a react ssr demo</div> 为 <div className="title">This is updated title</div> ，浏览器自动更新页面内容

本节源码


以上所述就是小编给大家介绍的《React服务端渲染（项目搭建）》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍
Game Engine Architecture, Second Edition

Game Engine Architecture, Second Edition

Jason Gregory / A K Peters/CRC Press / 2014-8-15 / USD 69.95

A 2010 CHOICE outstanding academic title, this updated book covers the theory and practice of game engine software development. It explains practical concepts and techniques used by real game studios,......一起来看看 《Game Engine Architecture, Second Edition》 这本书的介绍吧!

码农工具
HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具

  • New
  • 文章
  • 话题
  • 教程
    • 关注 码农网 公众号
    版权所有，保留一切权利！© 2018-2024 码农网 粤ICP备17054400号-3