Compare commits

..

No commits in common. "master" and "dev" have entirely different histories.
master ... dev

9 changed files with 71 additions and 214 deletions

View File

@ -19,7 +19,6 @@ const IS_WINDOWS = process.platform === 'win32'
const CONFIG_FILE = normalize(join(WORK_SPACE, 'fite.config.js'))
const PROTOCOL = IS_WINDOWS ? 'file://' : ''
const NODE_VERSION = process.versions.node.split('.').map(n => +n)
const ABS_CONFIG_FILEPATH = PROTOCOL + CONFIG_FILE
let args = process.argv.slice(2)
let mode = args.shift() || 'prod'
@ -41,9 +40,8 @@ switch (mode) {
case 'dev':
process.env.NODE_ENV = 'development'
import(ABS_CONFIG_FILEPATH)
import(PROTOCOL + CONFIG_FILE)
.then(function (conf) {
conf.default.ABS_CONFIG_FILEPATH = ABS_CONFIG_FILEPATH
createServer(WORK_SPACE, conf.default)
})
.catch(err => {
@ -54,14 +52,13 @@ switch (mode) {
case 'build':
process.env.NODE_ENV = 'production'
import(ABS_CONFIG_FILEPATH)
import(PROTOCOL + CONFIG_FILE)
.then(function (conf) {
let dist = conf.buildDir || 'dist'
if (clean && fs.isdir(dist)) {
console.log('清除dist目录...')
fs.rm(dist)
}
conf.default.ABS_CONFIG_FILEPATH = ABS_CONFIG_FILEPATH
compile(WORK_SPACE, dist, conf.default, verbose)
})
.catch(err => {

View File

@ -18,8 +18,7 @@ import {
CSS_SHEET_EXP,
V_DEEP,
PERCENT_EXP,
SHEETS_DEF,
LEGACY_POLYFILL
SHEETS_DEF
} from './constants.js'
import { createHmrScript, md5, uuid, urlJoin } from './utils.js'
@ -27,10 +26,6 @@ const OPTIONS = {
style: 'compressed'
}
function minify(code) {
return Es.transformSync(code, { minify: true }).code.trim()
}
// 处理css中的 :deep()
function parseVDeep(curr, val, scoped) {
let res = V_DEEP.exec(curr)
@ -64,7 +59,7 @@ function scopeCss(css = '', hash) {
if (last.startsWith(':')) {
output = parseVDeep(last, output, true)
} else {
output = `${last}[data-${hash}] ${output}`
output = `${last} ${output}`
}
} else {
if (last.includes(':')) {
@ -115,7 +110,7 @@ export function compileScss(file, inject = '') {
export function parseJs(
code = '',
imports,
{ IS_MPA, currentPage, IS_ENTRY, DEPLOY_PATH, LEGACY_MODE, define } = {},
{ IS_MPA, currentPage, IS_ENTRY, DEPLOY_PATH, LEGACY_MODE } = {},
filename,
linePatch = 1
) {
@ -154,7 +149,7 @@ export function parseJs(
.replace(/\r\n/g, '\n')
.replace(/process\.env\.NODE_ENV/g, `'${process.env.NODE_ENV}'`)
.replace(
/(import|export) ([^'"]*?) from (["'])(.*?)\3/g,
/(import|export) ([\w\W]*?) from (["'])(.*?)\3/g,
function (m, t, alias, q, name) {
if (name.startsWith('@/')) {
name = name.replace('@/', urlJoin(DEPLOY_PATH, ASSETS_DIR))
@ -195,15 +190,13 @@ export function parseJs(
return `${t} ${alias} from '${name}'`
}
let _alias = alias
let _import = ''
if (alias.includes('* as')) {
_alias = ' default ' + alias.replace('* as', '').trim()
}
_import = `import ${alias} from '${name}'`
_import += t === 'export' ? `\nexport ${_alias}` : ''
return _import
return `import ${alias} from '${name}'${
t === 'export' ? `\nexport ${_alias}` : ''
}`
}
)
.replace(/import\((['"])(.*?)\1\)/g, function (m, q, name) {
@ -213,9 +206,6 @@ 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) {
@ -231,30 +221,19 @@ 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 +=
`{\n` +
` let stylesheet = document.createElement('style');\n` +
` stylesheet.setAttribute('name', '${_name}');\n` +
` stylesheet.textContent = ${tmp};\n` +
` document.head.appendChild(stylesheet);\n` +
`}\n`
return `let ${tmp};\n!(async function(){\n ${tmp} = await __fite_import('${name}', import.meta.url);\n})()`
fixedStyle += `${tmp}.then(r => {
let stylesheet = document.createElement('style')
stylesheet.setAttribute('name', '${_name}')
stylesheet.textContent = r
document.head.appendChild(stylesheet)
})
`
return `const ${tmp} = window.fetch('${name}').then(r => r.text())`
} else {
// 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`
fixedStyle += `${tmp}.path = '${_name}'\n__sheets__.push(${tmp})\n`
return `const ${tmp} = await __fite_import('${name}', import.meta.url)`
return `import ${tmp} from '${name}' assert { type: 'css' }`
}
} else {
if (name.startsWith('@/')) {
@ -290,10 +269,6 @@ export function parseJs(
}
})
for (let key in define) {
code = code.replaceAll(key, define[key])
}
if (fixedStyle) {
code += '\n\n' + (IS_ENTRY ? SHEETS_DEF : '') + fixedStyle
@ -310,7 +285,7 @@ export function parseJs(
* @param file <String> 文件路径
* @return <String> 返回转换后的js代码
*/
export async function compileVue(file, imports, options = {}) {
export function compileVue(file, imports, options = {}) {
// 修正那反人类的windows路径
let filename = file.slice(options.SOURCE_DIR.length).replace(/\\/g, '/')
let code = (fs.cat(file) || '').toString().replace(/\r\n/g, '\n')
@ -340,15 +315,10 @@ export async function compileVue(file, imports, options = {}) {
} else {
css = compileScss(it[1], options.INJECT_SCSS)
}
return css
})
.join(' ')
for (let fn of options.plugin) {
scss = await fn('css', scss)
}
js = js ? js[1] : 'export default {}'
try {
@ -425,13 +395,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__
`
}
}
@ -453,8 +423,10 @@ export function parseHtml(html, { page, imports, entry, LEGACY_MODE }) {
'</head>',
`${
process.env.NODE_ENV === 'development'
? ` <script>${minify(createHmrScript(LEGACY_MODE))}</script>\n`
: ` <script>${minify(LEGACY_POLYFILL)}</script>\n`
? ` <script>${Es.transformSync(createHmrScript(LEGACY_MODE), {
minify: true
}).code.trim()}</script>\n`
: ''
}</head>`
)
.replace('{{title}}', page.title || '')

View File

@ -44,14 +44,11 @@ export async function compileFiles(
switch (it.ext) {
case '.vue':
{
let code = await compileVue(path, imports, options)
let code = compileVue(path, imports, options)
await Es.transform(code, { minify: true }).then(async ({ code }) => {
for (let fn of options.plugin) {
code = await fn('js', code)
}
await Es.transform(code, { minify: true }).then(r => {
fs.echo(
code,
r.code,
join(dist, 'assets/', pageDir, it.name.replace(/\.vue$/, '.js'))
)
})
@ -64,25 +61,11 @@ export async function compileFiles(
code = parseJs(code + '', imports, options)
await Es.transform(code, { minify: true }).then(async ({ code }) => {
for (let fn of options.plugin) {
code = await fn('js', code)
}
fs.echo(code, join(dist, 'assets/', pageDir, it.name))
await Es.transform(code, { minify: true }).then(r => {
fs.echo(r.code, join(dist, 'assets/', pageDir, it.name))
})
}
break
// es2024之后esm的语法的assets 变成了with, 对构建工具来说无法适配到具体的浏览器
// 故把json文件改成js文件
case '.json':
{
let code = fs.cat(path)
code = 'export default ' + JSON.stringify(JSON.parse(code + ''))
fs.echo(code, join(dist, 'assets/', pageDir, it.name + '.js'))
}
break
case '.scss':
case '.css':
@ -97,9 +80,6 @@ export async function compileFiles(
fs.cp(path, target)
} else {
let code = compileScss(path)
for (let fn of options.plugin) {
code = await fn('css', code)
}
fs.echo(code, target)
}
}

View File

@ -18,33 +18,3 @@ export const COMMON_HEADERS = {
export const SHEETS_DEF =
'const __sheets__ = [...document.adoptedStyleSheets];\n'
export const LEGACY_POLYFILL = `!(function(){
function join(p1, p2) {
let tmp1 = p1.split('/')
let tmp2 = p2.split('/')
if (tmp1.at(-1) === '') {
tmp1.pop()
}
while (tmp2.length) {
let tmp = tmp2.shift()
if (tmp === '.' || tmp === '') {
continue
} else if (tmp === '..') {
tmp1.pop()
} else {
tmp1.push(tmp)
}
}
return tmp1.join('/')
}
window.__fite_import = function(url,relPath){
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 => r.text())
}
})()`

View File

@ -34,7 +34,6 @@ export default async function createServer(root = '', conf = {}) {
const LEGACY_MODE = !!conf.legacy
const ENABLE_GZIP = !!conf.devServer.gzip
const { isCustomElement = defaultCustomElement } = conf.compileOptions || {}
const { plugin = [], define = {} } = conf
if (conf.imports['vue-dev']) {
conf.imports.vue = conf.imports['vue-dev']
@ -74,7 +73,7 @@ export default async function createServer(root = '', conf = {}) {
currentPage = ''
server
.on('request', async function (req, res) {
.on('request', function (req, res) {
let prefix = DEPLOY_PATH ? DEPLOY_PATH.replace(/\/$/, '') : ''
let url =
prefix && req.url.startsWith(prefix)
@ -179,18 +178,11 @@ export default async function createServer(root = '', conf = {}) {
currentPage,
IS_ENTRY: true,
DEPLOY_PATH,
LEGACY_MODE,
isCustomElement,
plugin,
define
LEGACY_MODE
},
page.entry
)
for (let fn of plugin) {
entry = await fn('js', entry)
}
code = parseHtml(html, {
page,
imports: conf.imports,
@ -223,7 +215,7 @@ export default async function createServer(root = '', conf = {}) {
return
}
code = await compileVue(file, conf.imports, {
code = compileVue(file, conf.imports, {
IS_MPA,
currentPage,
SOURCE_DIR,
@ -231,15 +223,9 @@ export default async function createServer(root = '', conf = {}) {
DEPLOY_PATH,
INJECT_SCSS,
LEGACY_MODE,
isCustomElement,
plugin,
define
isCustomElement
})
for (let fn of plugin) {
code = await fn('js', code)
}
res.setHeader('content-type', MIME_TYPES.js)
}
break
@ -265,25 +251,14 @@ export default async function createServer(root = '', conf = {}) {
return
}
code = compileScss(file)
for (let fn of plugin) {
code = await fn('css', code)
}
res.setHeader('content-type', MIME_TYPES.css)
}
break
case 'js':
case 'wasm':
{
let rpath = pathname.replace('@/', '')
let file
let isJson = false
let isWasm = rpath.endsWith('.wasm')
if (rpath.endsWith('json.js')) {
isJson = true
rpath = rpath.slice(0, -3)
}
if (IS_MPA) {
// 判断前后2个值相等, 避免出现目录名和页面名字相同时走错逻辑
@ -307,35 +282,18 @@ export default async function createServer(root = '', conf = {}) {
res.end('')
return
}
if (isJson) {
try {
code =
'export default ' + JSON.stringify(JSON.parse(code + ''))
} catch (err) {
console.log('%s 语法错误: %s', rpath, red(err.message))
}
} else if (isWasm) {
//
} else {
code = parseJs(
code + '',
conf.imports,
{
IS_MPA,
currentPage,
DEPLOY_PATH,
LEGACY_MODE,
isCustomElement,
plugin,
define
},
file
)
for (let fn of plugin) {
code = await fn('js', code)
}
}
res.setHeader('content-type', MIME_TYPES[ext])
code = parseJs(
code + '',
conf.imports,
{
IS_MPA,
currentPage,
DEPLOY_PATH,
LEGACY_MODE
},
file
)
res.setHeader('content-type', MIME_TYPES.js)
}
break
@ -414,7 +372,7 @@ export default async function createServer(root = '', conf = {}) {
)
chokidar
.watch([SOURCE_DIR, PUBLIC_DIR, join(root, './index.html')])
.on('all', async (act, filePath) => {
.on('all', (act, filePath) => {
if (ready) {
let file = filePath.slice(SOURCE_DIR.length)
@ -434,9 +392,6 @@ export default async function createServer(root = '', conf = {}) {
} else {
content = fs.cat(filePath).toString()
}
for (let fn of plugin) {
content = await fn('css', content)
}
ws.send({
action: 'render',
data: { path: file.replace(/\\/g, '/'), content }
@ -446,7 +401,7 @@ export default async function createServer(root = '', conf = {}) {
case 'vue':
{
let content = await compileVue(filePath, conf.imports, {
let content = compileVue(filePath, conf.imports, {
IS_MPA,
currentPage,
SOURCE_DIR,
@ -454,9 +409,7 @@ export default async function createServer(root = '', conf = {}) {
DEPLOY_PATH,
INJECT_SCSS,
LEGACY_MODE,
isCustomElement,
plugin,
define
isCustomElement
})
let tmp = CACHE[filePath]
if (tmp.changed) {

View File

@ -52,13 +52,7 @@ export default function compile(root = '', dist = '', conf = {}, verbose) {
)
const INJECT_SCSS = readFile(conf.inject?.scss)
const LEGACY_MODE = !!conf.legacy
const {
ABS_CONFIG_FILEPATH,
compileOptions = {},
define = {},
plugin = []
} = conf
const { isCustomElement = defaultCustomElement } = compileOptions
const { isCustomElement } = conf.compileOptions || {}
conf.inject = conf.inject || { scss: '' }
@ -71,8 +65,13 @@ export default function compile(root = '', dist = '', conf = {}, verbose) {
DEPLOY_PATH,
INJECT_SCSS,
LEGACY_MODE,
ABS_CONFIG_FILEPATH,
define
// 线程通讯无法传递函数类型, 需要转为字符串, 之后再转回来
isCustomElement:
THREADS_NUM > 0
? isCustomElement
? isCustomElement.toString()
: null
: isCustomElement || defaultCustomElement
}
fs.ls(SOURCE_DIR, true).forEach(path => {
@ -102,10 +101,7 @@ export default function compile(root = '', dist = '', conf = {}, verbose) {
// 创建线程池
if (THREADS_NUM > 0 && (IS_MPA || list.size > THREADS_NUM * 10)) {
// 页面数过少时, 线程数量不能比页面数多
let max = Math.min(THREADS_NUM, PAGES_KEYS.length)
for (let i = 0; i < max; i++) {
for (let i = 0; i < THREADS_NUM; i++) {
WORKER_POOL.add(
new Worker(join(__dirname, './thread.js'), {
workerData: {
@ -117,8 +113,6 @@ export default function compile(root = '', dist = '', conf = {}, verbose) {
})
)
}
} else {
options.isCustomElement = isCustomElement
}
// 优先处理静态目录, 之后的源码目录中, 以便如果有产生相同的文件名, 则覆盖静态目录中的文件
@ -208,8 +202,7 @@ export default function compile(root = '', dist = '', conf = {}, verbose) {
doJob()
}
} else {
options.plugin = plugin
options.isCustomElement = isCustomElement
options.isCustomElement = isCustomElement || defaultCustomElement
compileFiles(currentPage, page, list, options, {
verbose,
dist,

View File

@ -8,17 +8,11 @@ import { compileFiles } from './compile.js'
import { defaultCustomElement } from './utils.js'
const { options, verbose, dist, imports } = workerData
const { ABS_CONFIG_FILEPATH } = options
const { compileOptions = {}, plugin = [] } = await import(
ABS_CONFIG_FILEPATH
).then(r => r.default)
options.isCustomElement = options.isCustomElement
? Function('return ' + options.isCustomElement)()
: defaultCustomElement
const { isCustomElement = defaultCustomElement } = compileOptions
options.isCustomElement = isCustomElement
options.plugin = plugin
//
async function doJob(job) {
let [currentPage, { page, files }] = job.entries().next().value
@ -34,7 +28,7 @@ async function doJob(job) {
dist,
imports
})
parentPort.postMessage(true)
parentPort.postMessage('ok')
}
parentPort.on('message', doJob)

View File

@ -8,7 +8,6 @@ import { createHash, randomUUID } from 'node:crypto'
import { join } from 'node:path'
import { gzipSync } from 'node:zlib'
import { red, cyan, blue } from 'kolorist'
import { LEGACY_POLYFILL } from './constants.js'
// 修正路径合并 避免在windows下被转义
export function urlJoin(...args) {
@ -40,7 +39,7 @@ export function friendlyErrors(pathname, ext = '') {
export function createHmrScript(legacy, session = '') {
return `
!(function vue_live_hmr(){
let ws = new WebSocket(\`ws\${location.protocol === 'https:' ? 's' : ''}://\${location.host}/ws-fite-hmr?session=\${btoa(location.pathname).replace(/[=\+\/]/g, '')}&lock=\${localStorage.getItem(location.pathname) || 0}\`)
var ws = new WebSocket(\`ws\${location.protocol === 'https:' ? 's' : ''}://\${location.host}/ws-fite-hmr?session=\${btoa(location.pathname).replace(/[=\+\/]/g, '')}&lock=\${localStorage.getItem(location.pathname) || 0}\`)
ws.addEventListener('open', function (r) {
if(vue_live_hmr.closed){
@ -94,7 +93,6 @@ export function createHmrScript(legacy, session = '') {
break
}
})
${LEGACY_POLYFILL}
})()
`
}

View File

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