ssr-plugin-react 6.1.21 → 6.1.23

package/CHANGELOG.md

@@ -3,6 +3,44 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.1.23](https://github.com/zhangyuang/ssr/compare/v6.1.22...v6.1.23) (2021-12-13)
+
+
+### Features
+
+* support alias config ([551c9be](https://github.com/zhangyuang/ssr/commit/551c9be1741f63443381cc897166fb640fa8718d))
+
+
+
+
+
+## [6.1.22](https://github.com/zhangyuang/ssr/compare/v6.1.22-alpha.1...v6.1.22) (2021-12-11)
+
+**Note:** Version bump only for package ssr-plugin-react
+
+
+
+
+
+## [6.1.22-alpha.1](https://github.com/zhangyuang/ssr/compare/v6.1.22-alpha.0...v6.1.22-alpha.1) (2021-12-11)
+
+
+### Features
+
+* support vite-style-import ([62d936b](https://github.com/zhangyuang/ssr/commit/62d936b62dd47365be8eb27564628adc139b619d))
+
+
+
+
+
+## [6.1.22-alpha.0](https://github.com/zhangyuang/ssr/compare/v6.1.21...v6.1.22-alpha.0) (2021-12-10)
+
+**Note:** Version bump only for package ssr-plugin-react
+
+
+
+
+
 ## [6.1.21](https://github.com/zhangyuang/ssr/compare/v6.1.20...v6.1.21) (2021-12-09)
 
 **Note:** Version bump only for package ssr-plugin-react

package/README.md

@@ -273,7 +273,7 @@ $ npm run start:vite # 以 vite 模式启动，等价于 npx ssr start --vite
 
 <div style="display:flex">
 <img src="https://res.wx.qq.com/op_res/7F1t4Z8yCHWilehbcFGjAj0yVn0URMiWBGVJa-TVu_eqw5IwUXA2kPYBnfX6YRHy0FVBB-yC6l0IEL02QTJkLg" width="300">
-<img src="https://res.wx.qq.com/op_res/ECwdFhkCwm6NE1c_jP-DOYaVaR8K_ORJeEzFlDW9eBJj8igF3yeut9KnoChxyqJ4ReJogCG9bL_qZ3OYdZBI0w" width="300">
+<img src="https://res.wx.qq.com/op_res/i1X1OIr2VfQ9MLcvsFOCyN4UWghSc85u64U8OeXxQWKrpdXvpnhe-gms1sUgtRr_QOHZPqanJ2G_lNzuN00ZvQ" width="300">
 </div>
 
 ## 前端开发手册

package/cjs/config/base.js

@@ -43,7 +43,7 @@ const addBabelLoader = (chain, envOptions) => {
 };
 const getBaseConfig = (chain, isServer) => {
     const config = (0, ssr_server_utils_1.loadConfig)();
-    const { moduleFileExtensions, useHash, isDev, chainBaseConfig, corejs, babelExtraModule } = config;
+    const { moduleFileExtensions, useHash, isDev, chainBaseConfig, corejs, babelExtraModule, alias } = config;
     const mode = process.env.NODE_ENV;
     const envOptions = {
         modules: false
@@ -78,6 +78,10 @@ const getBaseConfig = (chain, isServer) => {
         .set('react', loadModule('react')) // 用cwd的路径alias，否则可能会出现多个react实例
         .set('react-router', loadModule('react-router'))
         .set('react-router-dom', loadModule('react-router-dom'));
+    alias && Object.keys(alias).forEach(item => {
+        chain.resolve.alias
+            .set(item, alias[item]);
+    });
     (0, ssr_server_utils_1.addImageChain)(chain, isServer);
     const babelModule = chain.module
         .rule('compileBabel')

package/cjs/config/server.js

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

package/cjs/tools/vite.js

@@ -4,9 +4,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.clientConfig = exports.serverConfig = exports.viteStart = exports.viteBuild = void 0;
 const ssr_server_utils_1 = require("ssr-server-utils");
 const plugin_react_1 = require("@vitejs/plugin-react");
+const vite_plugin_style_import_1 = require("vite-plugin-style-import");
 const build = require('vite').build;
 const { getOutput, reactServerEntry, reactClientEntry, viteConfig } = (0, ssr_server_utils_1.loadConfig)();
 const { clientOutPut, serverOutPut } = getOutput();
+const styleImportConfig = {
+    include: ['**/*.vue', '**/*.ts', '**/*.js', '**/*.tsx', '**/*.jsx', /chunkName/],
+    resolves: [
+        (0, vite_plugin_style_import_1.AndDesignVueResolve)(),
+        (0, vite_plugin_style_import_1.VantResolve)(),
+        (0, vite_plugin_style_import_1.ElementPlusResolve)(),
+        (0, vite_plugin_style_import_1.NutuiResolve)(),
+        (0, vite_plugin_style_import_1.AntdResolve)()
+    ]
+};
 const serverConfig = {
     ...(0, ssr_server_utils_1.commonConfig)(),
     plugins: [
@@ -14,7 +25,8 @@ const serverConfig = {
             ...(_b = (_a = viteConfig === null || viteConfig === void 0 ? void 0 : viteConfig()) === null || _a === void 0 ? void 0 : _a.server) === null || _b === void 0 ? void 0 : _b.defaultPluginOptions,
             jsxRuntime: 'classic'
         }),
-        (_d = (_c = viteConfig === null || viteConfig === void 0 ? void 0 : viteConfig()) === null || _c === void 0 ? void 0 : _c.server) === null || _d === void 0 ? void 0 : _d.extraPlugin
+        (_d = (_c = viteConfig === null || viteConfig === void 0 ? void 0 : viteConfig()) === null || _c === void 0 ? void 0 : _c.server) === null || _d === void 0 ? void 0 : _d.extraPlugin,
+        (0, vite_plugin_style_import_1.default)(styleImportConfig)
     ],
     build: {
         ssr: reactServerEntry,
@@ -41,14 +53,15 @@ const clientConfig = {
             ...(_h = (_g = viteConfig === null || viteConfig === void 0 ? void 0 : viteConfig()) === null || _g === void 0 ? void 0 : _g.client) === null || _h === void 0 ? void 0 : _h.defaultPluginOptions,
             jsxRuntime: 'classic'
         }),
-        (_k = (_j = viteConfig === null || viteConfig === void 0 ? void 0 : viteConfig()) === null || _j === void 0 ? void 0 : _j.client) === null || _k === void 0 ? void 0 : _k.extraPlugin
+        (_k = (_j = viteConfig === null || viteConfig === void 0 ? void 0 : viteConfig()) === null || _j === void 0 ? void 0 : _j.client) === null || _k === void 0 ? void 0 : _k.extraPlugin,
+        (0, vite_plugin_style_import_1.default)(styleImportConfig)
     ],
     build: {
         ssrManifest: true,
         outDir: clientOutPut,
         rollupOptions: {
             input: reactClientEntry,
-            output: ssr_server_utils_1.output,
+            output: ssr_server_utils_1.rollupOutputOptions,
             plugins: [(0, ssr_server_utils_1.chunkNamePlugin)(), (0, ssr_server_utils_1.manifestPlugin)()]
         }
     },

package/esm/config/base.js

@@ -40,7 +40,7 @@ const addBabelLoader = (chain, envOptions) => {
 };
 const getBaseConfig = (chain, isServer) => {
     const config = loadConfig();
-    const { moduleFileExtensions, useHash, isDev, chainBaseConfig, corejs, babelExtraModule } = config;
+    const { moduleFileExtensions, useHash, isDev, chainBaseConfig, corejs, babelExtraModule, alias } = config;
     const mode = process.env.NODE_ENV;
     const envOptions = {
         modules: false
@@ -75,6 +75,10 @@ const getBaseConfig = (chain, isServer) => {
         .set('react', loadModule('react')) // 用cwd的路径alias，否则可能会出现多个react实例
         .set('react-router', loadModule('react-router'))
         .set('react-router-dom', loadModule('react-router-dom'));
+    alias && Object.keys(alias).forEach(item => {
+        chain.resolve.alias
+            .set(item, alias[item]);
+    });
     addImageChain(chain, isServer);
     const babelModule = chain.module
         .rule('compileBabel')

package/esm/config/server.js

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

package/esm/tools/vite.js

@@ -1,9 +1,20 @@
 var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-import { loadConfig, chunkNamePlugin, output, manifestPlugin, commonConfig } from 'ssr-server-utils';
+import { loadConfig, chunkNamePlugin, rollupOutputOptions, manifestPlugin, commonConfig } from 'ssr-server-utils';
 import react from '@vitejs/plugin-react';
+import styleImport, { AndDesignVueResolve, VantResolve, ElementPlusResolve, NutuiResolve, AntdResolve } from 'vite-plugin-style-import';
 const build = require('vite').build;
 const { getOutput, reactServerEntry, reactClientEntry, viteConfig } = loadConfig();
 const { clientOutPut, serverOutPut } = getOutput();
+const styleImportConfig = {
+    include: ['**/*.vue', '**/*.ts', '**/*.js', '**/*.tsx', '**/*.jsx', /chunkName/],
+    resolves: [
+        AndDesignVueResolve(),
+        VantResolve(),
+        ElementPlusResolve(),
+        NutuiResolve(),
+        AntdResolve()
+    ]
+};
 const serverConfig = {
     ...commonConfig(),
     plugins: [
@@ -11,7 +22,8 @@ const serverConfig = {
             ...(_b = (_a = viteConfig === null || viteConfig === void 0 ? void 0 : viteConfig()) === null || _a === void 0 ? void 0 : _a.server) === null || _b === void 0 ? void 0 : _b.defaultPluginOptions,
             jsxRuntime: 'classic'
         }),
-        (_d = (_c = viteConfig === null || viteConfig === void 0 ? void 0 : viteConfig()) === null || _c === void 0 ? void 0 : _c.server) === null || _d === void 0 ? void 0 : _d.extraPlugin
+        (_d = (_c = viteConfig === null || viteConfig === void 0 ? void 0 : viteConfig()) === null || _c === void 0 ? void 0 : _c.server) === null || _d === void 0 ? void 0 : _d.extraPlugin,
+        styleImport(styleImportConfig)
     ],
     build: {
         ssr: reactServerEntry,
@@ -37,14 +49,15 @@ const clientConfig = {
             ...(_h = (_g = viteConfig === null || viteConfig === void 0 ? void 0 : viteConfig()) === null || _g === void 0 ? void 0 : _g.client) === null || _h === void 0 ? void 0 : _h.defaultPluginOptions,
             jsxRuntime: 'classic'
         }),
-        (_k = (_j = viteConfig === null || viteConfig === void 0 ? void 0 : viteConfig()) === null || _j === void 0 ? void 0 : _j.client) === null || _k === void 0 ? void 0 : _k.extraPlugin
+        (_k = (_j = viteConfig === null || viteConfig === void 0 ? void 0 : viteConfig()) === null || _j === void 0 ? void 0 : _j.client) === null || _k === void 0 ? void 0 : _k.extraPlugin,
+        styleImport(styleImportConfig)
     ],
     build: {
         ssrManifest: true,
         outDir: clientOutPut,
         rollupOptions: {
             input: reactClientEntry,
-            output: output,
+            output: rollupOutputOptions,
             plugins: [chunkNamePlugin(), manifestPlugin()]
         }
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ssr-plugin-react",
-  "version": "6.1.21",
+  "version": "6.1.23",
   "description": "plugin-react for ssr",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
@@ -54,13 +54,14 @@
     "postcss-safe-parser": "4.0.1",
     "react-dev-utils": "^11.0.4",
     "serialize-javascript": "^6.0.0",
-    "ssr-client-utils": "^6.1.18",
-    "ssr-hoc-react": "^6.1.18",
-    "ssr-server-utils": "^6.1.21",
-    "ssr-webpack": "^6.1.21",
+    "ssr-client-utils": "^6.1.23",
+    "ssr-hoc-react": "^6.1.23",
+    "ssr-server-utils": "^6.1.23",
+    "ssr-webpack": "^6.1.23",
     "terser-webpack-plugin": "^2.3.5",
     "url-loader": "^4.1.1",
     "vite": "^2.7.0-beta.10",
+    "vite-plugin-style-import": "^1.4.0",
     "webpack-bundle-analyzer": "^3.6.1",
     "webpack-chain": "^6.4.0",
     "webpack-manifest-plugin": "^2.2.0",
@@ -71,7 +72,7 @@
     "@types/react-dom": "^17.0.0",
     "@types/react-router-dom": "^5.1.3",
     "@types/webpack": "^4.41.10",
-    "ssr-types-react": "^6.1.18"
+    "ssr-types-react": "^6.1.23"
   },
-  "gitHead": "8a6eb76df0a07597839e867ad5dd2fec13f3a92f"
+  "gitHead": "9340f68013419d44ebe3d4c44d6d1ce3a35c68ed"
 }

package/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, corejs, babelExtraModule } = config
+  const { moduleFileExtensions, useHash, isDev, chainBaseConfig, corejs, babelExtraModule, alias } = config
   const mode = process.env.NODE_ENV as Mode
   const envOptions = {
     modules: false
@@ -82,6 +82,11 @@ const getBaseConfig = (chain: WebpackChain, isServer: boolean) => {
     .set('react-router', loadModule('react-router'))
     .set('react-router-dom', loadModule('react-router-dom'))
 
+  alias && Object.keys(alias).forEach(item => {
+    chain.resolve.alias
+      .set(item, alias[item])
+  })
+
   addImageChain(chain, isServer)
 
   const babelModule = chain.module

package/src/config/server.ts

@@ -23,7 +23,7 @@ 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 as RegExp[] || []),
+    whitelist: whiteList,
     // externals Dir contains example/xxx/node_modules ssr/node_modules
     modulesDir
   }))

package/src/tools/vite.ts

@@ -1,10 +1,26 @@
 import type { build as BuildType, UserConfig } from 'vite'
-import { loadConfig, chunkNamePlugin, output, manifestPlugin, commonConfig } from 'ssr-server-utils'
+import { loadConfig, chunkNamePlugin, rollupOutputOptions, manifestPlugin, commonConfig } from 'ssr-server-utils'
 import react from '@vitejs/plugin-react'
+import styleImport, {
+  AndDesignVueResolve,
+  VantResolve,
+  ElementPlusResolve,
+  NutuiResolve,
+  AntdResolve
+} from 'vite-plugin-style-import'
+
 const build: typeof BuildType = require('vite').build
 const { getOutput, reactServerEntry, reactClientEntry, viteConfig } = loadConfig()
 const { clientOutPut, serverOutPut } = getOutput()
-
+const styleImportConfig = {
+  include: ['**/*.vue', '**/*.ts', '**/*.js', '**/*.tsx', '**/*.jsx', /chunkName/],
+  resolves: [
+    AndDesignVueResolve(),
+    VantResolve(),
+    ElementPlusResolve(),
+    NutuiResolve(),
+    AntdResolve()]
+}
 const serverConfig: UserConfig = {
   ...commonConfig(),
   plugins: [
@@ -12,7 +28,9 @@ const serverConfig: UserConfig = {
       ...viteConfig?.()?.server?.defaultPluginOptions,
       jsxRuntime: 'classic'
     }),
-    viteConfig?.()?.server?.extraPlugin
+    viteConfig?.()?.server?.extraPlugin,
+    styleImport(styleImportConfig)
+
   ],
   build: {
     ssr: reactServerEntry,
@@ -39,14 +57,15 @@ const clientConfig: UserConfig = {
       ...viteConfig?.()?.client?.defaultPluginOptions,
       jsxRuntime: 'classic'
     }),
-    viteConfig?.()?.client?.extraPlugin
+    viteConfig?.()?.client?.extraPlugin,
+    styleImport(styleImportConfig)
   ],
   build: {
     ssrManifest: true,
     outDir: clientOutPut,
     rollupOptions: {
       input: reactClientEntry,
-      output: output,
+      output: rollupOutputOptions,
       plugins: [chunkNamePlugin(), manifestPlugin()]
     }
   },