Compare commits

...

2 Commits

Author SHA1 Message Date
yutent d84a59a5e5 1.3.4 2024-04-01 18:26:19 +08:00
yutent 66925dfbf2 适配es2024搞出来的ESM语法变化 2024-04-01 18:26:00 +08:00
5 changed files with 52 additions and 39 deletions

View File

@ -159,7 +159,6 @@ export function parseJs(
if (name.startsWith('@/')) { if (name.startsWith('@/')) {
name = name.replace('@/', urlJoin(DEPLOY_PATH, ASSETS_DIR)) name = name.replace('@/', urlJoin(DEPLOY_PATH, ASSETS_DIR))
} }
let isJson = name.endsWith('.json')
if (!imports[name]) { if (!imports[name]) {
if (name.startsWith('./') || name.startsWith('../')) { if (name.startsWith('./') || name.startsWith('../')) {
@ -179,7 +178,6 @@ export function parseJs(
if ( if (
!name.endsWith('.js') && !name.endsWith('.js') &&
!isJson &&
!name.endsWith('.mjs') && !name.endsWith('.mjs') &&
!name.endsWith('.vue') !name.endsWith('.vue')
) { ) {
@ -202,14 +200,9 @@ export function parseJs(
_alias = ' default ' + alias.replace('* as', '').trim() _alias = ' default ' + alias.replace('* as', '').trim()
} }
if (LEGACY_MODE && isJson) { _import = `import ${alias} from '${name}'`
_import = `const ${alias} = await __fite_import('${name}', import.meta.url)`
} else {
_import = `import ${alias} from '${name}'${
isJson ? ' assert { type: "json" }' : ''
}`
}
_import += t === 'export' ? `\nexport ${_alias}` : '' _import += t === 'export' ? `\nexport ${_alias}` : ''
return _import return _import
} }
) )
@ -220,6 +213,9 @@ export function parseJs(
if (name.startsWith('@/')) { if (name.startsWith('@/')) {
name = name.replace('@/', urlJoin(DEPLOY_PATH, ASSETS_DIR)) name = name.replace('@/', urlJoin(DEPLOY_PATH, ASSETS_DIR))
} }
if (name.endsWith('.json')) {
name += '.js'
}
return `import('${name}')` return `import('${name}')`
}) })
.replace(/import (["'])(.*?)\1/g, function (m, q, name) { .replace(/import (["'])(.*?)\1/g, function (m, q, name) {
@ -235,20 +231,28 @@ export function parseJs(
let _name = name.replace(/\\/g, '/').replace('@/', '') let _name = name.replace(/\\/g, '/').replace('@/', '')
let tmp = `style_${uuid()}` let tmp = `style_${uuid()}`
// 因为esm语法的变更, 原先的 import xx from xx assets {type: css} 变为了 with
// 而这个语法的变化, 构建工具无法做版本判断, 故, 统一降级到fetch()加载
if (LEGACY_MODE) { if (LEGACY_MODE) {
fixedStyle += `${tmp}.then(r => { fixedStyle +=
let stylesheet = document.createElement('style') `{\n` +
stylesheet.setAttribute('name', '${_name}') ` let stylesheet = document.createElement('style');\n` +
stylesheet.textContent = r ` stylesheet.setAttribute('name', '${_name}');\n` +
document.head.appendChild(stylesheet) ` stylesheet.textContent = ${tmp};\n` +
}) ` document.head.appendChild(stylesheet);\n` +
` `}\n`
return `const ${tmp} = __fite_import('${name}', import.meta.url)`
} else { } else {
fixedStyle += `${tmp}.path = '${_name}'\n__sheets__.push(${tmp})\n` // CSSStyleSheet.replaceSync 需要FF v101, Safari 16.4才支持
fixedStyle +=
return `import ${tmp} from '${name}' assert { type: 'css' }` `{\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 { } else {
if (name.startsWith('@/')) { if (name.startsWith('@/')) {
name = name.replace('@/', urlJoin(DEPLOY_PATH, ASSETS_DIR)) name = name.replace('@/', urlJoin(DEPLOY_PATH, ASSETS_DIR))
@ -272,7 +276,6 @@ export function parseJs(
if ( if (
!name.endsWith('.js') && !name.endsWith('.js') &&
!name.endsWith('.json') &&
!name.endsWith('.mjs') && !name.endsWith('.mjs') &&
!name.endsWith('.vue') !name.endsWith('.vue')
) { ) {
@ -410,13 +413,13 @@ function render(_ctx, _cache) {
` `
} else { } else {
output += ` output += `
{ {
let stylesheet = new CSSStyleSheet() let stylesheet = new CSSStyleSheet()
stylesheet.path = '${filename}' stylesheet.path = '${filename}'
stylesheet.replaceSync(\`${scss}\`) stylesheet.replaceSync(\`${scss}\`)
__sheets__.push(stylesheet) __sheets__.push(stylesheet)
} }
document.adoptedStyleSheets = __sheets__ document.adoptedStyleSheets = __sheets__
` `
} }
} }
@ -439,9 +442,7 @@ export function parseHtml(html, { page, imports, entry, LEGACY_MODE }) {
`${ `${
process.env.NODE_ENV === 'development' process.env.NODE_ENV === 'development'
? ` <script>${minify(createHmrScript(LEGACY_MODE))}</script>\n` ? ` <script>${minify(createHmrScript(LEGACY_MODE))}</script>\n`
: LEGACY_MODE : ` <script>${minify(LEGACY_POLYFILL)}</script>\n`
? ` <script>${minify(LEGACY_POLYFILL)}</script>\n`
: ''
}</head>` }</head>`
) )
.replace('{{title}}', page.title || '') .replace('{{title}}', page.title || '')

View File

@ -66,14 +66,15 @@ export async function compileFiles(
}) })
} }
break break
// es2024之后esm的语法的assets 变成了with, 对构建工具来说无法适配到具体的浏览器
// 故把json文件改成js文件
case '.json': case '.json':
{ {
let code = fs.cat(path) 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 break

View File

@ -40,12 +40,11 @@ export const LEGACY_POLYFILL = `!(function(){
} }
window.__fite_import = function(url,relPath){ window.__fite_import = function(url,relPath){
let isJson = url.endsWith('.json')
let absPath = relPath.split('/').slice(0, -1).join('/') let absPath = relPath.split('/').slice(0, -1).join('/')
let req let req
if(url.startsWith('./') || url.startsWith('../')) { if(url.startsWith('./') || url.startsWith('../')) {
url = join(absPath, url) url = join(absPath, url)
} }
return window.fetch(url).then(r => isJson ? r.json() : r.text()) return window.fetch(url).then(r => r.text())
} }
})()` })()`

View File

@ -255,11 +255,16 @@ export default async function createServer(root = '', conf = {}) {
} }
break break
case 'json':
case 'js': case 'js':
{ {
let rpath = pathname.replace('@/', '') let rpath = pathname.replace('@/', '')
let file let file
let isJson = false
if (rpath.endsWith('json.js')) {
isJson = true
rpath = rpath.slice(0, -3)
}
if (IS_MPA) { if (IS_MPA) {
// 判断前后2个值相等, 避免出现目录名和页面名字相同时走错逻辑 // 判断前后2个值相等, 避免出现目录名和页面名字相同时走错逻辑
@ -283,7 +288,14 @@ export default async function createServer(root = '', conf = {}) {
res.end('') res.end('')
return 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 = parseJs(
code + '', code + '',
conf.imports, conf.imports,

View File

@ -1,7 +1,7 @@
{ {
"name": "fite", "name": "fite",
"type": "module", "type": "module",
"version": "1.3.0", "version": "1.3.1",
"bin": { "bin": {
"fite": "index.js" "fite": "index.js"
}, },