1.0.1 • Published 2 years ago
@ctsj/react-ssr v1.0.1
CTSJ-React-SSR
概述
提供对React宿主工程的SSR支持,React的宿主工程可以是以任意脚手架搭建的(如:可以是用Create-React-App、UMI、或自己用Webpack搭建的)
安装
npm install @ctsj/react-ssr
使用
1.在宿主工程根路径下创建crsrc.js文件
/*** 此文件是用来配置构建宿主工程的命令 ***/
module.exports = {
// 构建宿主工程的命令和参数(如下所示)
command: 'npm run buildapp:ssr',
};
2.在宿主工程根路径下创建crs.build.config.js
/*** 此文件是用来配置构建服务端代码 ***/
module.exports = {
// cssModule的生成规则
getLocalIdent(context, localIdentName, localName){
},
// cssModule的生成规则
localIdentName: '[name]__[local]',
// less的主题文件
getTheme(){
return {}
},
// 构建服务端代码的webpack配置
getConfig({webpackConfig,webpack,plugins,define})
};
3.在宿主工程根路径下创建crs.module.js
/*** 此文件是用来为服务器端大妈提供相关的信息 ***/
/**
* getRouterPathConfig
* @description - 获取路由配置,以数组的形式返回
* @return Array
*/
export function getRouterPathConfig() {
return [
'/',
'/system',
];
};
/**
* getStaticRouter
* @description - 获取StaticRouter对象
* @param props - location
* @return {Promise<unknown>}
*/
export function getStaticRouter(props) {
return <StaticRouter {...props} />
}
/**
* getData
* @description - 获取路由对应的数据
* @param req
* @return Promise
*/
export function getData(req) {
return Promise.resolve('result');
}
/**
* getHtmlTemplatePath
* @description - 静态资源的html模板路径dist/template.html路径
* @return string
*/
export function getHtmlTemplatePath() {
return path.join(__dirname, '../', 'dist', 'template.html');
}
/**
* getPublicResourcePath
* @description - express的静态资源目录
*/
export function getPublicResourcePath() {
return path.join(__dirname, '../', 'dist');
}
/**
* getRootElementSelector
* @description - 获取渲染的根元素选择器
* @return {string}
*/
export function getRootElementSelector() {
return '#app';
}
4.在宿主工程根路径下的package.json中加入ssr命令
// 构建ssr
"buildssr": "crs build",
// 启动
"startssr": "crs start -t dev"
5.打开浏览器输入localhost:9080/路由地址
CLI
csr build - 构建ssr
-hc --contextconfig 上下文构建的配置文件 默认是宿主工程根路径下的crsrc.js 此文件返回如下结构
{ command: '构建宿主工程的命令和参数,如npm run buildapp' cwd: 运行命令的路径(默认是buildssr运行的路径) env: 环境变量 outputPath: 静态资源构建后的路径(一般是宿主路径中的dist) htmlRelativePath: 静态资源中模板'html相对路径'(一般是index.html) htmlTemplateName: 新创建的模板'html模板名称'(默认是template) }
- -c --config
构建服务端代码的配置文件,默认是宿主工程根路径下的crs.build.config.js,对构建过程进行控制
###  csr start - 启动
- -t --type
启动的类型
dev: 开发模式使用node直接启动
prod: 生产模式试用pm2启动
- -n --name
-t使用了prod的时候,pm2的name
- p --port
启动的端口默认是9080
###  csr stop - 停止
- -n --name
停止csr start -t prod -name 启动的服务
###  csr start-dev - 开发运行
- -hc --contextconfig
参考build的-hc参数
- -c --config
参考build的-c参数
- -p --port
参考start的-p参数
# 配置文件
##crsrc.js
返回构建宿主工程的信息
```js
{
command: '构建宿主工程的命令和参数,如npm run buildapp'
cwd: 运行命令的路径(默认是buildssr运行的路径)
env: 环境变量
outputPath: 静态资源构建后的路径(一般是宿主路径中的dist)
htmlRelativePath: 静态资源中模板'html相对路径'(一般是index.html)
htmlTemplateName: 新创建的模板'html模板名称'(默认是template)
}
###crs.build.config.js 构建服务端的webpack配置文件
module.exports = {
/**
* getLocalIdent cssModule生成规则
*/
getLocalIdent(context, localIdentName, localName) {
},
/**
* getTheme 返回less主题对象
*/
getTheme() {
},
/**
* getConfig webpack配置
*/
getConfig({webpackConfig, webpack, plugins, define}) {
}
}
###crs.module.js 用户提供的服务端代码片段
/**
* getRouterPathConfig
* @description - 获取路由配置
*/
export function getRouterPathConfig() {
return new Promise(resolve => {
});
}
/**
* getStaticRouter
* @description - 获取StaticRouter对象
* @param props
* @return {Promise<unknown>}
*/
export function getStaticRouter(props) {
return new Promise(resolve => {
});
}
/**
* getData
* @param req
* @return Promise
*/
export function getData(req) {
return Promise.resolve('123');
}
/**
* getHtmlTemplatePath
* @description - 静态资源的html模板路径dist/template.html路径
*/
export function getHtmlTemplatePath() {
return path.join(__dirname, '../', 'dist', 'template.html');
}
/**
* getPublicResourcePath
* @description - express的静态资源目录
*/
export function getPublicResourcePath() {
return path.join(__dirname, '../', 'dist');
}
/**
* getRootElementSelector
* @description - 获取渲染的根元素选择器
* @return {string}
*/
export function getRootElementSelector() {
return '#app';
}