1.0.0 • Published 5 years ago
lg-react-ssr-component v1.0.0
lg-react-ssr-component
安装
npm i @lg-react-ssr-component
1.目录介绍
packages(组件源码)
lib (组件编译之后代码)
2.开发编译
实时编译 npm run watch
npm link
项目中npm link lg-react-ssr-component
3.发布组件
npm version patch
npm run build
npm publish
4.组件规范
目前的规范如下
- packages 目录下index.ts 暴露组件
- 每个组件对应一个文件夹原则上文件夹名字小写
- 每个组件内部有一个index.ts 暴露组件以及引入对应的样式文件
5.使用
corsMiddleware
import { corsMiddleware } from 'lg-react-ssr-component'
app.use(corsMiddleware({}))
apiMiddleware
import { apiMiddleware } from 'lg-react-ssr-component'
app.use(apiMiddleware({
prefix,
fetch,
serviceList,
routePath
}))
serviceList
const serviceList = [{
key: 'yii',
url: process.env.YII_URL
}, {
key: 'api',
url: process.env.SERVICE_URL,
}]
renderMiddleware
import { renderMiddleware } from 'lg-react-ssr-component'
app.use(renderMiddleware(renderConfig))
renderConfig
import App from '../../client/container/App'
import getStore from '../../client/redux/store'
import { setLanguage } from '../../client/action/language'
import { fetchUserInfo } from '../../client/container/App/action'
import { fetchNavInfo } from '../../client/container/App/navAction'
import { fetchNotice } from '../../client/container/App/noticeAction'
import routes, { ACTIVE_PATH } from '../../controllers'
import locales from '../locales'
const config = {
App,
getStore,
setLanguage,
routes,
fetchList: [{
action: fetchUserInfo,
params: {
activePath: ACTIVE_PATH
}
}, {
action: fetchNavInfo,
}, {
action: fetchNotice,
}],
locales,
beforeLoad: (ctx, route) => {
console.log('beforeLoad')
},
beforeRender: (ctx, route) => {
console.log('beforeRender')
}
}
export default config
Logger
import { Logger } from 'lg-react-ssr-component'
global.logger = Logger({
logPath: process.env.LOG_PATH,
isDev: __DEV__
})
setSeo
import { setSeo } from 'lg-react-ssr-component'
setSeo({
fetch,
routePath: INDEX_PATH,
})
fetch
import { fetch as utilFetch } from 'lg-utils'
import { isClient } from './util'
import serviceList from '../server/config/serviceList'
import versions from '../server/config/versions'
const fetch = params => utilFetch({
serviceList,
versions,
indexPath: process.env.ROUTE_PATH,
type: isClient ? 'client' : 'server',
logger: global.logger,
serverHost: process.env.SERVER_API_HOST,
serverPort: process.env.SERVER_API_PORT,
isDev: __DEV__
})(params)
export default fetch
server.js
const { webpackDevServer } = require('lg-react-ssr-component')
const webpackConfig = require('./webpack.config')
webpackDevServer(webpackConfig)
paths.js
const { paths } = require('lg-react-ssr-component')
module.exports = paths
isomorphic-config.js
const { webpackIsomorphicConfig } = require('lg-react-ssr-component')
module.exports = webpackIsomorphicConfig
webpack.config.js PC项目可直接使用 webpack config,可以添加自定义配置
const { webpackConfig } = require('lg-react-ssr-component')
module.exports = webpackConfig
项目根目录创建customConfig.js可进行webpack部分内容进行配置
module.exports = {
/** less options */
lessDefaultOptions: {
modifyVars: {
hd: '3px',
'brand-primary': '#3C3C3C',
}
},
/** 开启 BundleAnalyzerPlugin 开关 默认关闭 */
enableDll: false,
/** HtmlWebpackPlugin 配置 */
HtmlWebpackConfig: {},
/** sass-resources-loader 配置 */
sassResourcesLoaderOptions: {}
}
DonePlugin (webpack构建完成执行文件操作插件 原createVersion已内置 production生成version.txt) 默认webpack已添加该插件
构建完成需要对文件进行操作可使用此插件
const { DonePlugin } = require('lg-react-ssr-component')
//构建完成对文件进行操作
new DonePlugin({
fileHandler: [{
/** 文件路劲 */
filePath: string
/**
* 处理文件
* @param content string 文件文本内容
* @return string 返回修改后的文件内容
*/
handler: (content: string) => string
}]
})
注意
autoprefixer 以及 postcss-pxtorem 已从webpack配置去除 如需配置postcss-loader 如需使用如下:
项目根目录创建postcss.config.js
module.exports = { plugins: { 'autoprefixer': {}, 'postcss-pxtorem': { rootValue: 124.2, propWhiteList: [] } } }
1.0.0
5 years ago