React的服务器端渲染工具
npm install @ctsj/react-ssrjs
npm install @ctsj/react-ssr
`
使用
1.在宿主工程根路径下创建crsrc.js文件
`js
/ 此文件是用来配置构建宿主工程的命令 /
module.exports = {
// 构建宿主工程的命令和参数(如下所示)
command: 'npm run buildapp:ssr',
};
`
2.在宿主工程根路径下创建crs.build.config.js
`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
`js
/ 此文件是用来为服务器端大妈提供相关的信息 /
/**
* getRouterPathConfig
* @description - 获取路由配置,以数组的形式返回
* @return Array
*/
export function getRouterPathConfig() {
return [
'/',
'/system',
];
};
/**
* getStaticRouter
* @description - 获取StaticRouter对象
* @param props - location
* @return {Promise}
*/
export function getStaticRouter(props) {
return
}
/**
* 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命令
`js
// 构建ssr
"buildssr": "crs build",
// 启动
"startssr": "crs start -t dev"
`
5.打开浏览器输入localhost:9080/路由地址
CLI
$3
- -hc --contextconfig
上下文构建的配置文件 默认是宿主工程根路径下的crsrc.js
此文件返回如下结构
`js
{
command: '构建宿主工程的命令和参数,如npm run buildapp'
cwd: 运行命令的路径(默认是buildssr运行的路径)
env: 环境变量
outputPath: 静态资源构建后的路径(一般是宿主路径中的dist)
htmlRelativePath: 静态资源中模板'html相对路径'(一般是index.html)
htmlTemplateName: 新创建的模板'html模板名称'(默认是template)
}
`
- -c --config
构建服务端代码的配置文件,默认是宿主工程根路径下的crs.build.config.js,对构建过程进行控制
$3
- -t --type
启动的类型
dev: 开发模式使用node直接启动
prod: 生产模式试用pm2启动
- -n --name
-t使用了prod的时候,pm2的name
- p --port
启动的端口默认是9080
$3
- -n --name
停止csr start -t prod -name 启动的服务
$3
- -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配置文件
`js
module.exports = {
/**
* getLocalIdent cssModule生成规则
*/
getLocalIdent(context, localIdentName, localName) {
},
/**
* getTheme 返回less主题对象
*/
getTheme() {
},
/**
* getConfig webpack配置
*/
getConfig({webpackConfig, webpack, plugins, define}) {
}
}
`
###crs.module.js
用户提供的服务端代码片段
`js
/**
* getRouterPathConfig
* @description - 获取路由配置
*/
export function getRouterPathConfig() {
return new Promise(resolve => {
});
}
/**
* getStaticRouter
* @description - 获取StaticRouter对象
* @param props
* @return {Promise}
*/
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';
}
``