ssr-plugin-react 6.1.12 → 6.1.14-alpha.0

package/esm/index.js

@@ -1,28 +1,29 @@
-import * as WebpackChain from 'webpack-chain';
+import { loadConfig } from 'ssr-server-utils';
+const { isVite } = loadConfig();
 export function reactPlugin() {
     return {
         name: 'plugin-react',
         start: async () => {
-            // 本地开发的时候要做细致的依赖分离， Vite 场景不需要去加载 Webpack 构建客户端应用所需的模块
-            const { startServerBuild } = await import('ssr-webpack/cjs/server');
-            const { getServerWebpack } = await import('./config/server');
-            const serverConfigChain = new WebpackChain();
-            if (process.env.BUILD_TOOL === 'vite') {
-                await startServerBuild(getServerWebpack(serverConfigChain));
+            if (isVite) {
+                const { viteStart } = await import('./tools/vite');
+                await viteStart();
             }
             else {
-                const { startClientServer } = await import('ssr-webpack');
-                const { getClientWebpack } = await import('./config');
-                const clientConfigChain = new WebpackChain();
-                await Promise.all([startServerBuild(getServerWebpack(serverConfigChain)), startClientServer(getClientWebpack(clientConfigChain))]);
+                const { webpackStart } = await import('./tools/webpack');
+                await webpackStart();
             }
         },
         build: async () => {
-            const { startServerBuild, startClientBuild } = await import('ssr-webpack');
-            const { getClientWebpack, getServerWebpack } = await import('./config');
-            const serverConfigChain = new WebpackChain();
-            const clientConfigChain = new WebpackChain();
-            await Promise.all([startServerBuild(getServerWebpack(serverConfigChain)), startClientBuild(getClientWebpack(clientConfigChain))]);
+            if (isVite) {
+                const { viteBuild } = await import('./tools/vite');
+                await viteBuild();
+            }
+            else {
+                const { webpackBuild } = await import('./tools/webpack');
+                await webpackBuild();
+            }
         }
     };
 }
+export * from './tools/vite';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLGtCQUFrQixDQUFBO0FBRTdDLE1BQU0sRUFBRSxNQUFNLEVBQUUsR0FBRyxVQUFVLEVBQUUsQ0FBQTtBQUUvQixNQUFNLFVBQVUsV0FBVztJQUN6QixPQUFPO1FBQ0wsSUFBSSxFQUFFLGNBQWM7UUFDcEIsS0FBSyxFQUFFLEtBQUssSUFBSSxFQUFFO1lBQ2hCLElBQUksTUFBTSxFQUFFO2dCQUNWLE1BQU0sRUFBRSxTQUFTLEVBQUUsR0FBRyxNQUFNLE1BQU0sQ0FBQyxjQUFjLENBQUMsQ0FBQTtnQkFDbEQsTUFBTSxTQUFTLEVBQUUsQ0FBQTthQUNsQjtpQkFBTTtnQkFDTCxNQUFNLEVBQUUsWUFBWSxFQUFFLEdBQUcsTUFBTSxNQUFNLENBQUMsaUJBQWlCLENBQUMsQ0FBQTtnQkFDeEQsTUFBTSxZQUFZLEVBQUUsQ0FBQTthQUNyQjtRQUNILENBQUM7UUFDRCxLQUFLLEVBQUUsS0FBSyxJQUFJLEVBQUU7WUFDaEIsSUFBSSxNQUFNLEVBQUU7Z0JBQ1YsTUFBTSxFQUFFLFNBQVMsRUFBRSxHQUFHLE1BQU0sTUFBTSxDQUFDLGNBQWMsQ0FBQyxDQUFBO2dCQUNsRCxNQUFNLFNBQVMsRUFBRSxDQUFBO2FBQ2xCO2lCQUFNO2dCQUNMLE1BQU0sRUFBRSxZQUFZLEVBQUUsR0FBRyxNQUFNLE1BQU0sQ0FBQyxpQkFBaUIsQ0FBQyxDQUFBO2dCQUN4RCxNQUFNLFlBQVksRUFBRSxDQUFBO2FBQ3JCO1FBQ0gsQ0FBQztLQUNGLENBQUE7QUFDSCxDQUFDO0FBRUQsY0FBYyxjQUFjLENBQUEifQ==

package/esm/tools/vite.d.ts

@@ -0,0 +1,6 @@
+import type { UserConfig } from 'vite';
+declare const serverConfig: UserConfig;
+declare const clientConfig: UserConfig;
+declare const viteStart: () => Promise<void>;
+declare const viteBuild: () => Promise<void>;
+export { viteBuild, viteStart, serverConfig, clientConfig };

package/esm/tools/vite.js

@@ -0,0 +1,50 @@
+import { loadConfig, chunkNamePlugin, output, manifestPlugin, commonConfig } from 'ssr-server-utils';
+import react from '@vitejs/plugin-react';
+const build = require('vite').build;
+const { getOutput, reactServerEntry, reactClientEntry } = loadConfig();
+const { clientOutPut, serverOutPut } = getOutput();
+const serverConfig = {
+    ...commonConfig(),
+    plugins: [
+        react()
+    ],
+    build: {
+        ssr: reactServerEntry,
+        outDir: serverOutPut,
+        rollupOptions: {
+            output: {
+                entryFileNames: 'Page.server.js'
+            }
+        }
+    },
+    define: {
+        __isBrowser__: false
+    }
+};
+const clientConfig = {
+    ...commonConfig(),
+    plugins: [
+        react()
+    ],
+    build: {
+        ssrManifest: true,
+        outDir: clientOutPut,
+        rollupOptions: {
+            input: reactClientEntry,
+            output: output,
+            plugins: [chunkNamePlugin(), manifestPlugin()]
+        }
+    },
+    define: {
+        __isBrowser__: true
+    }
+};
+const viteStart = async () => {
+    //
+};
+const viteBuild = async () => {
+    await build({ ...clientConfig, mode: 'production' });
+    await build({ ...serverConfig, mode: 'production' });
+};
+export { viteBuild, viteStart, serverConfig, clientConfig };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidml0ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy90b29scy92aXRlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNBLE9BQU8sRUFBRSxVQUFVLEVBQUUsZUFBZSxFQUFFLE1BQU0sRUFBRSxjQUFjLEVBQUUsWUFBWSxFQUFFLE1BQU0sa0JBQWtCLENBQUE7QUFDcEcsT0FBTyxLQUFLLE1BQU0sc0JBQXNCLENBQUE7QUFDeEMsTUFBTSxLQUFLLEdBQXFCLE9BQU8sQ0FBQyxNQUFNLENBQUMsQ0FBQyxLQUFLLENBQUE7QUFDckQsTUFBTSxFQUFFLFNBQVMsRUFBRSxnQkFBZ0IsRUFBRSxnQkFBZ0IsRUFBRSxHQUFHLFVBQVUsRUFBRSxDQUFBO0FBQ3RFLE1BQU0sRUFBRSxZQUFZLEVBQUUsWUFBWSxFQUFFLEdBQUcsU0FBUyxFQUFFLENBQUE7QUFFbEQsTUFBTSxZQUFZLEdBQWU7SUFDL0IsR0FBRyxZQUFZLEVBQUU7SUFDakIsT0FBTyxFQUFFO1FBQ1AsS0FBSyxFQUFFO0tBQ1I7SUFDRCxLQUFLLEVBQUU7UUFDTCxHQUFHLEVBQUUsZ0JBQWdCO1FBQ3JCLE1BQU0sRUFBRSxZQUFZO1FBQ3BCLGFBQWEsRUFBRTtZQUNiLE1BQU0sRUFBRTtnQkFDTixjQUFjLEVBQUUsZ0JBQWdCO2FBQ2pDO1NBQ0Y7S0FDRjtJQUNELE1BQU0sRUFBRTtRQUNOLGFBQWEsRUFBRSxLQUFLO0tBQ3JCO0NBQ0YsQ0FBQTtBQUVELE1BQU0sWUFBWSxHQUFlO0lBQy9CLEdBQUcsWUFBWSxFQUFFO0lBQ2pCLE9BQU8sRUFBRTtRQUNQLEtBQUssRUFBRTtLQUNSO0lBQ0QsS0FBSyxFQUFFO1FBQ0wsV0FBVyxFQUFFLElBQUk7UUFDakIsTUFBTSxFQUFFLFlBQVk7UUFDcEIsYUFBYSxFQUFFO1lBQ2IsS0FBSyxFQUFFLGdCQUFnQjtZQUN2QixNQUFNLEVBQUUsTUFBTTtZQUNkLE9BQU8sRUFBRSxDQUFDLGVBQWUsRUFBRSxFQUFFLGNBQWMsRUFBRSxDQUFDO1NBQy9DO0tBQ0Y7SUFDRCxNQUFNLEVBQUU7UUFDTixhQUFhLEVBQUUsSUFBSTtLQUNwQjtDQUNGLENBQUE7QUFDRCxNQUFNLFNBQVMsR0FBRyxLQUFLLElBQUksRUFBRTtJQUMzQixFQUFFO0FBQ0osQ0FBQyxDQUFBO0FBQ0QsTUFBTSxTQUFTLEdBQUcsS0FBSyxJQUFJLEVBQUU7SUFDM0IsTUFBTSxLQUFLLENBQUMsRUFBRSxHQUFHLFlBQVksRUFBRSxJQUFJLEVBQUUsWUFBWSxFQUFFLENBQUMsQ0FBQTtJQUNwRCxNQUFNLEtBQUssQ0FBQyxFQUFFLEdBQUcsWUFBWSxFQUFFLElBQUksRUFBRSxZQUFZLEVBQUUsQ0FBQyxDQUFBO0FBQ3RELENBQUMsQ0FBQTtBQUVELE9BQU8sRUFDTCxTQUFTLEVBQ1QsU0FBUyxFQUNULFlBQVksRUFDWixZQUFZLEVBQ2IsQ0FBQSJ9

package/esm/tools/webpack.d.ts

@@ -0,0 +1,2 @@
+export declare const webpackStart: () => Promise<void>;
+export declare const webpackBuild: () => Promise<void>;

package/esm/tools/webpack.js

@@ -0,0 +1,18 @@
+import * as WebpackChain from 'webpack-chain';
+export const webpackStart = async () => {
+    const { startServerBuild } = await import('ssr-webpack/cjs/server');
+    const { getServerWebpack } = await import('../config/server');
+    const serverConfigChain = new WebpackChain();
+    const { startClientServer } = await import('ssr-webpack');
+    const { getClientWebpack } = await import('../config');
+    const clientConfigChain = new WebpackChain();
+    await Promise.all([startServerBuild(getServerWebpack(serverConfigChain)), startClientServer(getClientWebpack(clientConfigChain))]);
+};
+export const webpackBuild = async () => {
+    const { startServerBuild, startClientBuild } = await import('ssr-webpack');
+    const { getClientWebpack, getServerWebpack } = await import('../config');
+    const serverConfigChain = new WebpackChain();
+    const clientConfigChain = new WebpackChain();
+    await Promise.all([startServerBuild(getServerWebpack(serverConfigChain)), startClientBuild(getClientWebpack(clientConfigChain))]);
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid2VicGFjay5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy90b29scy93ZWJwYWNrLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxZQUFZLE1BQU0sZUFBZSxDQUFBO0FBRTdDLE1BQU0sQ0FBQyxNQUFNLFlBQVksR0FBRyxLQUFLLElBQUksRUFBRTtJQUNyQyxNQUFNLEVBQUUsZ0JBQWdCLEVBQUUsR0FBRyxNQUFNLE1BQU0sQ0FBQyx3QkFBd0IsQ0FBQyxDQUFBO0lBQ25FLE1BQU0sRUFBRSxnQkFBZ0IsRUFBRSxHQUFHLE1BQU0sTUFBTSxDQUFDLGtCQUFrQixDQUFDLENBQUE7SUFDN0QsTUFBTSxpQkFBaUIsR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFBO0lBRTVDLE1BQU0sRUFBRSxpQkFBaUIsRUFBRSxHQUFHLE1BQU0sTUFBTSxDQUFDLGFBQWEsQ0FBQyxDQUFBO0lBQ3pELE1BQU0sRUFBRSxnQkFBZ0IsRUFBRSxHQUFHLE1BQU0sTUFBTSxDQUFDLFdBQVcsQ0FBQyxDQUFBO0lBQ3RELE1BQU0saUJBQWlCLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQTtJQUM1QyxNQUFNLE9BQU8sQ0FBQyxHQUFHLENBQUMsQ0FBQyxnQkFBZ0IsQ0FBQyxnQkFBZ0IsQ0FBQyxpQkFBaUIsQ0FBQyxDQUFDLEVBQUUsaUJBQWlCLENBQUMsZ0JBQWdCLENBQUMsaUJBQWlCLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQTtBQUNwSSxDQUFDLENBQUE7QUFFRCxNQUFNLENBQUMsTUFBTSxZQUFZLEdBQUcsS0FBSyxJQUFJLEVBQUU7SUFDckMsTUFBTSxFQUFFLGdCQUFnQixFQUFFLGdCQUFnQixFQUFFLEdBQUcsTUFBTSxNQUFNLENBQUMsYUFBYSxDQUFDLENBQUE7SUFDMUUsTUFBTSxFQUFFLGdCQUFnQixFQUFFLGdCQUFnQixFQUFFLEdBQUcsTUFBTSxNQUFNLENBQUMsV0FBVyxDQUFDLENBQUE7SUFDeEUsTUFBTSxpQkFBaUIsR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFBO0lBQzVDLE1BQU0saUJBQWlCLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQTtJQUM1QyxNQUFNLE9BQU8sQ0FBQyxHQUFHLENBQUMsQ0FBQyxnQkFBZ0IsQ0FBQyxnQkFBZ0IsQ0FBQyxpQkFBaUIsQ0FBQyxDQUFDLEVBQUUsZ0JBQWdCLENBQUMsZ0JBQWdCLENBQUMsaUJBQWlCLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQTtBQUNuSSxDQUFDLENBQUEifQ==

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ssr-plugin-react",
-  "version": "6.1.12",
+  "version": "6.1.14-alpha.0",
   "description": "plugin-react for ssr",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
@@ -32,6 +32,7 @@
     "@babel/core": "^7.0.0",
     "@babel/plugin-transform-runtime": "^7.9.6",
     "@babel/preset-env": "^7.5.5",
+    "@vitejs/plugin-react": "^1.0.0",
     "babel-loader": "8.0.4",
     "babel-plugin-import": "^1.13.0",
     "babel-preset-react-app": "^9.0.2",
@@ -53,12 +54,13 @@
     "postcss-safe-parser": "4.0.1",
     "react-dev-utils": "^11.0.4",
     "serialize-javascript": "^3.0.0",
-    "ssr-client-utils": "^5.6.42",
-    "ssr-hoc-react": "^6.0.9",
-    "ssr-server-utils": "^5.7.13",
-    "ssr-webpack": "^5.7.12",
+    "ssr-client-utils": "^6.1.14-alpha.0",
+    "ssr-hoc-react": "^6.1.14-alpha.0",
+    "ssr-server-utils": "^6.1.14-alpha.0",
+    "ssr-webpack": "^6.1.14-alpha.0",
     "terser-webpack-plugin": "^2.3.5",
     "url-loader": "^4.1.1",
+    "vite": "^2.7.0-beta.10",
     "webpack-bundle-analyzer": "^3.6.1",
     "webpack-chain": "^6.4.0",
     "webpack-manifest-plugin": "^2.2.0",
@@ -68,9 +70,8 @@
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/react-router-dom": "^5.1.3",
-    "@types/serialize-javascript": "^1.5.0",
     "@types/webpack": "^4.41.10",
-    "ssr-types-react": "^6.0.8"
+    "ssr-types-react": "^6.1.14-alpha.0"
   },
-  "gitHead": "0872b132285161bb838ef8597e3f91201d4b0ce5"
+  "gitHead": "aa2661c45ebd669fc11b84d90e2e8416e9373854"
 }

