From 3c1290fc5895000ae479779b30cf4372848ebfbb Mon Sep 17 00:00:00 2001 From: qlin Date: Fri, 2 Jun 2023 10:59:31 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E9=85=8D=E7=BD=AE?= =?UTF-8?q?=E6=8E=A7=E5=88=B6=E5=85=A8=E5=B1=80=E6=A0=B7=E5=BC=8F=E5=8A=A0?= =?UTF-8?q?=E8=BD=BD=E9=A1=BA=E5=BA=8F=20(#195)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * docs: remove pwa * fix: 全局样式覆盖问题 * fix: 修复全局样式加载顺序问题 * chore: 优化代码 --- docs/.vitepress/config.ts | 7 +-- docs/.vitepress/configs/navbar/zh.ts | 4 +- docs/reference/config/index.md | 12 +++- package.json | 1 + packages/fes-plugin-jest/package.json | 4 +- .../src/plugins/features/globalCSS.js | 34 +++++++++-- packages/fes-preset-built-in/types.d.ts | 1 + pnpm-lock.yaml | 61 ++++++++++--------- 8 files changed, 78 insertions(+), 46 deletions(-) diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index ecea0f21..01adff41 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -5,8 +5,7 @@ import { withPwa } from '@vite-pwa/vitepress'; import { navbar, sidebar } from './configs'; const BASE_URL = process.env.BASE ? `/${process.env.BASE}/` : '/'; -export default withPwa( - defineConfig({ +export default defineConfig({ base: BASE_URL, title: 'Fes.js', description: '一个好用的前端应用解决方案', @@ -45,6 +44,4 @@ export default withPwa( }, }, - pwa: {}, - }), -); +}); \ No newline at end of file diff --git a/docs/.vitepress/configs/navbar/zh.ts b/docs/.vitepress/configs/navbar/zh.ts index 8f24789c..29c05dac 100644 --- a/docs/.vitepress/configs/navbar/zh.ts +++ b/docs/.vitepress/configs/navbar/zh.ts @@ -29,11 +29,11 @@ export const zh = [ { text: 'v2.0', link: - 'https://fesjs.mumblefe.cn/2.0', + 'https://fesjs.mumblefe.cn/2.0/', }, { text: 'v1.0', - link: 'https://fesjs.mumblefe.cn/1.0', + link: 'https://fesjs.mumblefe.cn/1.0/', }, ], }, diff --git a/docs/reference/config/index.md b/docs/reference/config/index.md index 365402e3..0c012942 100644 --- a/docs/reference/config/index.md +++ b/docs/reference/config/index.md @@ -119,7 +119,6 @@ export default { 路由是否按需加载 - ### inlineLimit - 类型： `number` @@ -128,6 +127,14 @@ export default { 配置图片文件是否走 base64 编译的阈值。默认是 `8192` 字节，小于它会被编译为 base64 编码，否则会生成单独的文件。 +### globalCSS + +- 类型： `beforeImports` | `afterImports` +- 默认值： `afterImports` +- 详情： + + 定义 globalCSS 的位置，处理一些 CSS 覆盖问题。 + ### mock - 类型： `object || boolean` @@ -407,7 +414,7 @@ export default { - 默认值： `{}` - 详情： - 配置如何使用`mini-css-extract-plugin`，默认使用插件的默认配置。`loader` 选项对应loader参数，`plugin`选项对应插件参数。例如： + 配置如何使用`mini-css-extract-plugin`，默认使用插件的默认配置。`loader` 选项对应 loader 参数，`plugin`选项对应插件参数。例如： ```js export default { @@ -418,7 +425,6 @@ export default { }, }, }; - ``` ### exportStatic diff --git a/package.json b/package.json index 17d18761..39147974 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,7 @@ "fs-extra": "^11.1.1", "husky": "^8.0.3", "lint-staged": "^13.2.0", + "typescript": "^5.0.4", "vite-plugin-pwa": "^0.14.7", "vitepress": "1.0.0-alpha.73", "vue": "^3.2.47", diff --git a/packages/fes-plugin-jest/package.json b/packages/fes-plugin-jest/package.json index 7e328a09..ae617638 100644 --- a/packages/fes-plugin-jest/package.json +++ b/packages/fes-plugin-jest/package.json @@ -41,7 +41,7 @@ "jest-transform-stub": "^2.0.0", "jest-watch-typeahead": "^2.2.2", "ts-jest": "^27.0.4", - "typescript": "^4.9.0", + "typescript": "^5.0.4", "vue3-jest": "^27.0.0-alpha.1" } -} +} \ No newline at end of file diff --git a/packages/fes-preset-built-in/src/plugins/features/globalCSS.js b/packages/fes-preset-built-in/src/plugins/features/globalCSS.js index 1f7d6aeb..2368ee78 100644 --- a/packages/fes-preset-built-in/src/plugins/features/globalCSS.js +++ b/packages/fes-preset-built-in/src/plugins/features/globalCSS.js @@ -2,10 +2,16 @@ import { relative, join } from 'path'; import { existsSync } from 'fs'; export default (api) => { - const { - paths, - utils: { winPath }, - } = api; + api.describe({ + key: 'globalCSS', + config: { + schema(joi) { + return joi.string(); + }, + }, + default: '', + }); + const { paths, utils } = api; const { absSrcPath = '', absTmpPath = '' } = paths; const files = ['global.css', 'global.less', 'global.scss', 'global.sass', 'global.styl', 'global.stylus']; const globalCSSFile = files @@ -13,5 +19,23 @@ export default (api) => { .filter((file) => existsSync(file)) .slice(0, 1); - api.addEntryCodeAhead(() => `${globalCSSFile.map((file) => `import '${winPath(relative(absTmpPath, file))}';`).join('')}`); + const isBeforeImports = () => api.config.globalCSS === 'beforeImports'; + + if (globalCSSFile.length) { + api.addEntryImportsAhead({ + stage: 1, + fn: () => { + if (isBeforeImports()) { + return [{ source: relative(absTmpPath, globalCSSFile[0]) }]; + } + return []; + }, + }); + api.addEntryCodeAhead(() => { + if (!isBeforeImports()) { + return `import '${utils.winPath(relative(absTmpPath, globalCSSFile[0]))}';`; + } + return []; + }); + } }; diff --git a/packages/fes-preset-built-in/types.d.ts b/packages/fes-preset-built-in/types.d.ts index 8a241e72..243ab5c4 100644 --- a/packages/fes-preset-built-in/types.d.ts +++ b/packages/fes-preset-built-in/types.d.ts @@ -42,6 +42,7 @@ declare module '@fesjs/fes' { } interface PluginBuildConfig { + globalCSS?: 'beforeImports' | 'afterImports'; alias?: Record; autoprefixer?: { /** environment for `Browserslist` */ diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0d39e02c..de1f481e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -56,6 +56,9 @@ importers: lint-staged: specifier: ^13.2.0 version: 13.2.0(enquirer@2.3.6) + typescript: + specifier: ^5.0.4 + version: 5.0.4 vite-plugin-pwa: specifier: ^0.14.7 version: 0.14.7(vite@4.3.1)(workbox-build@6.5.4)(workbox-window@6.5.4) @@ -385,13 +388,13 @@ importers: version: 2.2.2(jest@27.0.6) ts-jest: specifier: ^27.0.4 - version: 27.0.4(@babel/core@7.21.3)(babel-jest@27.0.6)(jest@27.0.6)(typescript@4.9.3) + version: 27.0.4(@babel/core@7.21.3)(babel-jest@27.0.6)(jest@27.0.6)(typescript@5.0.4) typescript: - specifier: ^4.9.0 - version: 4.9.3 + specifier: ^5.0.4 + version: 5.0.4 vue3-jest: specifier: ^27.0.0-alpha.1 - version: 27.0.0-alpha.1(@babel/core@7.21.3)(babel-jest@27.0.6)(jest@27.0.6)(ts-jest@27.0.4)(typescript@4.9.3)(vue@3.2.47) + version: 27.0.0-alpha.1(@babel/core@7.21.3)(babel-jest@27.0.6)(jest@27.0.6)(ts-jest@27.0.4)(typescript@5.0.4)(vue@3.2.47) packages/fes-plugin-layout: dependencies: @@ -487,7 +490,7 @@ importers: version: link:../fes-utils pinia: specifier: ^2.0.11 - version: 2.0.33(typescript@4.9.3)(vue@3.2.47) + version: 2.0.33(typescript@5.0.4)(vue@3.2.47) vue: specifier: ^3.2.47 version: 3.2.47 @@ -514,7 +517,7 @@ importers: version: 2.7.0 vite-plugin-qiankun: specifier: ^1.0.15 - version: 1.0.15(typescript@4.9.3)(vite@4.3.1) + version: 1.0.15(typescript@5.0.4)(vite@4.3.1) vue: specifier: ^3.2.47 version: 3.2.47 @@ -800,7 +803,7 @@ importers: version: 3.29.1 pinia: specifier: ^2.0.33 - version: 2.0.33(typescript@4.9.3)(vue@3.2.47) + version: 2.0.33(typescript@5.0.4)(vue@3.2.47) vue: specifier: ^3.2.47 version: 3.2.47 @@ -881,7 +884,7 @@ importers: version: 3.29.1 pinia: specifier: ^2.0.11 - version: 2.0.33(typescript@4.9.3)(vue@3.2.47) + version: 2.0.33(typescript@5.0.4)(vue@3.2.47) vue: specifier: ^3.2.47 version: 3.2.47 @@ -2436,13 +2439,13 @@ packages: '@types/node': 18.15.13 chalk: 4.1.2 cosmiconfig: 8.1.3 - cosmiconfig-typescript-loader: 4.3.0(@types/node@18.15.13)(cosmiconfig@8.1.3)(ts-node@10.9.1)(typescript@4.9.3) + cosmiconfig-typescript-loader: 4.3.0(@types/node@18.15.13)(cosmiconfig@8.1.3)(ts-node@10.9.1)(typescript@5.0.4) lodash.isplainobject: 4.0.6 lodash.merge: 4.6.2 lodash.uniq: 4.5.0 resolve-from: 5.0.0 - ts-node: 10.9.1(@types/node@18.15.13)(typescript@4.9.3) - typescript: 4.9.3 + ts-node: 10.9.1(@types/node@18.15.13)(typescript@5.0.4) + typescript: 5.0.4 transitivePeerDependencies: - '@swc/core' - '@swc/wasm' @@ -5815,7 +5818,7 @@ packages: resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==} dev: false - /cosmiconfig-typescript-loader@4.3.0(@types/node@18.15.13)(cosmiconfig@8.1.3)(ts-node@10.9.1)(typescript@4.9.3): + /cosmiconfig-typescript-loader@4.3.0(@types/node@18.15.13)(cosmiconfig@8.1.3)(ts-node@10.9.1)(typescript@5.0.4): resolution: {integrity: sha512-NTxV1MFfZDLPiBMjxbHRwSh5LaLcPMwNdCutmnHJCKoVnlvldPWlllonKwrsRJ5pYZBIBGRWWU2tfvzxgeSW5Q==} engines: {node: '>=12', npm: '>=6'} peerDependencies: @@ -5826,8 +5829,8 @@ packages: dependencies: '@types/node': 18.15.13 cosmiconfig: 8.1.3 - ts-node: 10.9.1(@types/node@18.15.13)(typescript@4.9.3) - typescript: 4.9.3 + ts-node: 10.9.1(@types/node@18.15.13)(typescript@5.0.4) + typescript: 5.0.4 dev: true optional: true @@ -8805,7 +8808,7 @@ packages: pretty-format: 27.5.1 slash: 3.0.0 strip-json-comments: 3.1.1 - ts-node: 10.9.1(@types/node@18.15.13)(typescript@4.9.3) + ts-node: 10.9.1(@types/node@18.15.13)(typescript@5.0.4) transitivePeerDependencies: - bufferutil - canvas @@ -10552,7 +10555,7 @@ packages: engines: {node: '>=6'} dev: false - /pinia@2.0.33(typescript@4.9.3)(vue@3.2.47): + /pinia@2.0.33(typescript@5.0.4)(vue@3.2.47): resolution: {integrity: sha512-HOj1yVV2itw6rNIrR2f7+MirGNxhORjrULL8GWgRwXsGSvEqIQ+SE0MYt6cwtpegzCda3i+rVTZM+AM7CG+kRg==} peerDependencies: '@vue/composition-api': ^1.4.0 @@ -10565,7 +10568,7 @@ packages: optional: true dependencies: '@vue/devtools-api': 6.5.0 - typescript: 4.9.3 + typescript: 5.0.4 vue: 3.2.47 vue-demi: 0.14.0(vue@3.2.47) dev: false @@ -12475,7 +12478,7 @@ packages: resolution: {integrity: sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==} engines: {node: '>=8'} - /ts-jest@27.0.4(@babel/core@7.21.3)(babel-jest@27.0.6)(jest@27.0.6)(typescript@4.9.3): + /ts-jest@27.0.4(@babel/core@7.21.3)(babel-jest@27.0.6)(jest@27.0.6)(typescript@5.0.4): resolution: {integrity: sha512-c4E1ECy9Xz2WGfTMyHbSaArlIva7Wi2p43QOMmCqjSSjHP06KXv+aT+eSY+yZMuqsMi3k7pyGsGj2q5oSl5WfQ==} engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0} hasBin: true @@ -12505,11 +12508,11 @@ packages: make-error: 1.3.6 mkdirp: 1.0.4 semver: 7.3.6 - typescript: 4.9.3 + typescript: 5.0.4 yargs-parser: 20.2.9 dev: false - /ts-node@10.9.1(@types/node@18.15.13)(typescript@4.9.3): + /ts-node@10.9.1(@types/node@18.15.13)(typescript@5.0.4): resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==} hasBin: true peerDependencies: @@ -12535,7 +12538,7 @@ packages: create-require: 1.1.1 diff: 4.0.2 make-error: 1.3.6 - typescript: 4.9.3 + typescript: 5.0.4 v8-compile-cache-lib: 3.0.1 yn: 3.1.1 @@ -12635,9 +12638,9 @@ packages: is-typedarray: 1.0.0 dev: false - /typescript@4.9.3: - resolution: {integrity: sha512-CIfGzTelbKNEnLpLdGFgdyKhG23CKdKgQPOBc+OUNrkJ2vr+KSzsSV5kq5iWhEQbok+quxgGzrAtGWCyU7tHnA==} - engines: {node: '>=4.2.0'} + /typescript@5.0.4: + resolution: {integrity: sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==} + engines: {node: '>=12.20'} hasBin: true /uglify-js@3.17.4: @@ -12860,14 +12863,14 @@ packages: - supports-color dev: true - /vite-plugin-qiankun@1.0.15(typescript@4.9.3)(vite@4.3.1): + /vite-plugin-qiankun@1.0.15(typescript@5.0.4)(vite@4.3.1): resolution: {integrity: sha512-0QB0Wr8Eu/LGcuJAfuNXDb7BAFDszo3GCxq4bzgXdSFAlK425u1/UGMxaDEBVA1uPFrLsZPzig83Ufdfl6J45A==} peerDependencies: typescript: '>=4' vite: '>=2' dependencies: cheerio: 1.0.0-rc.12 - typescript: 4.9.3 + typescript: 5.0.4 vite: 4.3.1(@types/node@18.15.13) dev: false @@ -13086,7 +13089,7 @@ packages: vue: 3.2.47 dev: false - /vue3-jest@27.0.0-alpha.1(@babel/core@7.21.3)(babel-jest@27.0.6)(jest@27.0.6)(ts-jest@27.0.4)(typescript@4.9.3)(vue@3.2.47): + /vue3-jest@27.0.0-alpha.1(@babel/core@7.21.3)(babel-jest@27.0.6)(jest@27.0.6)(ts-jest@27.0.4)(typescript@5.0.4)(vue@3.2.47): resolution: {integrity: sha512-F/pSFbpLcYVIv0ogNMFwT+W+r9tCRfLw84IIqqyocD1FZaW6m3RpfqwQsOXgYJVXFSdj4t3xbgj967s8WMrZjQ==} peerDependencies: '@babel/core': 7.x @@ -13109,9 +13112,9 @@ packages: extract-from-css: 0.4.4 jest: 27.0.6(ts-node@10.9.1) source-map: 0.5.6 - ts-jest: 27.0.4(@babel/core@7.21.3)(babel-jest@27.0.6)(jest@27.0.6)(typescript@4.9.3) + ts-jest: 27.0.4(@babel/core@7.21.3)(babel-jest@27.0.6)(jest@27.0.6)(typescript@5.0.4) tsconfig: 7.0.0 - typescript: 4.9.3 + typescript: 5.0.4 vue: 3.2.47 transitivePeerDependencies: - supports-color