From ad8e5058fc815278cd1911197edaeb7413ff7840 Mon Sep 17 00:00:00 2001 From: fxy060608 Date: Wed, 13 Dec 2023 14:51:30 +0800 Subject: [PATCH] =?UTF-8?q?wip(uvue):=20iOS=E5=B9=B3=E5=8F=B0=E6=94=AF?= =?UTF-8?q?=E6=8C=81css=E8=A7=A3=E6=9E=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../uni-app-uts/src/plugins/android/css.ts | 2 +- .../uni-app-uts/src/plugins/android/plugin.ts | 42 +----------- packages/uni-app-uts/src/plugins/ios/css.ts | 65 +++++++++++++++++++ .../uni-app-uts/src/plugins/ios/plugin.ts | 44 ++----------- packages/uni-app-uts/src/plugins/utils.ts | 51 +++++++++++++++ .../src/vite/plugins/vitejs/plugins/asset.ts | 6 +- .../src/vite/plugins/vitejs/plugins/css.ts | 6 +- .../uni-cli-shared/src/vite/utils/plugin.ts | 2 +- .../src/configResolved/plugins/ssr.ts | 2 +- packages/vite-plugin-uni/src/vue/options.ts | 7 +- 10 files changed, 138 insertions(+), 89 deletions(-) create mode 100644 packages/uni-app-uts/src/plugins/ios/css.ts diff --git a/packages/uni-app-uts/src/plugins/android/css.ts b/packages/uni-app-uts/src/plugins/android/css.ts index 6764cce84b..8bfe328688 100644 --- a/packages/uni-app-uts/src/plugins/android/css.ts +++ b/packages/uni-app-uts/src/plugins/android/css.ts @@ -84,7 +84,7 @@ export function uniAppCssPlugin(): Plugin { // 增加 css plugins insertBeforePlugin( cssPlugin(config, { - isAppX: true, + isAndroidX: true, getDescriptor: (filename) => { return getDescriptor(filename, descriptorOptions, false) }, diff --git a/packages/uni-app-uts/src/plugins/android/plugin.ts b/packages/uni-app-uts/src/plugins/android/plugin.ts index 3d75190ec0..33f6a67090 100644 --- a/packages/uni-app-uts/src/plugins/android/plugin.ts +++ b/packages/uni-app-uts/src/plugins/android/plugin.ts @@ -10,10 +10,8 @@ import { resolveMainPathOnce, resolveUTSCompiler, utsPlugins, - injectAssetPlugin, AutoImportOptions, } from '@dcloudio/uni-cli-shared' -import type { Plugin } from 'vite' import { DEFAULT_APPID, parseImports, @@ -28,36 +26,10 @@ import { createTryResolve, } from './utils' import { getOutputManifestJson } from './manifestJson' -import { createUniOptions } from '../utils' +import { configResolved, createUniOptions } from '../utils' const uniCloudSpaceList = getUniCloudSpaceList() -const REMOVED_PLUGINS = [ - 'vite:build-metadata', - 'vite:modulepreload-polyfill', - 'vite:css', - 'vite:esbuild', - 'vite:wasm-helper', - 'vite:worker', - // 'vite:asset', // replace - 'vite:wasm-fallback', - 'vite:define', - 'vite:css-post', - 'vite:build-html', - 'vite:html-inline-proxy', - 'vite:worker-import-meta-url', - 'vite:asset-import-meta-url', - 'vite:force-systemjs-wrap-complete', - 'vite:watch-package-data', - 'commonjs', - 'vite:data-uri', - 'vite:dynamic-import-vars', - 'vite:import-glob', - 'vite:build-import-analysis', - 'vite:esbuild-transpile', - 'vite:terser', - 'vite:reporter', -] let isFirst = true export function uniAppPlugin(options: { autoImportOptions?: AutoImportOptions @@ -134,17 +106,7 @@ export function uniAppPlugin(options: { } }, configResolved(config) { - const plugins = config.plugins as Plugin[] - const len = plugins.length - for (let i = len - 1; i >= 0; i--) { - const plugin = plugins[i] - if (REMOVED_PLUGINS.includes(plugin.name)) { - plugins.splice(i, 1) - } - } - // 强制不inline - config.build.assetsInlineLimit = 0 - injectAssetPlugin(config, { isAppX: true }) + configResolved(config, true) }, async transform(code, id) { if (process.env.UNI_APP_X_TSC === 'true') { diff --git a/packages/uni-app-uts/src/plugins/ios/css.ts b/packages/uni-app-uts/src/plugins/ios/css.ts new file mode 100644 index 0000000000..633dc37fbd --- /dev/null +++ b/packages/uni-app-uts/src/plugins/ios/css.ts @@ -0,0 +1,65 @@ +import type { Plugin, ResolvedConfig } from 'vite' +import colors from 'picocolors' + +import { + commonjsProxyRE, + cssLangRE, + formatAtFilename, + generateCodeFrame, + parseAssets, + preUVueCss, +} from '@dcloudio/uni-cli-shared' +import { parse } from '@dcloudio/uni-nvue-styler' + +export function uniAppCssPlugin(): Plugin { + let resolvedConfig: ResolvedConfig + + return { + name: 'vite:css-post', + configResolved(config) { + resolvedConfig = config + }, + buildStart() { + // 用于覆盖原始插件方法 + // noop + }, + async transform(source, filename) { + if (!cssLangRE.test(filename) || commonjsProxyRE.test(filename)) { + return + } + if (source.includes('#endif')) { + source = preUVueCss(source) + } + source = parseAssets(resolvedConfig, source) + // 仅做校验使用 + const { messages, code } = await parse(source, { + filename, + logLevel: 'WARNING', + type: 'uvue', + platform: process.env.UNI_UTS_PLATFORM, + }) + messages.forEach((message) => { + if (message.type === 'warning') { + // 拆分成多行，第一行输出信息（有颜色），后续输出错误代码+文件行号 + resolvedConfig.logger.warn( + colors.yellow(`[plugin:uni:app-uvue-css] ${message.text}`) + ) + let msg = '' + if (message.line && message.column) { + msg += `\n${generateCodeFrame(source, { + line: message.line, + column: message.column, + }).replace(/\t/g, ' ')}\n` + } + msg += `${formatAtFilename(filename)}` + resolvedConfig.logger.warn(msg) + } + }) + return { code: `export default ${code}`, map: { mappings: '' } } + }, + generateBundle() { + // 用于覆盖原始插件方法 + // noop + }, + } +} diff --git a/packages/uni-app-uts/src/plugins/ios/plugin.ts b/packages/uni-app-uts/src/plugins/ios/plugin.ts index a624e5b34b..2a58fc852f 100644 --- a/packages/uni-app-uts/src/plugins/ios/plugin.ts +++ b/packages/uni-app-uts/src/plugins/ios/plugin.ts @@ -3,37 +3,12 @@ import { APP_SERVICE_FILENAME, UniVitePlugin, emptyDir, + injectCssPlugin, + injectCssPostPlugin, resolveMainPathOnce, } from '@dcloudio/uni-cli-shared' -import { createUniOptions } from '../utils' -import type { Plugin } from 'vite' - -const REMOVED_PLUGINS = [ - 'vite:build-metadata', - 'vite:modulepreload-polyfill', - 'vite:css', - 'vite:esbuild', - 'vite:wasm-helper', - 'vite:worker', - // 'vite:asset', // replace - 'vite:wasm-fallback', - 'vite:define', - 'vite:css-post', - 'vite:build-html', - 'vite:html-inline-proxy', - 'vite:worker-import-meta-url', - 'vite:asset-import-meta-url', - 'vite:force-systemjs-wrap-complete', - 'vite:watch-package-data', - 'commonjs', - 'vite:data-uri', - 'vite:dynamic-import-vars', - 'vite:import-glob', - 'vite:build-import-analysis', - 'vite:esbuild-transpile', - 'vite:terser', - 'vite:reporter', -] +import { configResolved, createUniOptions } from '../utils' +import { uniAppCssPlugin } from './css' export function uniAppIOSPlugin(): UniVitePlugin { const inputDir = process.env.UNI_INPUT_DIR @@ -74,14 +49,9 @@ export function uniAppIOSPlugin(): UniVitePlugin { } }, configResolved(config) { - const plugins = config.plugins as Plugin[] - const len = plugins.length - for (let i = len - 1; i >= 0; i--) { - const plugin = plugins[i] - if (REMOVED_PLUGINS.includes(plugin.name)) { - plugins.splice(i, 1) - } - } + configResolved(config) + injectCssPlugin(config) + injectCssPostPlugin(config, uniAppCssPlugin()) }, } } diff --git a/packages/uni-app-uts/src/plugins/utils.ts b/packages/uni-app-uts/src/plugins/utils.ts index 0fd81c070b..f030e4b325 100644 --- a/packages/uni-app-uts/src/plugins/utils.ts +++ b/packages/uni-app-uts/src/plugins/utils.ts @@ -4,8 +4,10 @@ import { UniViteCopyPluginOptions, UniVitePlugin, initI18nOptions, + injectAssetPlugin, } from '@dcloudio/uni-cli-shared' import { compileI18nJsonStr } from '@dcloudio/uni-i18n' +import { Plugin, ResolvedConfig } from 'vite' export function createUniOptions(): UniVitePlugin['uni'] { return { @@ -45,3 +47,52 @@ export function isManifest(id: string) { export function isPages(id: string) { return id.endsWith(PAGES_JSON_UTS) } + +// TODO vite 升级需要考虑调整以下列表 +const REMOVED_PLUGINS = [ + 'vite:build-metadata', + 'vite:modulepreload-polyfill', + // 'vite:css', // iOS replace + 'vite:esbuild', + 'vite:wasm-helper', + 'vite:worker', + 'vite:json', + // 'vite:asset', // replace + 'vite:wasm-fallback', + 'vite:define', + // 'vite:css-post', // iOS replace + 'vite:build-html', + 'vite:html-inline-proxy', + 'vite:worker-import-meta-url', + 'vite:asset-import-meta-url', + 'vite:force-systemjs-wrap-complete', + 'vite:watch-package-data', + 'commonjs', + 'vite:data-uri', + 'vite:dynamic-import-vars', + 'vite:import-glob', + 'vite:build-import-analysis', + 'vite:esbuild-transpile', + 'vite:terser', + 'vite:reporter', +] + +export function configResolved(config: ResolvedConfig, isAndroidX = false) { + const plugins = config.plugins as Plugin[] + const len = plugins.length + const removedPlugins = REMOVED_PLUGINS.slice(0) + if (isAndroidX) { + removedPlugins.push('vite:css') + removedPlugins.push('vite:css-post') + } + for (let i = len - 1; i >= 0; i--) { + const plugin = plugins[i] + if (removedPlugins.includes(plugin.name)) { + plugins.splice(i, 1) + } + } + // console.log(plugins.map((p) => p.name)) + // 强制不inline + config.build.assetsInlineLimit = 0 + injectAssetPlugin(config, { isAndroidX }) +} diff --git a/packages/uni-cli-shared/src/vite/plugins/vitejs/plugins/asset.ts b/packages/uni-cli-shared/src/vite/plugins/vitejs/plugins/asset.ts index 65d36fcc53..cc03af3f48 100644 --- a/packages/uni-cli-shared/src/vite/plugins/vitejs/plugins/asset.ts +++ b/packages/uni-cli-shared/src/vite/plugins/vitejs/plugins/asset.ts @@ -38,7 +38,7 @@ const emittedHashMap = new WeakMap>() */ export function assetPlugin( config: ResolvedConfig, - options?: { isAppX: boolean } + options?: { isAndroidX: boolean } ): Plugin { // assetHashToFilenameMap initialization in buildStart causes getAssetFilename to return undefined assetHashToFilenameMap.set(config, new Map()) @@ -86,7 +86,7 @@ export function assetPlugin( const url = await fileToUrl( id, config, - options?.isAppX + options?.isAndroidX ? ({ emitFile(emittedFile: EmittedAsset) { // 直接写入目标目录 @@ -101,7 +101,7 @@ export function assetPlugin( } as PluginContext) : this ) - if (options?.isAppX) { + if (options?.isAndroidX) { this.emitFile({ type: 'asset', fileName: normalizeNodeModules( diff --git a/packages/uni-cli-shared/src/vite/plugins/vitejs/plugins/css.ts b/packages/uni-cli-shared/src/vite/plugins/vitejs/plugins/css.ts index 3903d2f67a..ddfe7b9eb9 100644 --- a/packages/uni-cli-shared/src/vite/plugins/vitejs/plugins/css.ts +++ b/packages/uni-cli-shared/src/vite/plugins/vitejs/plugins/css.ts @@ -184,9 +184,9 @@ function wrapResolve( export function cssPlugin( config: ResolvedConfig, options: { - isAppX: boolean + isAndroidX: boolean getDescriptor?(filename: string): SFCDescriptor | undefined - } = { isAppX: false } + } = { isAndroidX: false } ): Plugin { let server: ViteDevServer let moduleCache: Map> @@ -231,7 +231,7 @@ export function cssPlugin( return fileToUrl( resolved, config, - options?.isAppX + options?.isAndroidX ? ({ emitFile(emittedFile: EmittedAsset) { // 直接写入目标目录 diff --git a/packages/uni-cli-shared/src/vite/utils/plugin.ts b/packages/uni-cli-shared/src/vite/utils/plugin.ts index 2f4f08668c..f36a4e96c3 100644 --- a/packages/uni-cli-shared/src/vite/utils/plugin.ts +++ b/packages/uni-cli-shared/src/vite/utils/plugin.ts @@ -13,7 +13,7 @@ export interface UniViteFilterPluginOptions { export function injectAssetPlugin( config: ResolvedConfig, - options?: { isAppX: boolean } + options?: { isAndroidX: boolean } ) { replacePlugins([assetPlugin(config, options)], config) } diff --git a/packages/vite-plugin-uni/src/configResolved/plugins/ssr.ts b/packages/vite-plugin-uni/src/configResolved/plugins/ssr.ts index 0a46aa200c..978133e956 100644 --- a/packages/vite-plugin-uni/src/configResolved/plugins/ssr.ts +++ b/packages/vite-plugin-uni/src/configResolved/plugins/ssr.ts @@ -25,7 +25,7 @@ export function uniSSRPlugin( ): Plugin { const filter = createFilter(options.include, options.exclude) return { - name: 'uni:ssr', + name: 'uni:ssr:ref', transform(code, id) { if (!filter(id)) return null if (!KEYED_FUNC_RE.test(code)) { diff --git a/packages/vite-plugin-uni/src/vue/options.ts b/packages/vite-plugin-uni/src/vue/options.ts index 4746af6a19..d0d05df2a1 100644 --- a/packages/vite-plugin-uni/src/vue/options.ts +++ b/packages/vite-plugin-uni/src/vue/options.ts @@ -148,10 +148,11 @@ export function initPluginVueOptions( compilerOptions.hoistStatic = false // 小程序使用了 ;(compilerOptions as any).root = process.env.UNI_INPUT_DIR - // app-nvue 需要启用 customElement 机制来内联 styles - if (process.env.UNI_COMPILER === 'nvue') { + const isX = process.env.UNI_APP_X === 'true' + // app-nvue | app-uvue 需要启用 customElement 机制来内联 styles + if (process.env.UNI_COMPILER === 'nvue' || isX) { vueOptions.customElement = true - if (process.env.UNI_RENDERER_NATIVE !== 'appService') { + if (process.env.UNI_RENDERER_NATIVE !== 'appService' || isX) { // nvue 需要使用自己的 compiler，来移除 scoped vueOptions.compiler = createNVueCompiler() } -- GitLab