feat(compiler): implement module alias resolution and enhance CSS import handling (#15)

Author: dos1in

fe/packages/compiler/__tests__/require-path-resolution.spec.js

@@ -115,6 +115,49 @@ describe('Require Path Resolution', () => {
 		expect(compiledCode).not.toMatch(/require\(['"]\.\//)
 	})
 
+	it('should resolve app alias require paths correctly', async () => {
+		fs.mkdirSync('pages/alias-test', { recursive: true })
+		fs.mkdirSync('utils', { recursive: true })
+
+		fs.writeFileSync('app.json', JSON.stringify({
+			pages: ['pages/alias-test/index'],
+			resolveAlias: {
+				'~/*': '/*',
+			},
+		}))
+
+		fs.writeFileSync('utils/util.js', `
+			module.exports = {
+				formatTime: function(time) {
+					return time.toISOString()
+				}
+			}
+		`)
+
+		fs.writeFileSync('pages/alias-test/index.js', `
+			const util = require('~/utils/util.js')
+			Page({
+				onLoad() {
+					console.log(util.formatTime(new Date()))
+				}
+			})
+		`)
+
+		fs.writeFileSync('pages/alias-test/index.json', JSON.stringify({
+			navigationBarTitleText: 'Alias Test'
+		}))
+
+		storeInfo(tempDir)
+
+		const progress = { completedTasks: 0 }
+		const result = await compileJS([{ path: 'pages/alias-test/index' }], null, null, progress)
+
+		const pageModule = result.find(module => module.path === 'pages/alias-test/index')
+		expect(pageModule).toBeDefined()
+		expect(pageModule.code).toContain('require("/utils/util")')
+		expect(pageModule.code).not.toContain('require("~/utils/util.js")')
+	})
+
 	it('should handle npm package requires correctly', async () => {
 		// 创建测试文件结构
 		fs.mkdirSync('pages/npm-test', { recursive: true })

fe/packages/compiler/__tests__/style-compiler.spec.js

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { ensureImportSemicolons, removeBaseComponentScope } from '../src/core/style-compiler'
+import { ensureImportSemicolons, normalizeRootStyleImports, removeBaseComponentScope, resolveStyleImportPath } from '../src/core/style-compiler'
 
 describe('ensureImportSemicolons', () => {
 	it('should add semicolons to @import statements that do not have them', () => {
@@ -220,3 +220,17 @@ describe('removeBaseComponentScope', () => {
 		expect(result).toEqual(expected)
 	})
 })
+
+describe('style import path helpers', () => {
+	it('应该将根路径 import 解析到小程序项目根目录', () => {
+		const result = resolveStyleImportPath('/tmp/app/pages/home/index.less', '/variable.less', '/tmp/app')
+		expect(result.endsWith('/variable.less')).toBe(true)
+		expect(result.includes('/pages/home/')).toBe(false)
+	})
+
+	it('应该将根路径 less import 重写为绝对路径', () => {
+		const result = normalizeRootStyleImports('@import "/variable.less";', '/tmp/app')
+		expect(result).toContain('/variable.less')
+		expect(result).not.toContain('@import "/variable.less";')
+	})
+})

fe/packages/compiler/__tests__/view-compiler.spec.js

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { generateVModelTemplate, generateSlotDirective, parseBraceExp, parseClassRules, parseKeyExpression, processWxsContent, splitWithBraces } from '../src/core/view-compiler'
+import { generateVModelTemplate, generateSlotDirective, parseBraceExp, parseClassRules, parseKeyExpression, parseTemplateDataExp, processWxsContent, splitWithBraces } from '../src/core/view-compiler'
 
 describe('parseKeyExpression - 解析 key 表达式', () => {
 	it('默认索引名 index - 应该直接返回 index', () => {
@@ -127,6 +127,18 @@ describe('parseBraceExp - 解析双花括号表达式', () => {
 	})
 })
 
+describe('parseTemplateDataExp - 解析 template data 对象表达式', () => {
+	it('应该保留对象字面量中的三元表达式和展开语法', () => {
+		expect(
+			parseTemplateDataExp('{{tClass: foo ? bar : baz, src: item, ...imageProps, bindload: \'onImageLoad\'}}'),
+		).toEqual('{tClass: foo ? bar : baz, src: item, ...imageProps, bindload: \'onImageLoad\'}')
+	})
+
+	it('应该保留对象简写属性', () => {
+		expect(parseTemplateDataExp('{{prefix, classPrefix, style}}')).toEqual('{prefix, classPrefix, style}')
+	})
+})
+
 describe('splitWithBraces - 按空格分割字符串（保留花括号）', () => {
 	it('简单空格分割 - 应该返回数组', () => {
 		expect(splitWithBraces('a b')).toEqual(['a', 'b'])

fe/packages/compiler/src/core/logic-compiler.js

@@ -8,7 +8,7 @@ import MagicString from 'magic-string'
 import { transform } from 'esbuild'
 import ts from 'typescript'
 import { hasCompileInfo } from '../common/utils.js'
-import { getAppConfigInfo, getComponent, getContentByPath, getNpmResolver, getTargetPath, getWorkPath, resetStoreInfo } from '../env.js'
+import { getAppConfigInfo, getComponent, getContentByPath, getNpmResolver, getTargetPath, getWorkPath, resetStoreInfo, resolveAppAlias } from '../env.js'
 
 // 用于缓存已处理的模块
 const processedModules = new Set()
@@ -447,14 +447,6 @@ function resolveDependencyId(specifier, modulePath, allowAbsolute) {
 		}
 	}
 
-	if (specifier.startsWith('@') || isBareModuleSpecifier(specifier)) {
-		const npmModuleId = resolveNpmModuleId(specifier, modulePath)
-		return {
-			id: npmModuleId || specifier,
-			shouldProcess: Boolean(npmModuleId),
-		}
-	}
-
 	if (specifier.startsWith('./') || specifier.startsWith('../')) {
 		return {
 			id: resolveRelativeModuleId(specifier, modulePath),
@@ -469,6 +461,22 @@ function resolveDependencyId(specifier, modulePath, allowAbsolute) {
 		}
 	}
 
+	const aliasResolved = resolveAppAlias(specifier)
+	if (aliasResolved) {
+		return {
+			id: normalizeModuleId(aliasResolved),
+			shouldProcess: true,
+		}
+	}
+
+	if (specifier.startsWith('@') || isBareModuleSpecifier(specifier)) {
+		const npmModuleId = resolveNpmModuleId(specifier, modulePath)
+		return {
+			id: npmModuleId || specifier,
+			shouldProcess: Boolean(npmModuleId),
+		}
+	}
+
 	return { id: specifier, shouldProcess: false }
 }
 

fe/packages/compiler/src/core/style-compiler.js

@@ -136,19 +136,19 @@ async function enhanceCSS(module) {
 	}
 
 	// 预处理器编译
-	let processedCSS = inputCSS
+	let processedCSS = normalizeRootStyleImports(inputCSS)
 	const ext = path.extname(absolutePath).toLowerCase()
 
 	try {
 		if (ext === '.less') {
-			const result = await less.render(inputCSS, {
+			const result = await less.render(processedCSS, {
 				filename: absolutePath,
-				paths: [path.dirname(absolutePath)],
+				paths: [path.dirname(absolutePath), getWorkPath()],
 			})
 			processedCSS = result.css
 		} else if (ext === '.scss' || ext === '.sass') {
-			const result = sass.compileString(inputCSS, {
-				loadPaths: [path.dirname(absolutePath)],
+			const result = sass.compileString(processedCSS, {
+				loadPaths: [path.dirname(absolutePath), getWorkPath()],
 				syntax: ext === '.sass' ? 'indented' : 'scss',
 			})
 			processedCSS = result.css
@@ -175,7 +175,7 @@ async function enhanceCSS(module) {
 			// @import 样式导入
 			// 替换字符串首尾的引号
 			const str = node.params.replace(/^['"]|['"]$/g, '')
-			const importFullPath = path.resolve(absolutePath, `../${str}`)
+			const importFullPath = resolveStyleImportPath(absolutePath, str)
 
 			node.remove()
 
@@ -267,6 +267,19 @@ function getAbsolutePath(modulePath) {
 	}
 }
 
+function resolveStyleImportPath(absolutePath, importPath, workPath = getWorkPath()) {
+	if (importPath.startsWith('/')) {
+		return path.join(workPath, importPath)
+	}
+	return path.resolve(path.dirname(absolutePath), importPath)
+}
+
+function normalizeRootStyleImports(source, workPath = getWorkPath()) {
+	return source.replace(/(@import\s+(?:\(.*?\)\s*)?(?:url\()?['"])(\/[^'")]+)(['"]\)?)/g, (_, prefix, importPath, suffix) => {
+		return `${prefix}${path.join(workPath, importPath)}${suffix}`
+	})
+}
+
 /**
  * 移除基础组件选择器的 scoped 属性
  * @param {string} css - 包含 scoped 属性的 CSS
@@ -332,4 +345,4 @@ function processHostSelector(selector, moduleId) {
 		.replace(/:host(?=\.|#|:)/g, `[data-v-${moduleId}]`)
 }
 
-export { compileSS, ensureImportSemicolons, processHostSelector, removeBaseComponentScope }
+export { compileSS, ensureImportSemicolons, normalizeRootStyleImports, processHostSelector, removeBaseComponentScope, resolveStyleImportPath }

fe/packages/compiler/src/core/view-compiler.js

@@ -1291,10 +1291,9 @@ function getProps(attrs, tag, components) {
 			}
 		}
 		else if (isWrappedByBraces(value)) {
-			let pVal = parseBraceExp(value)
-			if (tag === 'template' && name === 'data') {
-				pVal = `{${pVal}}`
-			}
+			const pVal = tag === 'template' && name === 'data'
+				? parseTemplateDataExp(value)
+				: parseBraceExp(value)
 
 			// 如果是自定义组件的属性绑定，记录绑定关系
 			if (components && components[tag]) {
@@ -1616,6 +1615,19 @@ function parseBraceExp(exp) {
 	return group.join('').replace(/^\+|\+$/g, '')
 }
 
+/**
+ * 解析 template 的 data 对象表达式，保留对象字面量和内部三元表达式
+ * @param {string} exp
+ * @returns {string} 解析后的对象表达式字符串
+ */
+function parseTemplateDataExp(exp) {
+	const matchResult = exp.trim().match(/^\{\{([\s\S]*)\}\}$/)
+	if (matchResult) {
+		return `{${matchResult[1].trim()}}`
+	}
+	return `{${parseBraceExp(exp)}}`
+}
+
 function transTagWxs($, scriptModule, filePath) {
 	let wxsNodes = $('wxs')
 	if (wxsNodes.length === 0) {
@@ -1861,6 +1873,7 @@ export {
 	parseBraceExp,
 	parseClassRules,
 	parseKeyExpression,
+	parseTemplateDataExp,
 	processIncludeConditionalAttrs,
 	processWxsContent,
 	splitWithBraces,

fe/packages/compiler/src/env.js

@@ -244,6 +244,11 @@ function storeComponentConfig(pageJsonContent, pageFilePath) {
  * @param {string} src
  */
 function getModuleId(src, pageFilePath) {
+	const resolvedAlias = resolveAppAlias(src)
+	if (resolvedAlias) {
+		return resolvedAlias
+	}
+
 	if (!npmResolver) {
 		// 如果 npm 解析器未初始化，使用原有逻辑
 		const lastIndex = pageFilePath.lastIndexOf('/')
@@ -257,6 +262,28 @@ function getModuleId(src, pageFilePath) {
 	return npmResolver.resolveComponentPath(src, pageFilePath)
 }
 
+function resolveAppAlias(src) {
+	const resolveAlias = configInfo.appInfo?.resolveAlias
+	if (!resolveAlias || typeof src !== 'string') {
+		return null
+	}
+
+	for (const [alias, target] of Object.entries(resolveAlias)) {
+		if (alias.endsWith('/*') && target.endsWith('/*')) {
+			const aliasPrefix = alias.slice(0, -1)
+			const targetPrefix = target.slice(0, -1)
+			if (src.startsWith(aliasPrefix)) {
+				return src.replace(aliasPrefix, targetPrefix)
+			}
+		}
+		else if (src === alias) {
+			return target
+		}
+	}
+
+	return null
+}
+
 function getTargetPath() {
 	return pathInfo.targetPath
 }
@@ -356,6 +383,7 @@ export {
 	getTargetPath,
 	getWorkPath,
 	resetStoreInfo,
+	resolveAppAlias,
 	storeInfo,
 	storeProjectConfig,
 }