feat: 修改renderLayout 实现方式

zhangyuang · zhangyuang · commit 708591926d3f · 2019-10-12T17:47:59.000+08:00
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -20,7 +20,6 @@ jobs:
             - v1-ssr-{{ .Branch }}-{{ checksum "package.json" }}
             - v1-ssr-{{ .Branch }}-
             - v1-ssr-
-      # install chromedriver module
       - run:
           command: |
             npm install --registry=https://registry.npm.taobao.org/
@@ -64,6 +63,7 @@ jobs:
           at: ~/project
       - run:
           command: |
+            # install chromedriver module
             sudo apt-get install libnss3-dev
             wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
             echo 'deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main' | sudo tee /etc/apt/sources.list.d/google-chrome.list
diff --git a/.gitignore b/.gitignore
@@ -78,3 +78,5 @@ tests_output
 bin
 
 package-lock.json
+
+dist
diff --git a/example/ssr-with-antd/app/controller/page.js b/example/ssr-with-antd/app/controller/page.js
@@ -1,6 +1,6 @@
 
 const Controller = require('egg').Controller
-const { renderToStream } = require('ykfe-utils')
+const renderToStream = require('ykfe-utils/lib/renderToStream')
 const ssrConfig = require('../../config/config.ssr')
 
 class PageController extends Controller {
diff --git a/example/ssr-with-dva/app/controller/page.js b/example/ssr-with-dva/app/controller/page.js
@@ -1,6 +1,6 @@
 
 const Controller = require('egg').Controller
-const { renderToStream } = require('ykfe-utils')
+const renderToStream = require('ykfe-utils/lib/renderToStream')
 const ssrConfig = require('../../config/config.ssr')
 
 class PageController extends Controller {
diff --git a/example/ssr-with-js/app/controller/page.js b/example/ssr-with-js/app/controller/page.js
@@ -1,6 +1,6 @@
 
 const Controller = require('egg').Controller
-const { renderToStream } = require('ykfe-utils')
+const renderToStream = require('ykfe-utils/lib/renderToStream')
 const ssrConfig = require('../../config/config.ssr')
 
 class PageController extends Controller {
diff --git a/example/ssr-with-js/package.json b/example/ssr-with-js/package.json
@@ -10,7 +10,7 @@
     "react-dev-utils": "^8.0.0",
     "react-dom": "16.8.3",
     "react-router-dom": "^5.0.0",
-    "yk-cli": "^2.4.0",
+    "yk-cli": "^2.6.1",
     "ykfe-utils": "^2.0.2"
   },
   "scripts": {
diff --git a/example/ssr-with-loadable/app/controller/page.js b/example/ssr-with-loadable/app/controller/page.js
@@ -1,6 +1,6 @@
 
 const Controller = require('egg').Controller
-const { renderToStream } = require('ykfe-utils')
+const renderToStream = require('ykfe-utils/lib/renderToStream')
 const ssrConfig = require('../../config/config.ssr')
 
 class PageController extends Controller {
diff --git a/example/ssr-with-mobx/app/controller/page.js b/example/ssr-with-mobx/app/controller/page.js
@@ -1,6 +1,6 @@
 
 const Controller = require('egg').Controller
-const { renderToStream } = require('ykfe-utils')
+const renderToStream = require('ykfe-utils/lib/renderToStream')
 const ssrConfig = require('../../config/config.ssr')
 
 class PageController extends Controller {
diff --git a/package.json b/package.json
@@ -13,7 +13,7 @@
     "test": "node ./test/scripts/preInstall.js && npm run test:unit && npm run test:coverage && npm run test:e2e",
     "test:coverage": "codecov",
     "test:unit": "NODE_ENV=test jest --coverage",
-    "test:e2e": "NODE_ENV=development node ./test/e2e/startServer.js",
+    "test:e2e": "NODE_ENV=production node ./test/e2e/startServer.js",
     "docs:dev": "vuepress dev docs",
     "docs:build": "vuepress build docs && npm run publish",
     "publish": "surge ./docs/.vuepress/dist ykfe.surge.sh --domain ykfe.net"
@@ -30,7 +30,9 @@
   "pre-commit": [
     "lint"
   ],
-  "publishConfig": { "registry": "https://npm.pkg.github.com/" },
+  "publishConfig": {
+    "registry": "https://npm.pkg.github.com/"
+  },
   "engines": {
     "node": ">=8"
   },
@@ -75,5 +77,6 @@
     "tslint-config-standard": "^8.0.1",
     "typescript": "^3.5.3",
     "vuepress": "^0.14.8"
-  }
+  },
+  "dependencies": {}
 }
diff --git a/packages/yk-cli/package.json b/packages/yk-cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "yk-cli",
-  "version": "2.5.4",
+  "version": "2.6.1",
   "description": "ykcli for ssr",
   "main": "./bin/index.js",
   "types": "types/index.d.ts",
@@ -17,37 +17,27 @@
     "url": "git+https://github.com/ykfe/yk-cli.git"
   },
   "dependencies": {
-    "@babel/core": "^7.5.5",
-    "@babel/plugin-transform-runtime": "^7.5.5",
-    "@babel/preset-env": "^7.5.5",
-    "@babel/preset-react": "^7.0.0",
-    "@babel/register": "^7.5.5",
-    "@babel/runtime": "^7.5.5",
-    "babel-plugin-module-resolver": "^3.2.0",
-    "babel-plugin-transform-define": "^1.3.1",
     "download-git-repo": "^2.0.0",
     "inquirer": "6.3.1",
-    "module": "^1.2.5",
     "nunjucks": "^3.2.0",
     "ora": "^3.4.0",
     "react": "^16.8.3",
     "react-dom": "^16.8.3",
     "shelljs": "^0.8.3",
     "webpack": "^4.39.1",
     "webpack-dev-server": "^3.7.2",
+    "webpack-node-externals": "^1.7.2",
     "yargs": "^13.2.4"
   },
   "devDependencies": {
+    "@types/webpack": "^4.39.3",
     "@types/inquirer": "^6.0.3",
     "@types/node": "^12.7.2",
     "@types/nunjucks": "^3.1.1",
     "@types/react": "^16.8.23",
     "@types/react-dom": "^16.8.4",
     "@types/shelljs": "^0.8.5",
     "@types/yargs": "^13.0.0",
-    "braces": ">=2.3.1",
-    "concat-stream": ">=1.5.2",
-    "lodash.template": ">=4.5.0",
     "typescript": "^3.5.2"
   },
   "keywords": [],
diff --git a/packages/yk-cli/src/clientRender.ts b/packages/yk-cli/src/clientRender.ts
@@ -1,24 +1,26 @@
 // 本文件目的是以React jsx 为模版替换掉html-webpack-plugin以及传统模版引擎, 统一ssr/csr都使用React组件来作为页面的骨架和内容部分
 import { mkdir } from 'shelljs'
+import webpack from 'webpack'
 import { Res } from './interface/ctx'
 import { Argv } from './interface/argv'
+import renderLayout from './renderLayout'
 
-const webpack = require('webpack')
 const WebpackDevServer = require('webpack-dev-server')
 const fs = require('fs')
 const promisify = require('util').promisify
 const ora = require('ora')('正在构建')
 const webpackWithPromise = promisify(webpack)
 const cwd = process.env.BASE_DIR || process.cwd()
-const str = require('./renderLayout')
 const clientConfig = require(cwd + '/build/webpack.config.client')
-process.on && process.on('message', data => {
+
+process.on && process.on('message', async data => {
   if (data.msg === 'start dev') {
-    dev()
+    await dev()
   }
 })
 
-const dev = (argv?: Argv) => {
+const dev = async (argv?: Argv) => {
+  const str: string = await renderLayout()
   const PORT = (argv && argv.PORT) || 8000
   const compiler = webpack(clientConfig)
   const server = new WebpackDevServer(compiler, {
@@ -55,6 +57,7 @@ const dev = (argv?: Argv) => {
 }
 
 const build = async () => {
+  const str: string = await renderLayout()
   ora.start()
   const stats = await webpackWithPromise(clientConfig)
   console.log(stats.toString({
diff --git a/packages/yk-cli/src/renderLayout.ts b/packages/yk-cli/src/renderLayout.ts
@@ -3,58 +3,63 @@
 
 import * as React from 'react';
 import { renderToString }from 'react-dom/server'
+import path from 'path'
+import { webpackWithPromise } from './util'
 
-const Module = require('module')
 const fs = require('fs')
+const nodeExternals = require('webpack-node-externals');
 const cwd = process.env.BASE_DIR || process.cwd()
-const baseConfig = require(cwd + '/build/webpack.config.base')
-let config 
+const serverConfig = require(cwd + '/build/webpack.config.server')
+const isDev = process.env.NODE_ENV === 'development'
+let config: object
+
 try {
   fs.statSync(cwd + `/config/config.ssr.js`)
   config = require(cwd + `/config/config.ssr`)
 } catch (error) {
   config = require(cwd + `/config/config.default`)
 }
 
-// 使用babel来处理es6 jsx语法
-require('@babel/register')({
-  ignore: [
-    /node_modules/
-  ],
-  presets: [
-    require.resolve('@babel/preset-env'),
-    require.resolve('@babel/preset-react')
-  ],
-  plugins: [
-    require.resolve('@babel/plugin-transform-runtime'),
-    [require.resolve('babel-plugin-module-resolver'), {
-      root: ['./'],
-      alias: baseConfig.resolve.alias
-    }],
-    [require.resolve('babel-plugin-transform-define'), {
-      '__isBrowser__': false //eslint-disable-line
-    }]
-  ]
-})
-
-Module._extensions['.less'] = () => {}
-Module._extensions['.sass'] = () => {}
-Module._extensions['.css'] = () => {}
+serverConfig.entry = {
+  Layout: cwd + '/web/layout'
+}
 
-const Layout = require(cwd + '/web/layout').default
+serverConfig.output.path = path.resolve(__dirname, '../dist')
+serverConfig.externals = nodeExternals({
+  whitelist: /\.(css|less|sass|scss)$/,
+  modulesDir: path.resolve(__dirname, '../../') // 保证寻找第三方模块的node_modules是当前应用的node_modules
+})
 
 const reactToString = (Component: React.ComponentClass, props: object) => {
   return renderToString(React.createElement(Component, props))
 }
 
-const props = {
-  layoutData: {
-    app: {
-      config: config
+const renderLayout = async () => {
+  let Layout
+
+  if (isDev) {
+    delete require.cache[path.resolve(__dirname, '../dist/Layout.server.js')]
+  }
+
+  try {
+    Layout = require('../dist/Layout.server').default
+  } catch (error) {
+    await webpackWithPromise(serverConfig)
+    Layout = require('../dist/Layout.server').default
+  }
+
+  const props = {
+    layoutData: {
+      app: {
+        config: config
+      }
     }
   }
+
+  const str = reactToString(Layout, props)
+  return str
 }
 
-const string = reactToString(Layout, props)
+export default renderLayout
+
 
-module.exports = string
diff --git a/packages/yk-cli/src/util/index.ts b/packages/yk-cli/src/util/index.ts
@@ -5,11 +5,14 @@ import path from 'path'
 import { Optional } from '../interface/option'
 import fs from 'fs'
 import nunjucks from 'nunjucks'
+import webpack from 'webpack'
 
 const download = require('download-git-repo')
 const tsUrl = 'https://raw.githubusercontent.com/zhusjfaker/egg-react-ssr/backup/example/ssr-with-ts/package.json'
 const jsUrl = 'https://raw.githubusercontent.com/ykfe/egg-react-ssr/master/example/ssr-with-js/package.json'
 
+export const webpackWithPromise = promisify(webpack)
+
 export const processError = (err: string) => {
   if (err) {
     console.log('err', err)
diff --git a/packages/yk-cli/tpl/package.json.nj b/packages/yk-cli/tpl/package.json.nj
@@ -22,7 +22,7 @@
     "prod": "npm run build && eggctl start",
     "build:server": "cross-env NODE_ENV=production webpack --config build/webpack.config.server.js",
     "build:client": "cross-env NODE_ENV=production ykcli build",
-    "build": "rimraf dist && ykcli build && npm run build:server",
+    "build": "rimraf dist && npm run build:client && npm run build:server",
     "analyze": "cross-env NODE_ENV=production npm_config_report=true npm run build"
   },
   "browserslist": [
diff --git a/packages/yk-cli/types/renderLayout.d.ts b/packages/yk-cli/types/renderLayout.d.ts
@@ -1 +1,2 @@
-export {};
+declare const renderLayout: () => Promise<string>;
+export default renderLayout;
diff --git a/packages/yk-cli/types/util/index.d.ts b/packages/yk-cli/types/util/index.d.ts
@@ -1,6 +1,8 @@
 /// <reference types="node" />
 import { exec } from 'child_process';
 import { Optional } from '../interface/option';
+import webpack from 'webpack';
+export declare const webpackWithPromise: (arg1: webpack.Configuration[]) => Promise<unknown>;
 export declare const processError: (err: string) => void;
 export declare const execWithPromise: typeof exec.__promisify__;
 export declare const downloadWithPromise: Function;
diff --git a/packages/ykfe-utils/babel.config.js b/packages/ykfe-utils/babel.config.js
@@ -17,7 +17,8 @@ module.exports = function (api) {
   ]
   const plugins = [
     ['@babel/plugin-proposal-class-properties', { loose: true }],
-    '@babel/plugin-transform-runtime'
+    '@babel/plugin-transform-runtime',
+    'add-module-exports'
   ]
 
   return {
diff --git a/packages/ykfe-utils/package.json b/packages/ykfe-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ykfe-utils",
-  "version": "2.1.16",
+  "version": "2.3.0",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -20,6 +20,7 @@
     "@babel/preset-env": "^7.5.5",
     "@babel/preset-react": "^7.0.0",
     "@babel/runtime": "^7.5.5",
+    "babel-plugin-add-module-exports": "^1.0.2",
     "concurrently": "^4.1.1"
   },
   "dependencies": {
diff --git a/packages/ykfe-utils/src/index.js b/packages/ykfe-utils/src/index.js
@@ -1,14 +1,12 @@
 import GetinitialProps from './components/getinitialProps'
 import OnlyCsr from './components/onlyCsr'
 import getComponent from './getComponent'
-import renderToStream from './renderToStream'
 import Loadable from './loadable'
 
 export {
   GetinitialProps,
   GetinitialProps as getWrappedComponent,
   OnlyCsr,
   Loadable,
-  getComponent,
-  renderToStream
+  getComponent
 }
diff --git a/packages/ykfe-utils/src/renderToStream.js b/packages/ykfe-utils/src/renderToStream.js
@@ -5,13 +5,16 @@ const renderToStream = async (ctx, config) => {
   const isLocal = config.env === 'local'
   const serverJs = config.serverJs
   const runtime = config.runtime
+
   if (config.type !== 'ssr') {
-    const string = require('yk-cli/bin/renderLayout')
-    return string
+    const renderLayout = require('yk-cli/bin/renderLayout').default
+    const str = await renderLayout()
+    return str
   }
+
   if (!global.renderToNodeStream) {
-    if (runtime === 'fc') {
-      // 针对fc runtime 将第三方模块打包进来不需要特殊处理
+    if (runtime === 'serverless') {
+      // 针对serverless runtime 将第三方模块打包进来不需要特殊处理
       global.renderToNodeStream = require('react-dom/server').renderToNodeStream
     } else {
       // for this issue https://github.com/ykfe/egg-react-ssr/issues/4
@@ -25,7 +28,7 @@ const renderToStream = async (ctx, config) => {
   }
 
   if (!global.serverStream || isLocal) {
-    if (runtime === 'fc') {
+    if (runtime === 'serverless') {
       global.serverStream = typeof serverJs === 'string' ? require('../../../web/' + serverJs).default : serverJs
     } else {
       global.serverStream = typeof serverJs === 'string' ? require(serverJs).default : serverJs
diff --git a/test/e2e/startServer.js b/test/e2e/startServer.js
diff --git a/test/scripts/preInstall.js b/test/scripts/preInstall.js

-Original file line number
+Diff line change
 bin
 package-lock.json
++
 +dist