diff --git a/lib/compile-vue.js b/lib/compile-vue.js index 0247722..6e35595 100644 --- a/lib/compile-vue.js +++ b/lib/compile-vue.js @@ -159,7 +159,6 @@ export function parseJs( if (name.startsWith('@/')) { name = name.replace('@/', urlJoin(DEPLOY_PATH, ASSETS_DIR)) } - let isJson = name.endsWith('.json') if (!imports[name]) { if (name.startsWith('./') || name.startsWith('../')) { @@ -179,7 +178,6 @@ export function parseJs( if ( !name.endsWith('.js') && - !isJson && !name.endsWith('.mjs') && !name.endsWith('.vue') ) { @@ -202,14 +200,9 @@ export function parseJs( _alias = ' default ' + alias.replace('* as', '').trim() } - if (LEGACY_MODE && isJson) { - _import = `const ${alias} = await __fite_import('${name}', import.meta.url)` - } else { - _import = `import ${alias} from '${name}'${ - isJson ? ' assert { type: "json" }' : '' - }` - } + _import = `import ${alias} from '${name}'` _import += t === 'export' ? `\nexport ${_alias}` : '' + return _import } ) @@ -220,6 +213,9 @@ export function parseJs( if (name.startsWith('@/')) { name = name.replace('@/', urlJoin(DEPLOY_PATH, ASSETS_DIR)) } + if (name.endsWith('.json')) { + name += '.js' + } return `import('${name}')` }) .replace(/import (["'])(.*?)\1/g, function (m, q, name) { @@ -235,20 +231,28 @@ export function parseJs( let _name = name.replace(/\\/g, '/').replace('@/', '') let tmp = `style_${uuid()}` + // 因为esm语法的变更, 原先的 import xx from xx assets {type: css} 变为了 with + // 而这个语法的变化, 构建工具无法做版本判断, 故, 统一降级到fetch()加载 if (LEGACY_MODE) { - fixedStyle += `${tmp}.then(r => { - let stylesheet = document.createElement('style') - stylesheet.setAttribute('name', '${_name}') - stylesheet.textContent = r - document.head.appendChild(stylesheet) -}) -` - return `const ${tmp} = __fite_import('${name}', import.meta.url)` + fixedStyle += + `{\n` + + ` let stylesheet = document.createElement('style');\n` + + ` stylesheet.setAttribute('name', '${_name}');\n` + + ` stylesheet.textContent = ${tmp};\n` + + ` document.head.appendChild(stylesheet);\n` + + `}\n` } else { - fixedStyle += `${tmp}.path = '${_name}'\n__sheets__.push(${tmp})\n` - - return `import ${tmp} from '${name}' assert { type: 'css' }` + // CSSStyleSheet.replaceSync 需要FF v101, Safari 16.4才支持 + fixedStyle += + `{\n` + + ` let stylesheet = new CSSStyleSheet();\n` + + ` stylesheet.path = '${_name}';\n` + + ` stylesheet.replaceSync(${tmp} );\n` + + ` __sheets__.push(stylesheet);\n` + + ` document.adoptedStyleSheets = __sheets__;\n` + + `}\n` } + return `const ${tmp} = await __fite_import('${name}', import.meta.url)` } else { if (name.startsWith('@/')) { name = name.replace('@/', urlJoin(DEPLOY_PATH, ASSETS_DIR)) @@ -272,7 +276,6 @@ export function parseJs( if ( !name.endsWith('.js') && - !name.endsWith('.json') && !name.endsWith('.mjs') && !name.endsWith('.vue') ) { @@ -410,13 +413,13 @@ function render(_ctx, _cache) { ` } else { output += ` - { - let stylesheet = new CSSStyleSheet() - stylesheet.path = '${filename}' - stylesheet.replaceSync(\`${scss}\`) - __sheets__.push(stylesheet) - } - document.adoptedStyleSheets = __sheets__ +{ + let stylesheet = new CSSStyleSheet() + stylesheet.path = '${filename}' + stylesheet.replaceSync(\`${scss}\`) + __sheets__.push(stylesheet) +} +document.adoptedStyleSheets = __sheets__ ` } } @@ -439,9 +442,7 @@ export function parseHtml(html, { page, imports, entry, LEGACY_MODE }) { `${ process.env.NODE_ENV === 'development' ? ` \n` - : LEGACY_MODE - ? ` \n` - : '' + : ` \n` }` ) .replace('{{title}}', page.title || '') diff --git a/lib/compile.js b/lib/compile.js index a0f0dd0..85a041f 100644 --- a/lib/compile.js +++ b/lib/compile.js @@ -66,14 +66,15 @@ export async function compileFiles( }) } break - + // es2024之后esm的语法的assets 变成了with, 对构建工具来说无法适配到具体的浏览器 + // 故把json文件改成js文件 case '.json': { let code = fs.cat(path) - code = JSON.stringify(JSON.parse(code + '')) + code = 'export default ' + JSON.stringify(JSON.parse(code + '')) - fs.echo(code, join(dist, 'assets/', pageDir, it.name)) + fs.echo(code, join(dist, 'assets/', pageDir, it.name + '.js')) } break diff --git a/lib/constants.js b/lib/constants.js index 95ad83b..9652e52 100644 --- a/lib/constants.js +++ b/lib/constants.js @@ -40,12 +40,11 @@ export const LEGACY_POLYFILL = `!(function(){ } window.__fite_import = function(url,relPath){ - let isJson = url.endsWith('.json') let absPath = relPath.split('/').slice(0, -1).join('/') let req if(url.startsWith('./') || url.startsWith('../')) { url = join(absPath, url) } - return window.fetch(url).then(r => isJson ? r.json() : r.text()) + return window.fetch(url).then(r => r.text()) } })()` diff --git a/lib/dev.js b/lib/dev.js index 0af595d..59696c7 100644 --- a/lib/dev.js +++ b/lib/dev.js @@ -255,11 +255,16 @@ export default async function createServer(root = '', conf = {}) { } break - case 'json': case 'js': { let rpath = pathname.replace('@/', '') let file + let isJson = false + + if (rpath.endsWith('json.js')) { + isJson = true + rpath = rpath.slice(0, -3) + } if (IS_MPA) { // 判断前后2个值相等, 避免出现目录名和页面名字相同时走错逻辑 @@ -283,7 +288,14 @@ export default async function createServer(root = '', conf = {}) { res.end('') return } - if (ext === 'js') { + if (isJson) { + try { + code = + 'export default ' + JSON.stringify(JSON.parse(code + '')) + } catch (err) { + console.log('%s 语法错误: %s', rpath, red(err.message)) + } + } else { code = parseJs( code + '', conf.imports,