feat: support config.define

zhangyuang · Jan 5, 2022 · c04f128 · c04f128
1 parent 281da0c
commit c04f128
Show file tree

Hide file tree

Showing 9 changed files with 57 additions and 23 deletions.
diff --git a/docs/web/markdown/api/config.md b/docs/web/markdown/api/config.md
@@ -87,6 +87,18 @@ const stream = await render<Readable>(this.ctx, userConfig)
 
 静态资源构建时默认的 `entry` 名, 默认为 `Page`。无特殊需求不需要修改 -->
 
+## define
+
+- 类型: `{define?: {
+    base?: Record<string, string>
+    client?: Record<string, string>
+    server?: Record<string, string>
+  }}`
+- 默认: `{}`
+- 生效场景: `Webpack/Vite` 
+
+添加通用 `definePlugin` 配置，在双端皆可生效。兼容 `Webpack/Vite` 场景
+
 ## extraJsOrder
 
 - 类型: `string[]`
@@ -378,7 +390,7 @@ css: () => {
 
 - 默认: `{ enable: false }`
 
-- 生效场景: `Webpack` 
+- 生效场景: `Vue3 + Webpack` 
 
 是否启用 `vue-i18n` 国际化插件
 
@@ -539,13 +551,11 @@ export type viteConfig? = () => {
   client?: {
     // 只在客户端生效的配置
     defaultPluginOptions?: any // 默认使用的 vite 前端框架插件的配置，vue3 场景为 @vitejs/plugin-vue， react场景为 @vitejs/plugin-react 查看对应文档获取类型 https://vitejs.dev/plugins/
-    define?: Record<string, any>
     extraPlugin?: any[] // 需要使用的额外插件
   }
   server?: {
     // 只在服务端生效的配置
     defaultPluginOptions?: any
-    define?: Record<string, any>
     extraPlugin?: any[]
   }
 }

diff --git a/packages/plugin-react/src/config/base.ts b/packages/plugin-react/src/config/base.ts
@@ -45,7 +45,7 @@ const addBabelLoader = (chain: WebpackChain.Rule<WebpackChain.Module>, envOption
 }
 const getBaseConfig = (chain: WebpackChain, isServer: boolean) => {
   const config = loadConfig()
-  const { moduleFileExtensions, useHash, isDev, chainBaseConfig, corejsOptions, babelExtraModule, alias } = config
+  const { moduleFileExtensions, useHash, isDev, chainBaseConfig, corejsOptions, babelExtraModule, alias, define } = config
   const mode = process.env.NODE_ENV as Mode
   const envOptions = {
     modules: false,
@@ -132,7 +132,9 @@ const getBaseConfig = (chain: WebpackChain, isServer: boolean) => {
     color: isServer ? '#f173ac' : '#45b97c'
   }))
   chain.plugin('ssrDefine').use(webpack.DefinePlugin, [{
-    __isBrowser__: !isServer
+    __isBrowser__: !isServer,
+    ...(isServer ? define?.server : define?.client),
+    ...define?.base
   }])
   chainBaseConfig(chain)
   return config

diff --git a/packages/plugin-react/src/tools/vite.ts b/packages/plugin-react/src/tools/vite.ts
@@ -10,7 +10,7 @@ import styleImport, {
 } from 'vite-plugin-style-import'
 
 const build: typeof BuildType = require('vite').build
-const { getOutput, reactServerEntry, reactClientEntry, viteConfig, supportOptinalChaining, isDev } = loadConfig()
+const { getOutput, reactServerEntry, reactClientEntry, viteConfig, supportOptinalChaining, isDev, define } = loadConfig()
 
 const { clientOutPut, serverOutPut } = getOutput()
 const styleImportConfig = {
@@ -52,7 +52,9 @@ const serverConfig: UserConfig = {
   },
   define: {
     __isBrowser__: false,
-    ...viteConfig?.()?.server?.define
+    ...viteConfig?.()?.server?.define,
+    ...define?.server,
+    ...define?.base
   }
 }
 
@@ -81,7 +83,9 @@ const clientConfig: UserConfig = {
   },
   define: {
     __isBrowser__: true,
-    ...viteConfig?.()?.client?.define
+    ...viteConfig?.()?.client?.define,
+    ...define?.client,
+    ...define?.base
   }
 }
 const viteStart = async () => {

diff --git a/packages/plugin-vue/src/config/base.ts b/packages/plugin-vue/src/config/base.ts
@@ -58,7 +58,7 @@ const addBabelLoader = (chain: WebpackChain.Rule<WebpackChain.Module>, envOption
 
 const getBaseConfig = (chain: WebpackChain, isServer: boolean) => {
   const config = loadConfig()
-  const { moduleFileExtensions, useHash, isDev, chainBaseConfig, corejsOptions, ssrVueLoaderOptions, csrVueLoaderOptions, babelExtraModule, alias } = config
+  const { moduleFileExtensions, useHash, isDev, chainBaseConfig, corejsOptions, ssrVueLoaderOptions, csrVueLoaderOptions, babelExtraModule, alias, define } = config
 
   let vueLoaderOptions = {
     babelParserPlugins: ['jsx', 'classProperties', 'decorators-legacy']
@@ -171,7 +171,9 @@ const getBaseConfig = (chain: WebpackChain, isServer: boolean) => {
   }))
 
   chain.plugin('ssrDefine').use(webpack.DefinePlugin, [{
-    __isBrowser__: !isServer
+    __isBrowser__: !isServer,
+    ...(isServer ? define?.server : define?.client),
+    ...define?.base
   }])
 
   chainBaseConfig(chain)

diff --git a/packages/plugin-vue/src/tools/vite.ts b/packages/plugin-vue/src/tools/vite.ts
@@ -2,7 +2,7 @@ import type { build as BuildType, UserConfig } from 'vite'
 import { loadConfig, chunkNamePlugin, rollupOutputOptions, manifestPlugin, commonConfig } from 'ssr-server-utils'
 import { createVuePlugin } from 'vite-plugin-vue2'
 const build: typeof BuildType = require('vite').build
-const { getOutput, vueServerEntry, vueClientEntry } = loadConfig()
+const { getOutput, vueServerEntry, vueClientEntry, define } = loadConfig()
 const { clientOutPut, serverOutPut } = getOutput()
 
 const serverConfig: UserConfig = {
@@ -20,7 +20,9 @@ const serverConfig: UserConfig = {
     }
   },
   define: {
-    __isBrowser__: false
+    __isBrowser__: false,
+    ...define?.server,
+    ...define?.base
   }
 }
 
@@ -39,7 +41,9 @@ const clientConfig: UserConfig = {
     }
   },
   define: {
-    __isBrowser__: true
+    __isBrowser__: true,
+    ...define?.client,
+    ...define?.base
   }
 }
 const viteStart = async () => {

diff --git a/packages/plugin-vue3/src/config/base.ts b/packages/plugin-vue3/src/config/base.ts
@@ -61,7 +61,7 @@ const addBabelLoader = (chain: WebpackChain.Rule<WebpackChain.Module>, envOption
 
 const getBaseConfig = (chain: WebpackChain, isServer: boolean) => {
   const config = loadConfig()
-  const { moduleFileExtensions, useHash, isDev, chainBaseConfig, locale, corejsOptions, ssrVueLoaderOptions, csrVueLoaderOptions, babelExtraModule, alias } = config
+  const { moduleFileExtensions, useHash, isDev, chainBaseConfig, locale, corejsOptions, ssrVueLoaderOptions, csrVueLoaderOptions, babelExtraModule, alias, define } = config
 
   let vueLoaderOptions = {
     babelParserPlugins: ['jsx', 'classProperties', 'decorators-legacy']
@@ -204,7 +204,9 @@ const getBaseConfig = (chain: WebpackChain, isServer: boolean) => {
   chain.plugin('ssrDefine').use(webpack.DefinePlugin, [{
     __isBrowser__: !isServer,
     __VUE_OPTIONS_API__: true,
-    __VUE_PROD_DEVTOOLS__: false
+    __VUE_PROD_DEVTOOLS__: false,
+    ...(isServer ? define?.server : define?.client),
+    ...define?.base
   }])
 
   chainBaseConfig(chain)

diff --git a/packages/plugin-vue3/src/tools/vite.ts b/packages/plugin-vue3/src/tools/vite.ts
@@ -12,7 +12,7 @@ import styleImport, {
 } from 'vite-plugin-style-import'
 
 const build: typeof BuildType = require('vite').build
-const { getOutput, vue3ServerEntry, vue3ClientEntry, viteConfig, supportOptinalChaining, isDev } = loadConfig()
+const { getOutput, vue3ServerEntry, vue3ClientEntry, viteConfig, supportOptinalChaining, isDev, define } = loadConfig()
 const { clientOutPut, serverOutPut } = getOutput()
 const styleImportConfig = {
   include: ['**/*.vue', '**/*.ts', '**/*.js', '**/*.tsx', '**/*.jsx', /chunkName/],
@@ -54,7 +54,9 @@ const serverConfig: UserConfig = {
   },
   define: {
     __isBrowser__: false,
-    ...viteConfig?.()?.server?.define
+    ...viteConfig?.()?.server?.define,
+    ...define?.server,
+    ...define?.base
   }
 }
 
@@ -78,7 +80,9 @@ const clientConfig: UserConfig = {
   },
   define: {
     __isBrowser__: true,
-    ...viteConfig?.()?.client?.define
+    ...viteConfig?.()?.client?.define,
+    ...define?.client,
+    ...define?.base
   }
 }
 const viteStart = async () => {

diff --git a/packages/server-utils/src/loadConfig.ts b/packages/server-utils/src/loadConfig.ts
@@ -18,15 +18,15 @@ const loadConfig = (): IConfig => {
   const reactServerEntry = join(cwd, './node_modules/ssr-plugin-react/esm/entry/server-entry.js')
   const reactClientEntry = join(cwd, './node_modules/ssr-plugin-react/esm/entry/client-entry.js')
   const supportOptinalChaining = coerce(process.version).major >= '14'
-
+  const define = {}
   const alias = Object.assign({
     '@': getFeDir(),
     '~': getCwd(),
     _build: join(getCwd(), './build')
   }, framework === 'ssr-plugin-react' ? {
-    react: loadModuleFromFramework('react') ?? join(cwd, './node_module/react'),
-    'react-router': loadModuleFromFramework('react-router') ?? join(cwd, './node_module/react-router'),
-    'react-router-dom': loadModuleFromFramework('react-router-dom') ?? join(cwd, './node_module/react-router-dom')
+    react: loadModuleFromFramework('react'),
+    'react-router': loadModuleFromFramework('react-router'),
+    'react-router-dom': loadModuleFromFramework('react-router-dom')
   } : {
     vue$: framework === 'ssr-plugin-vue' ? 'vue/dist/vue.runtime.esm.js' : 'vue/dist/vue.runtime.esm-bundler.js'
   }, userConfig.alias)
@@ -180,7 +180,8 @@ const loadConfig = (): IConfig => {
     reactClientEntry,
     isVite,
     isCI,
-    supportOptinalChaining
+    supportOptinalChaining,
+    define
   }, userConfig)
   config.alias = alias
   config.corejsOptions = corejsOptions

diff --git a/packages/types/src/config.ts b/packages/types/src/config.ts
@@ -98,6 +98,11 @@ export interface IConfig {
       extraPlugin?: any[]
     }
   }
+  define?: {
+    base?: Record<string, string>
+    client?: Record<string, string>
+    server?: Record<string, string>
+  }
 }
 
 export interface proxyOptions {