package/src/config/server.ts

@@ -22,7 +22,6 @@ const getServerWebpack = (chain: WebpackChain) => {
 
   const modulesDir = [join(cwd, './node_modules')]
   modulesDir.push(getLocalNodeModules())
-
   chain.externals(nodeExternals({
     whitelist: [/\.(css|less|sass|scss)$/, /antd.*?(style)/].concat(whiteList || []),
     // externals Dir contains example/xxx/node_modules ssr/node_modules

package/src/entry/create-context.ts

@@ -1,17 +1,17 @@
 // @ts-nocheck
 // The file is provisional，don't depend on it
 
-import { createContext } from 'react'
+import React from 'react'
 import { IContext } from 'ssr-types-react'
 
 let STORE_CONTEXT
 if (__isBrowser__) {
-  STORE_CONTEXT = window.STORE_CONTEXT ?? createContext<IContext>({
+  STORE_CONTEXT = window.STORE_CONTEXT ?? React.createContext<IContext>({
     state: {}
   })
   window.STORE_CONTEXT = STORE_CONTEXT
 } else {
-  STORE_CONTEXT = createContext<IContext>({
+  STORE_CONTEXT = React.createContext<IContext>({
     state: {}
   })
 }

package/src/entry/server-entry.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react'
 import { StaticRouter } from 'react-router-dom'
 import { findRoute, getManifest, logGreen, normalizePath, addAsyncChunk } from 'ssr-server-utils'
-import { ISSRContext, IGlobal, IConfig, ReactRoutesType, ReactESMFeRouteItem } from 'ssr-types-react'
-import * as serialize from 'serialize-javascript'
+import { ISSRContext, IConfig, ReactRoutesType, ReactESMFeRouteItem } from 'ssr-types-react'
+//@ts-expect-error
+import * as serializeWrap from 'serialize-javascript'
 // @ts-expect-error
 import * as Routes from '_build/ssr-temporary-routes'
 // @ts-expect-error
@@ -11,19 +12,16 @@ import { STORE_CONTEXT as Context } from '_build/create-context'
 import Layout from '@/components/layout/index.tsx'
 
 const { FeRoutes, layoutFetch, PrefixRouterBase, state } = Routes as ReactRoutesType
-
-declare const global: IGlobal
+const serialize = serializeWrap.default || serializeWrap
 
 const serverRender = async (ctx: ISSRContext, config: IConfig): Promise<React.ReactElement> => {
-  const { cssOrder, jsOrder, dynamic, mode, chunkName, parallelFetch, disableClientRender, prefix } = config
-  global.window = global.window ?? {} // 防止覆盖上层应用自己定义的 window 对象
+  const { cssOrder, jsOrder, dynamic, mode, parallelFetch, disableClientRender, prefix, isVite, isDev } = config
   let path = ctx.request.path // 这里取 pathname 不能够包含 queryString
   const base = prefix ?? PrefixRouterBase // 以开发者实际传入的为最高优先级
   if (base) {
     path = normalizePath(path, base)
   }
   const routeItem = findRoute<ReactESMFeRouteItem>(FeRoutes, path)
-  const viteMode = process.env.BUILD_TOOL === 'vite'
 
   if (!routeItem) {
     throw new Error(`
@@ -34,15 +32,17 @@ const serverRender = async (ctx: ISSRContext, config: IConfig): Promise<React.Re
 
   let dynamicCssOrder = cssOrder
 
-  if (dynamic && !viteMode) {
+  if (dynamic) {
     dynamicCssOrder = cssOrder.concat([`${routeItem.webpackChunkName}.css`])
-    dynamicCssOrder = await addAsyncChunk(dynamicCssOrder, routeItem.webpackChunkName)
+    if (!isVite) {
+      dynamicCssOrder = await addAsyncChunk(dynamicCssOrder, routeItem.webpackChunkName)
+    }
   }
-  const manifest = viteMode ? {} : await getManifest()
+  const manifest = await getManifest(config)
 
   const injectCss: JSX.Element[] = []
 
-  if (viteMode) {
+  if (isVite && isDev) {
     injectCss.push(<script src="/@vite/client" type="module" key="vite-client"/>)
     injectCss.push(<script key="vite-react-refresh" type="module" dangerouslySetInnerHTML={{
       __html: ` import RefreshRuntime from "/@react-refresh"
@@ -51,7 +51,6 @@ const serverRender = async (ctx: ISSRContext, config: IConfig): Promise<React.Re
       window.$RefreshSig$ = () => (type) => type
       window.__vite_plugin_react_preamble_installed__ = true`
     }} />)
-    injectCss.push(<link rel='stylesheet' href={`/server/static/css/${chunkName}.css`} key="vite-head-css"/>)
   } else {
     dynamicCssOrder.forEach(css => {
       if (manifest[css]) {
@@ -67,14 +66,13 @@ const serverRender = async (ctx: ISSRContext, config: IConfig): Promise<React.Re
     }}/>)
   }
 
-  const injectScript = viteMode ? [
-    <script key="viteWindowInit" dangerouslySetInnerHTML={{
+  const injectScript = [
+    isVite && <script key="viteWindowInit" dangerouslySetInnerHTML={{
       __html: 'window.__USE_VITE__=true'
     }} />,
-    <script type="module" src='/node_modules/ssr-plugin-react/esm/entry/client-entry.js' key="vite-react-entry" />
+    (isVite && isDev) && <script type="module" src='/node_modules/ssr-plugin-react/esm/entry/client-entry.js' key="vite-react-entry" />,
+    ...jsOrder.map(js => manifest[js]).map(item => item && <script key={item} src={item} type={isVite ? 'module' : ''}/>)
   ]
-    : jsOrder.map(js => manifest[js]).map(item => <script key={item} src={item} />)
-
   const staticList = {
     injectCss,
     injectScript

package/src/index.ts

@@ -1,28 +1,29 @@
-import * as WebpackChain from 'webpack-chain'
+import { loadConfig } from 'ssr-server-utils'
+
+const { isVite } = loadConfig()
 
 export function reactPlugin () {
   return {
     name: 'plugin-react',
     start: async () => {
-      // 本地开发的时候要做细致的依赖分离， Vite 场景不需要去加载 Webpack 构建客户端应用所需的模块
-      const { startServerBuild } = await import('ssr-webpack/cjs/server')
-      const { getServerWebpack } = await import('./config/server')
-      const serverConfigChain = new WebpackChain()
-      if (process.env.BUILD_TOOL === 'vite') {
-        await startServerBuild(getServerWebpack(serverConfigChain))
+      if (isVite) {
+        const { viteStart } = await import('./tools/vite')
+        await viteStart()
       } else {
-        const { startClientServer } = await import('ssr-webpack')
-        const { getClientWebpack } = await import('./config')
-        const clientConfigChain = new WebpackChain()
-        await Promise.all([startServerBuild(getServerWebpack(serverConfigChain)), startClientServer(getClientWebpack(clientConfigChain))])
+        const { webpackStart } = await import('./tools/webpack')
+        await webpackStart()
       }
     },
     build: async () => {
-      const { startServerBuild, startClientBuild } = await import('ssr-webpack')
-      const { getClientWebpack, getServerWebpack } = await import('./config')
-      const serverConfigChain = new WebpackChain()
-      const clientConfigChain = new WebpackChain()
-      await Promise.all([startServerBuild(getServerWebpack(serverConfigChain)), startClientBuild(getClientWebpack(clientConfigChain))])
+      if (isVite) {
+        const { viteBuild } = await import('./tools/vite')
+        await viteBuild()
+      } else {
+        const { webpackBuild } = await import('./tools/webpack')
+        await webpackBuild()
+      }
     }
   }
 }
+
+export * from './tools/vite'

package/src/tools/vite.ts

@@ -0,0 +1,58 @@
+import type { build as BuildType, UserConfig } from 'vite'
+import { loadConfig, chunkNamePlugin, output, manifestPlugin, commonConfig } from 'ssr-server-utils'
+import react from '@vitejs/plugin-react'
+const build: typeof BuildType = require('vite').build
+const { getOutput, reactServerEntry, reactClientEntry } = loadConfig()
+const { clientOutPut, serverOutPut } = getOutput()
+
+const serverConfig: UserConfig = {
+  ...commonConfig(),
+  plugins: [
+    react()
+  ],
+  build: {
+    ssr: reactServerEntry,
+    outDir: serverOutPut,
+    rollupOptions: {
+      output: {
+        entryFileNames: 'Page.server.js'
+      }
+    }
+  },
+  define: {
+    __isBrowser__: false
+  }
+}
+
+const clientConfig: UserConfig = {
+  ...commonConfig(),
+  plugins: [
+    react()
+  ],
+  build: {
+    ssrManifest: true,
+    outDir: clientOutPut,
+    rollupOptions: {
+      input: reactClientEntry,
+      output: output,
+      plugins: [chunkNamePlugin(), manifestPlugin()]
+    }
+  },
+  define: {
+    __isBrowser__: true
+  }
+}
+const viteStart = async () => {
+  //
+}
+const viteBuild = async () => {
+  await build({ ...clientConfig, mode: 'production' })
+  await build({ ...serverConfig, mode: 'production' })
+}
+
+export {
+  viteBuild,
+  viteStart,
+  serverConfig,
+  clientConfig
+}

package/src/tools/webpack.ts

@@ -0,0 +1,20 @@
+import * as WebpackChain from 'webpack-chain'
+
+export const webpackStart = async () => {
+  const { startServerBuild } = await import('ssr-webpack/cjs/server')
+  const { getServerWebpack } = await import('../config/server')
+  const serverConfigChain = new WebpackChain()
+
+  const { startClientServer } = await import('ssr-webpack')
+  const { getClientWebpack } = await import('../config')
+  const clientConfigChain = new WebpackChain()
+  await Promise.all([startServerBuild(getServerWebpack(serverConfigChain)), startClientServer(getClientWebpack(clientConfigChain))])
+}
+
+export const webpackBuild = async () => {
+  const { startServerBuild, startClientBuild } = await import('ssr-webpack')
+  const { getClientWebpack, getServerWebpack } = await import('../config')
+  const serverConfigChain = new WebpackChain()
+  const clientConfigChain = new WebpackChain()
+  await Promise.all([startServerBuild(getServerWebpack(serverConfigChain)), startClientBuild(getClientWebpack(clientConfigChain))])
+}