import http from 'http'
import fs from 'iofs'
import { join, resolve, dirname } from 'path'
import { parse } from 'url'
import { compileScss, parseJs, compileVue } from './compile-vue.js'
import MIME_TYPES from './mime-tpyes.js'
import { COMMON_HEADERS } from './constants.js'
const decode = decodeURIComponent
const noc = Buffer.from('')
export default function createServer(root = '', conf = {}) {
const IS_MPA = Object.keys(conf.pages).length > 1
let indexPage = Object.keys(conf.pages)
.map(it => {
let tmp = it + '.html'
return `
${tmp}`
})
.join('')
let pagesDir = '',
currentPage = ''
http
.createServer(function (req, res) {
let pathname = parse(req.url.slice(1)).pathname
let pageName = '',
isIndex = false
let ext
if (pathname) {
pathname = pathname.split('/')
if (pathname[0].endsWith('.html')) {
pageName = pathname.shift()
let tmp = pageName.split('.')
ext = tmp.pop()
pageName = tmp.join('.')
currentPage = pageName
pagesDir = dirname(conf.pages[pageName].entry)
} else {
ext = pathname[pathname.length - 1].split('.').pop()
pageName = currentPage
}
pathname = pathname.join('/')
} else {
isIndex = true
}
for (let k in COMMON_HEADERS) {
res.setHeader(k, COMMON_HEADERS[k])
}
if (isIndex) {
res.setHeader('content-type', MIME_TYPES.html)
res.writeHead(200, 'OK')
res.end('')
} else {
res.setHeader('accept-ranges', 'bytes')
let code = ''
// return res.end(JSON.stringify({url: req.url, ext, pageName}))
res.setHeader('x-ext', ext)
res.setHeader('x-page', pageName)
switch (ext) {
case 'html':
{
let entry = fs.cat(conf.pages[pageName].entry).toString()
let fixedStyle = '\n\n'
res.setHeader('content-type', MIME_TYPES.html)
entry = entry
.replace(/import (.*?) from (["'])(.*?)\2/g, function (m, alias, q, name) {
if (name.startsWith('@/')) {
name = name.replace('@/', '/assets/js/')
}
if (!conf.imports[name]) {
if (name.startsWith('./')) {
name = name.replace('./', '/assets/js/')
if (IS_MPA) {
name += `${currentPage}/`
}
} else if (name.startsWith('/') && !name.startsWith('/assets/js/')) {
name = name.replace(/^\//, '/assets/js/')
}
if (!name.endsWith('.js') && !name.endsWith('.vue')) {
name += '.js'
}
}
return `import ${alias} from '${name}'`
})
.replace(/import (["'])(.*?)\1/g, function (m, q, name) {
if (name.endsWith('.css') || name.endsWith('.scss')) {
if (name.startsWith('@/')) {
name = name.replace('@/', '/assets/css/')
}
let tmp = `style${Date.now()}`
fixedStyle += `document.adoptedStyleSheets.push(${tmp})\n`
return `import ${tmp} from '${name}' assert { type: 'css' }`
} else {
if (name.startsWith('@/')) {
name = name.replace('@/', '/assets/js/')
}
// console.log(name, conf.imports[name])
if (!conf.imports[name]) {
if (!name.startsWith('/') && !name.startsWith('./')) {
name = '/' + name
}
if (!name.endsWith('.js') && !name.endsWith('.vue')) {
name += '.js'
}
}
return `import '${name}'`
}
})
entry += fixedStyle
code = fs.cat('./index.html').toString()
code = code
.replace(
'',
""
)
.replace('{{title}}', conf.pages[pageName].title || '')
.replace('{{keywords}}', conf.pages[pageName].keywords || '')
.replace('{{description}}', conf.pages[pageName].description || '')
.replace('{{importmap}}', JSON.stringify({ imports: conf.imports }))
.replace(
'',
``
)
}
break
case 'vue':
{
let rpath = pathname.replace(/^assets\/js\//, '')
let file
if (IS_MPA) {
file = join(pagesDir, rpath)
} else {
file = join(root, rpath)
}
if (!fs.isfile(file)) {
file = file.replace(/\.vue$/, '/index.vue')
}
// console.log('>>>>', file)
code = compileVue(file, conf, { IS_MPA, currentPage, root, pagesDir })
res.setHeader('content-type', MIME_TYPES.js)
}
break
case 'scss':
case 'css':
{
let file = join(root, pathname.replace(/^assets\/css\//, ''))
code = compileScss(file)
res.setHeader('content-type', MIME_TYPES.css)
}
break
case 'js':
{
pathname = pathname.replace(/^assets\/js\//, '')
let file
if (pathname.startsWith(currentPage)) {
file = join(pagesDir, pathname)
} else {
file = join(root, pathname)
}
if (fs.isfile(file)) {
code = fs.cat(file)
} else {
file = file.replace(/\.js$/, '/index.js')
code = fs.cat(file)
}
code = parseJs(code + '')
res.setHeader('content-type', MIME_TYPES.js)
}
break
case 'png':
case 'jpg':
case 'jpeg':
case 'webp':
case 'gif':
case 'svg':
case 'ico':
case 'bmp':
res.setHeader('content-type', MIME_TYPES[ext])
code = fs.cat(join(root, pathname))
if (code === null) {
console.error(pathname, '文件不存在')
res.writeHead(404, 'Not Found')
res.end('')
return
}
break
default:
res.setHeader('content-type', MIME_TYPES[ext] || MIME_TYPES.html)
break
}
res.setHeader('content-length', Buffer.byteLength(code || noc))
res.writeHead(200, 'OK')
res.end(code || noc)
}
})
.listen(conf.port)
.on('error', err => {
console.log(`${conf.port}端口被占用~~~`)
conf.port++
createServer()
})
.on('listening', _ => {
console.log('启动成功, 请访问', 'http://127.0.0.1:' + conf.port)
})
}