1.0.0 • Published 5 years ago

lg-react-ssr-component v1.0.0

Weekly downloads
-
License
ISC
Repository
-
Last release
5 years ago

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: []
        }
      }
    }
@babel/cli@babel/core@babel/node@babel/plugin-proposal-class-properties@babel/plugin-proposal-decorators@babel/plugin-proposal-do-expressions@babel/plugin-proposal-export-default-from@babel/plugin-proposal-export-namespace-from@babel/plugin-proposal-function-bind@babel/plugin-proposal-function-sent@babel/plugin-proposal-json-strings@babel/plugin-proposal-logical-assignment-operators@babel/plugin-proposal-nullish-coalescing-operator@babel/plugin-proposal-numeric-separator@babel/plugin-proposal-object-rest-spread@babel/plugin-proposal-optional-chaining@babel/plugin-proposal-pipeline-operator@babel/plugin-proposal-throw-expressions@babel/plugin-syntax-dynamic-import@babel/plugin-syntax-import-meta@babel/plugin-transform-react-constant-elements@babel/plugin-transform-react-inline-elements@babel/plugin-transform-runtime@babel/preset-env@babel/preset-react@loadable/babel-plugin@loadable/component@loadable/server@loadable/webpack-plugin@types/ioredis@types/loadable__server@types/react@types/react-dom@types/react-redux@types/react-router-config@types/react-router-domcomponent-css-webpautoprefixerbabel-eslintbabel-loaderbabel-plugin-dynamic-import-webpackbabel-plugin-importbabel-plugin-transform-react-remove-prop-typesbabel-plugin-webpack-aliaschalkclean-webpack-plugincross-envcss-loaderdotenvdotenv-webpackfile-loaderfs-extrahtml-webpack-pluginioredislessless-loaderlog4jsmini-css-extract-pluginpostcss-loaderpostcss-pxtoremprogress-bar-webpack-pluginrimrafsass-resources-loaderstyle-loaderuglifyjs-webpack-pluginurl-loaderlg-svg-captchawebpackwebpack-bundle-analyzerwebpack-cliwebpack-dev-serverwebpack-isomorphic-tools
1.0.0

5 years ago