import http from 'http'
import https from 'https'
import fs from 'iofs'
import { join, resolve, dirname } from 'path'
import { parse } from 'url'
import socket from './ws.js'
import { compileScss, parseJs, compileVue, parseHtml } from './compile-vue.js'
import MIME_TYPES from './mime-tpyes.js'
import { COMMON_HEADERS } from './constants.js'
const noc = Buffer.from('')
const SERVER_OPTIONS = {}
export default async function createServer(root = '', conf = {}) {
const IS_MPA = Object.keys(conf.pages).length > 1
const PORT = conf.devServer.port || 8080
const USE_HTTPS = conf.devServer.https
const DOMAIN = conf.devServer.domain || 'localhost'
const server = (USE_HTTPS ? https : http)
.createServer(SERVER_OPTIONS)
.listen(PORT)
let indexPage = Object.keys(conf.pages)
.map(it => {
let tmp = it + '.html'
return `
${tmp}`
})
.join('')
let pagesDir = '',
currentPage = ''
if (USE_HTTPS) {
Object.assign(SERVER_OPTIONS, conf.devServer.ssl)
if (!SERVER_OPTIONS.key || !SERVER_OPTIONS.cert) {
console.error('证书错误: https 证书不能为空!!!\n')
process.exit(1)
}
}
server
.on('request', 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 {
if (currentPage) {
ext = pathname.at(-1).split('.').pop()
pageName = currentPage
} else {
pageName = Object.keys(conf.pages).pop()
currentPage = pageName
pagesDir = dirname(conf.pages[pageName].entry)
ext = 'html'
}
}
pathname = pathname.join('/')
} else {
if (IS_MPA) {
isIndex = true
} else {
pageName = Object.keys(conf.pages).pop()
currentPage = pageName
pagesDir = dirname(conf.pages[pageName].entry)
ext = 'html'
}
}
// 修正history路由时的访问
if (pathname === ext) {
ext = 'html'
}
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 = ''
switch (ext) {
case 'html':
{
res.setHeader('content-type', MIME_TYPES.html)
let page = conf.pages[pageName]
let entry = fs.cat(page.entry).toString()
let html = fs.cat(join(process.cwd(), 'index.html')).toString()
entry = parseJs(entry, conf.imports, { IS_MPA, currentPage })
code = parseHtml(html, { page, imports: conf.imports, entry })
}
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.imports, {
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 + '', conf.imports, { IS_MPA, currentPage })
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)
}
})
.on('error', err => {
console.log(`${PORT}端口被占用~~~`)
conf.devServer.port = PORT + 1
createServer(root, conf)
})
.on('listening', _ => {
console.log('启动成功, 可通过以下地址访问')
console.log(
' 本地: %s://%s:%d',
USE_HTTPS ? 'https' : 'http',
'127.0.0.1',
PORT
)
console.log(
' 外网: %s://%s:%d\n',
USE_HTTPS ? 'https' : 'http',
DOMAIN,
PORT
)
})
const ws = await socket(server)
console.log(ws)
ws.send('hello from vue-live')
}