From 74a43615a7150adc13ab4950c0fc6e7d49d7d332 Mon Sep 17 00:00:00 2001 From: fxy060608 Date: Mon, 11 Oct 2021 13:16:07 +0800 Subject: [PATCH] wip(mp): css --- .../uni-app-vite/src/plugin/configResolved.ts | 1 + packages/uni-cli-shared/src/utils.ts | 12 ++++ packages/uni-cli-shared/src/vite/index.ts | 5 ++ .../src/vite/plugins/vitejs/plugins/css.ts | 12 ++-- .../uni-cli-shared/src/vite/utils/plugin.ts | 4 +- packages/uni-mp-compiler/src/compile.ts | 7 +- packages/uni-mp-compiler/src/options.ts | 4 +- packages/uni-mp-vite/src/index.ts | 1 + packages/uni-mp-vite/src/plugin/build.ts | 8 +++ .../uni-mp-vite/src/plugin/configResolved.ts | 20 ++++-- packages/uni-mp-vite/src/plugin/index.ts | 71 ++++++++++++++++--- packages/uni-mp-vite/src/plugin/uni/index.ts | 6 +- packages/uni-mp-weixin/dist/uni.compiler.js | 36 ++++++++-- packages/uni-mp-weixin/src/plugin/index.ts | 41 +++++++++-- packages/vite-plugin-uni/src/utils/plugin.ts | 11 +-- packages/vite-plugin-uni/src/vue/options.ts | 4 ++ 16 files changed, 193 insertions(+), 50 deletions(-) diff --git a/packages/uni-app-vite/src/plugin/configResolved.ts b/packages/uni-app-vite/src/plugin/configResolved.ts index 961dc37a4..d82b8890e 100644 --- a/packages/uni-app-vite/src/plugin/configResolved.ts +++ b/packages/uni-app-vite/src/plugin/configResolved.ts @@ -12,6 +12,7 @@ export const configResolved: Plugin['configResolved'] = (config) => { removePlugins('vite:import-analysis', config) injectCssPlugin(config) injectCssPostPlugin(config, { + extname: '.css', appCss: fs.readFileSync( require.resolve('@dcloudio/uni-app-plus/dist/style.css'), 'utf8' diff --git a/packages/uni-cli-shared/src/utils.ts b/packages/uni-cli-shared/src/utils.ts index c784ed540..aa562efe7 100644 --- a/packages/uni-cli-shared/src/utils.ts +++ b/packages/uni-cli-shared/src/utils.ts @@ -49,3 +49,15 @@ export function removeExt(str: string, ext?: string) { } return normalizePath(str.replace(/\.\w+$/g, '')) } + +const NODE_MODULES_REGEX = /(\.\.\/)?node_modules/g + +export function normalizeNodeModules(str: string) { + str = normalizePath(str).replace(NODE_MODULES_REGEX, 'node-modules') + // HBuilderX 内置模块路径转换 + str = str.replace(/.*\/plugins\/uniapp-cli\/node[-_]modules/, 'node-modules') + if (process.env.UNI_PLATFORM === 'mp-alipay') { + str = str.replace('node-modules/@', 'node-modules/npm-scope-') + } + return str +} diff --git a/packages/uni-cli-shared/src/vite/index.ts b/packages/uni-cli-shared/src/vite/index.ts index 9cfbad4e7..4a0a0b8e9 100644 --- a/packages/uni-cli-shared/src/vite/index.ts +++ b/packages/uni-cli-shared/src/vite/index.ts @@ -1,7 +1,9 @@ import type { Plugin } from 'vite' +import type { EmittedFile } from 'rollup' import type { ParserOptions } from '@vue/compiler-core' import type { CompilerOptions, TemplateCompiler } from '@vue/compiler-sfc' import { UniViteCopyPluginOptions } from './plugins/copy' + export interface CopyOptions { /** * 静态资源，配置的目录，在 uni_modules 中同样支持 @@ -13,6 +15,9 @@ export interface CopyOptions { interface UniVitePluginUniOptions { compiler?: TemplateCompiler compilerOptions?: { + miniProgram?: { + emitFile?: (emittedFile: EmittedFile) => string + } isNativeTag: ParserOptions['isNativeTag'] isCustomElement: ParserOptions['isCustomElement'] directiveTransforms?: CompilerOptions['directiveTransforms'] 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 30ab78417..c805a67e7 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 @@ -178,14 +178,14 @@ export function cssPlugin(config: ResolvedConfig): Plugin { } } -function normalizeCssChunkFilename(id: string) { +function normalizeCssChunkFilename(id: string, extname: string = '.css') { return normalizePath( path.relative( process.env.UNI_INPUT_DIR, id .split('?')[0] - .replace(EXTNAME_VUE_RE, '.css') - .replace(EXTNAME_JS_RE, '.css') + .replace(EXTNAME_VUE_RE, extname) + .replace(EXTNAME_JS_RE, extname) ) ) } @@ -228,7 +228,7 @@ function findCssModuleIds( */ export function cssPostPlugin( config: ResolvedConfig, - { appCss }: { appCss?: string } + { appCss, extname }: { appCss?: string; extname: string } ): Plugin { // styles initialization in buildStart causes a styling loss in watch const styles: Map = new Map() @@ -259,11 +259,11 @@ export function cssPostPlugin( moduleIds.forEach((id) => { if (id === mainPath) { // 全局样式 - cssChunks.set('app.css', findCssModuleIds.call(this, id)) + cssChunks.set('app' + extname, findCssModuleIds.call(this, id)) } else if (id.includes('mpType=page')) { // 页面样式 cssChunks.set( - normalizeCssChunkFilename(id), + normalizeCssChunkFilename(id, extname), findCssModuleIds.call(this, id) ) } diff --git a/packages/uni-cli-shared/src/vite/utils/plugin.ts b/packages/uni-cli-shared/src/vite/utils/plugin.ts index 3a3af20b8..75f90de19 100644 --- a/packages/uni-cli-shared/src/vite/utils/plugin.ts +++ b/packages/uni-cli-shared/src/vite/utils/plugin.ts @@ -19,9 +19,9 @@ export function injectCssPlugin(config: ResolvedConfig) { export function injectCssPostPlugin( config: ResolvedConfig, - { appCss }: { appCss?: string } + { appCss, extname }: { appCss?: string; extname: string } ) { - replacePlugins([cssPostPlugin(config, { appCss })], config) + replacePlugins([cssPostPlugin(config, { appCss, extname })], config) } export function replacePlugins(plugins: Plugin[], config: ResolvedConfig) { diff --git a/packages/uni-mp-compiler/src/compile.ts b/packages/uni-mp-compiler/src/compile.ts index 1a3f102a0..f572d59dc 100644 --- a/packages/uni-mp-compiler/src/compile.ts +++ b/packages/uni-mp-compiler/src/compile.ts @@ -48,8 +48,11 @@ export function baseCompile(template: string, options: CompilerOptions = {}) { }) ) const result = extend(generate(context.scope, options), { ast }) - if (options.filename && options.emitFile) { - genTemplate(ast, { filename: options.filename, emitFile: options.emitFile }) + if (options.filename && options.miniProgram?.emitFile) { + genTemplate(ast, { + filename: options.filename, + emitFile: options.miniProgram.emitFile, + }) } return result diff --git a/packages/uni-mp-compiler/src/options.ts b/packages/uni-mp-compiler/src/options.ts index 21df158df..87beac914 100644 --- a/packages/uni-mp-compiler/src/options.ts +++ b/packages/uni-mp-compiler/src/options.ts @@ -60,7 +60,9 @@ export interface CodegenOptions extends SharedTransformCodegenOptions { scopeId?: string | null runtimeModuleName?: string runtimeGlobalName?: string - emitFile?: (emittedFile: EmittedFile) => string + miniProgram?: { + emitFile?: (emittedFile: EmittedFile) => string + } } export interface TemplateCodegenOptions { diff --git a/packages/uni-mp-vite/src/index.ts b/packages/uni-mp-vite/src/index.ts index cb89e9bd1..1aaaf55a6 100644 --- a/packages/uni-mp-vite/src/index.ts +++ b/packages/uni-mp-vite/src/index.ts @@ -3,6 +3,7 @@ import { uniMainJsPlugin } from './plugins/mainJs' import { uniManifestJsonPlugin } from './plugins/manifestJson' import { uniPagesJsonPlugin } from './plugins/pagesJson' import { uniVirtualPlugin } from './plugins/virtual' +export { UniMiniProgramPluginOptions } from './plugin' export default (options: UniMiniProgramPluginOptions) => { return [ uniMainJsPlugin(options), diff --git a/packages/uni-mp-vite/src/plugin/build.ts b/packages/uni-mp-vite/src/plugin/build.ts index 4d14b03cd..20bf90400 100644 --- a/packages/uni-mp-vite/src/plugin/build.ts +++ b/packages/uni-mp-vite/src/plugin/build.ts @@ -1,7 +1,9 @@ +import fs from 'fs' import path from 'path' import { UserConfig } from 'vite' import { + emptyDir, isCSSRequest, normalizePath, resolveMainPathOnce, @@ -16,8 +18,14 @@ import { export function buildOptions(): UserConfig['build'] { const inputDir = process.env.UNI_INPUT_DIR + const outputDir = process.env.UNI_OUTPUT_DIR + // 开始编译时，清空输出目录 + if (fs.existsSync(outputDir)) { + emptyDir(outputDir) + } return { // sourcemap: 'inline', // TODO + emptyOutDir: false, // 不清空输出目录，否则会影响自定义的一些文件输出，比如wxml assetsInlineLimit: 0, // TODO lib: { entry: resolveMainPathOnce(inputDir), diff --git a/packages/uni-mp-vite/src/plugin/configResolved.ts b/packages/uni-mp-vite/src/plugin/configResolved.ts index d69adf709..317c76f3b 100644 --- a/packages/uni-mp-vite/src/plugin/configResolved.ts +++ b/packages/uni-mp-vite/src/plugin/configResolved.ts @@ -6,12 +6,18 @@ import { injectCssPlugin, injectCssPostPlugin, } from '@dcloudio/uni-cli-shared' +import { UniMiniProgramPluginOptions } from '.' -export const configResolved: Plugin['configResolved'] = (config) => { - removePlugins('vite:import-analysis', config) - injectCssPlugin(config) - injectCssPostPlugin(config, { - appCss: '', - }) - injectAssetPlugin(config) +export function createConfigResolved({ + style: { extname }, +}: UniMiniProgramPluginOptions): Plugin['configResolved'] { + return (config) => { + removePlugins('vite:import-analysis', config) + injectCssPlugin(config) + injectCssPostPlugin(config, { + extname, + appCss: '', + }) + injectAssetPlugin(config) + } } diff --git a/packages/uni-mp-vite/src/plugin/index.ts b/packages/uni-mp-vite/src/plugin/index.ts index 1005ffcdf..ef487a229 100644 --- a/packages/uni-mp-vite/src/plugin/index.ts +++ b/packages/uni-mp-vite/src/plugin/index.ts @@ -1,21 +1,76 @@ +import path from 'path' +import debug from 'debug' +import fs from 'fs-extra' import { AliasOptions } from 'vite' -import { resolveBuiltIn, UniVitePlugin } from '@dcloudio/uni-cli-shared' +import { + EXTNAME_VUE_RE, + normalizeNodeModules, + resolveBuiltIn, + UniVitePlugin, +} from '@dcloudio/uni-cli-shared' import { uniOptions } from './uni' import { buildOptions } from './build' -import { configResolved } from './configResolved' +import { createConfigResolved } from './configResolved' +import { EmittedFile } from 'rollup' +const debugMp = debug('vite:uni:mp') export interface UniMiniProgramPluginOptions { + vite: { + alias: AliasOptions + } global: string - alias?: AliasOptions + app: { + darkmode: boolean + subpackages: boolean + } + project: { + filename: string + } + template: { + extname: string + } + style: { + extname: string + cssVars: { + '--status-bar-height': string + '--window-top': string + '--window-bottom': string + '--window-left': string + '--window-right': string + } + } + filter?: { + extname: string + tag: string + } } -export function uniMiniProgramPlugin({ - alias, -}: UniMiniProgramPluginOptions): UniVitePlugin { +export function uniMiniProgramPlugin( + options: UniMiniProgramPluginOptions +): UniVitePlugin { + const { + vite: { alias }, + template, + } = options + const emitFile: (emittedFile: EmittedFile) => string = (emittedFile) => { + if (emittedFile.type === 'asset') { + const filename = emittedFile.fileName! + const outputFilename = normalizeNodeModules( + path.resolve( + process.env.UNI_OUTPUT_DIR, + path.relative(process.env.UNI_INPUT_DIR, filename) + ) + ).replace(EXTNAME_VUE_RE, template.extname) + debugMp(outputFilename) + fs.outputFileSync(outputFilename, emittedFile.source!) + return outputFilename + } + return '' + } return { name: 'vite:uni-mp', - uni: uniOptions(), + uni: uniOptions({ emitFile }), config() { return { resolve: { @@ -27,6 +82,6 @@ export function uniMiniProgramPlugin({ build: buildOptions(), } }, - configResolved, + configResolved: createConfigResolved(options), } } diff --git a/packages/uni-mp-vite/src/plugin/uni/index.ts b/packages/uni-mp-vite/src/plugin/uni/index.ts index 94ce53c11..f25391974 100644 --- a/packages/uni-mp-vite/src/plugin/uni/index.ts +++ b/packages/uni-mp-vite/src/plugin/uni/index.ts @@ -2,15 +2,19 @@ import { isServiceNativeTag, isServiceCustomElement, } from '@dcloudio/uni-shared' +import { EmittedFile } from 'rollup' import { UniVitePlugin } from '@dcloudio/uni-cli-shared' import { TemplateCompiler } from '@vue/compiler-sfc' import * as compiler from '@dcloudio/uni-mp-compiler' -export function uniOptions(): UniVitePlugin['uni'] { +export function uniOptions(miniProgram: { + emitFile?: (emittedFile: EmittedFile) => string +}): UniVitePlugin['uni'] { return { compiler: compiler as TemplateCompiler, compilerOptions: { + miniProgram, isNativeTag: isServiceNativeTag, isCustomElement: isServiceCustomElement, }, diff --git a/packages/uni-mp-weixin/dist/uni.compiler.js b/packages/uni-mp-weixin/dist/uni.compiler.js index fce424d93..34e8dae63 100644 --- a/packages/uni-mp-weixin/dist/uni.compiler.js +++ b/packages/uni-mp-weixin/dist/uni.compiler.js @@ -17,14 +17,38 @@ const uniMiniProgramWeixinPlugin = { }; }, }; -var index = [ - uniMiniProgramWeixinPlugin, - ...initMiniProgramPlugin__default["default"]({ - global: 'wx', +const options = { + vite: { alias: { 'uni-mp-runtime': uniCliShared.resolveBuiltIn('@dcloudio/uni-mp-weixin/dist/uni.mp.esm.js'), }, - }), -]; + }, + global: 'wx', + app: { + darkmode: true, + subpackages: true, + }, + project: { + filename: 'project.config.json', + }, + template: { + extname: '.wxml', + }, + style: { + extname: '.wxss', + cssVars: { + '--status-bar-height': '25px', + '--window-top': '0px', + '--window-bottom': '0px', + '--window-left': '0px', + '--window-right': '0px', + }, + }, + filter: { + extname: '.wxs', + tag: 'wxs', + }, +}; +var index = [uniMiniProgramWeixinPlugin, ...initMiniProgramPlugin__default["default"](options)]; module.exports = index; diff --git a/packages/uni-mp-weixin/src/plugin/index.ts b/packages/uni-mp-weixin/src/plugin/index.ts index 8cbf8fff4..244819e6a 100644 --- a/packages/uni-mp-weixin/src/plugin/index.ts +++ b/packages/uni-mp-weixin/src/plugin/index.ts @@ -1,6 +1,8 @@ import { Plugin } from 'vite' import { resolveBuiltIn } from '@dcloudio/uni-cli-shared' -import initMiniProgramPlugin from '@dcloudio/uni-mp-vite' +import initMiniProgramPlugin, { + UniMiniProgramPluginOptions, +} from '@dcloudio/uni-mp-vite' const uniMiniProgramWeixinPlugin: Plugin = { name: 'vite:uni-mp-weixin', @@ -13,14 +15,39 @@ const uniMiniProgramWeixinPlugin: Plugin = { }, } -export default [ - uniMiniProgramWeixinPlugin, - ...initMiniProgramPlugin({ - global: 'wx', +const options: UniMiniProgramPluginOptions = { + vite: { alias: { 'uni-mp-runtime': resolveBuiltIn( '@dcloudio/uni-mp-weixin/dist/uni.mp.esm.js' ), }, - }), -] + }, + global: 'wx', + app: { + darkmode: true, + subpackages: true, + }, + project: { + filename: 'project.config.json', + }, + template: { + extname: '.wxml', + }, + style: { + extname: '.wxss', + cssVars: { + '--status-bar-height': '25px', + '--window-top': '0px', + '--window-bottom': '0px', + '--window-left': '0px', + '--window-right': '0px', + }, + }, + filter: { + extname: '.wxs', + tag: 'wxs', + }, +} + +export default [uniMiniProgramWeixinPlugin, ...initMiniProgramPlugin(options)] diff --git a/packages/vite-plugin-uni/src/utils/plugin.ts b/packages/vite-plugin-uni/src/utils/plugin.ts index cd7a369a3..568fafcab 100644 --- a/packages/vite-plugin-uni/src/utils/plugin.ts +++ b/packages/vite-plugin-uni/src/utils/plugin.ts @@ -39,16 +39,7 @@ export function initPluginUniOptions(UniVitePlugins: UniVitePlugin[]) { compiler = pluginTemplateCompiler } if (pluginCompilerOptions) { - if (pluginCompilerOptions.isNativeTag) { - compilerOptions.isNativeTag = pluginCompilerOptions.isNativeTag - } - if (pluginCompilerOptions.isCustomElement) { - compilerOptions.isCustomElement = pluginCompilerOptions.isCustomElement - } - if (pluginCompilerOptions.directiveTransforms) { - compilerOptions.directiveTransforms = - pluginCompilerOptions.directiveTransforms - } + extend(compilerOptions, pluginCompilerOptions) } if (pluginTransformEvent) { extend(transformEvent, pluginTransformEvent) diff --git a/packages/vite-plugin-uni/src/vue/options.ts b/packages/vite-plugin-uni/src/vue/options.ts index aad465fe8..5c583a3f5 100644 --- a/packages/vite-plugin-uni/src/vue/options.ts +++ b/packages/vite-plugin-uni/src/vue/options.ts @@ -72,6 +72,7 @@ export function initPluginVueOptions( const { compiler, compilerOptions: { + miniProgram, isNativeTag, isCustomElement, nodeTransforms, @@ -81,6 +82,9 @@ export function initPluginVueOptions( if (compiler) { templateOptions.compiler = compiler } + if (miniProgram) { + ;(compilerOptions as any).miniProgram = miniProgram + } compilerOptions.isNativeTag = isNativeTag compilerOptions.isCustomElement = isCustomElement if (directiveTransforms) { -- GitLab