import http from 'http'
import https from 'https'
import fs from 'iofs'
import { join, dirname } from 'path'
import { parse } from 'url'
import socket from './ws.js'
import chokidar from 'chokidar'
import { red } from 'kolorist'
import { friendlyErrors } from './utils.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 = {}
const CACHE = {} //文件缓存, 用于hmr
function readFile(file) {
return (file && fs.cat(file)?.toString()) || ''
}
export default async function createServer(root = '', conf = {}) {
const SOURCE_DIR = join(root, 'src')
const PUBLIC_DIR = join(root, 'public')
const DEPLOY_PATH = conf.base || '' // 部署目录, 默认是根目录部署
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 INJECT_SCSS = readFile(conf.inject?.scss)
const LEGACY_MODE = !!conf.legacy
if (USE_HTTPS) {
Object.assign(SERVER_OPTIONS, conf.devServer.ssl)
if (!SERVER_OPTIONS.key || !SERVER_OPTIONS.cert) {
console.error('证书错误: https 证书不能为空!!!\n')
process.exit()
}
}
const server = (USE_HTTPS ? https : http)
.createServer(SERVER_OPTIONS)
.listen(PORT)
const ws = socket(server)
let indexPage = Object.keys(conf.pages)
.map(it => {
let tmp = it + '.html'
return `
${DEPLOY_PATH + tmp}`
})
.join('')
let ready = false
let pagesDir = '',
currentPage = ''
server
.on('request', function (req, res) {
let prefix = DEPLOY_PATH ? DEPLOY_PATH.replace(/\/$/, '') : ''
let url =
prefix && req.url.startsWith(prefix)
? req.url.slice(DEPLOY_PATH.length)
: req.url.slice(1)
let pathname = parse(url).pathname
let pageName = '',
isIndex = false // 是否渲染目录页
let ext
if (prefix && req.url === '/') {
res.setHeader('Location', DEPLOY_PATH)
res.writeHead(302, 'Redirect')
return res.end('')
}
if (pathname) {
// 这种情况是, 页面是子目录的情况
if (pathname.includes('/') && pathname.endsWith('.html')) {
pageName = pathname.slice(0, -5)
if (conf.pages[pageName]) {
ext = 'html'
currentPage = pageName
pagesDir = dirname(conf.pages[pageName]?.entry)
}
} else {
pathname = pathname.split('/')
if (pathname[0].endsWith('.html')) {
pageName = pathname.shift()
let tmp = pageName.split('.')
ext = tmp.pop()
pageName = tmp.join('.')
// 页面不存在时输出404, 避免进程崩溃退出
if (!conf.pages[pageName]) {
res.writeHead(404, 'Not Found')
return res.end(`Oops!!! 404 Not Found`)
}
currentPage = pageName
pagesDir = dirname(conf.pages[pageName]?.entry)
} else {
if (currentPage) {
let tmp = pathname.at(-1).split('.')
// 修正history路由时的访问
ext = tmp.length > 1 ? tmp.pop() : 'html'
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'
}
}
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,
IS_ENTRY: true,
DEPLOY_PATH,
LEGACY_MODE
})
code = parseHtml(html, { page, imports: conf.imports, entry })
}
break
case 'vue':
{
let rpath = pathname.replace(/@\//, '')
let file
if (IS_MPA) {
// 判断前后2个值相等, 避免出现目录名和页面名字相同时走错逻辑
if (rpath === pathname && rpath.startsWith(currentPage)) {
file = join(pagesDir, rpath.slice(currentPage.length))
} else {
file = join(SOURCE_DIR, rpath)
}
} else {
file = join(SOURCE_DIR, rpath)
}
if (!fs.isfile(file)) {
friendlyErrors(pathname, ext)
res.writeHead(404, 'Not Found')
res.end('')
return
}
code = compileVue(file, conf.imports, {
IS_MPA,
currentPage,
SOURCE_DIR,
CACHE,
DEPLOY_PATH,
INJECT_SCSS,
LEGACY_MODE
})
res.setHeader('content-type', MIME_TYPES.js)
}
break
case 'scss':
case 'css':
{
let file = join(SOURCE_DIR, pathname.replace(/@\//, ''))
if (!fs.isfile(file)) {
file = join(PUBLIC_DIR, pathname.replace(/@\//, ''))
if (!fs.isfile(file)) {
friendlyErrors(pathname, ext)
res.writeHead(404, 'Not Found')
res.end('')
return
}
}
if (file === conf.inject?.scss) {
console.log(red('设置为注入的样式文件不可被vue/js文件引用\n'))
res.writeHead(404, 'Not Found')
res.end('')
return
}
code = compileScss(file)
res.setHeader('content-type', MIME_TYPES.css)
}
break
case 'js':
{
let rpath = pathname.replace(/@\//, '')
let file
if (IS_MPA) {
// 判断前后2个值相等, 避免出现目录名和页面名字相同时走错逻辑
if (rpath === pathname && rpath.startsWith(currentPage)) {
file = join(pagesDir, rpath.slice(currentPage.length))
} else {
file = join(SOURCE_DIR, rpath)
}
} else {
file = join(SOURCE_DIR, rpath)
}
if (fs.isfile(file)) {
code = fs.cat(file)
} else if (fs.isfile(join(PUBLIC_DIR, rpath))) {
code = fs.cat(join(PUBLIC_DIR, rpath))
} else {
friendlyErrors(rpath, ext)
res.writeHead(404, 'Not Found')
res.end('')
return
}
code = parseJs(code + '', conf.imports, {
IS_MPA,
currentPage,
DEPLOY_PATH,
LEGACY_MODE
})
res.setHeader('content-type', MIME_TYPES.js)
}
break
default:
res.setHeader('content-type', MIME_TYPES[ext] || MIME_TYPES.other)
let pub_file = join(PUBLIC_DIR, pathname)
let source_file = join(SOURCE_DIR, pathname)
if (fs.isfile(pub_file)) {
code = fs.cat(pub_file)
if (code) {
let stat = fs.stat(pub_file)
res.setHeader(
'Last-Modified',
new Date(stat.mtime).toGMTString()
)
}
} else if (fs.isfile(source_file)) {
code = fs.cat(source_file)
if (code) {
let stat = fs.stat(source_file)
res.setHeader(
'Last-Modified',
new Date(stat.mtime).toGMTString()
)
}
} else {
code = null
}
if (code === null) {
friendlyErrors(pathname, ext)
res.writeHead(404, 'Not Found')
res.end('')
return
}
break
}
res.setHeader('content-length', Buffer.byteLength(code || noc))
res.writeHead(200, 'OK')
res.end(code || noc)
}
})
.on('error', err => {
console.log(
red(`${PORT} 端口被占用!!! 尝试使用 ${PORT + 1} 端口...`),
'\n'
)
conf.devServer.port = PORT + 1
createServer(root, conf)
})
.on('listening', _ => {
console.log('启动成功, 可通过以下地址访问')
console.log(
' 本地: %s://%s:%d%s',
USE_HTTPS ? 'https' : 'http',
USE_HTTPS ? 'localhost' : '127.0.0.1',
PORT,
DEPLOY_PATH
)
console.log(
' 外网: %s://%s:%d%s\n',
USE_HTTPS ? 'https' : 'http',
DOMAIN,
PORT,
DEPLOY_PATH
)
chokidar
.watch([SOURCE_DIR, PUBLIC_DIR, join(root, './index.html')])
.on('all', (act, filePath) => {
if (ready) {
let file = filePath.slice(SOURCE_DIR.length)
if (act === 'add' || act === 'change') {
let ext = file.slice(file.lastIndexOf('.') + 1)
switch (ext) {
case 'css':
case 'scss':
{
let content = ''
if (filePath === conf.inject?.scss) {
return
}
if (ext === 'scss') {
content = compileScss(filePath)
} else {
content = fs.cat(filePath).toString()
}
ws.send({
action: 'render',
data: { path: file.replace(/\\/g, '/'), content }
})
}
break
case 'vue':
{
let content = compileVue(filePath, conf.imports, {
IS_MPA,
currentPage,
SOURCE_DIR,
CACHE,
DEPLOY_PATH,
INJECT_SCSS,
LEGACY_MODE
})
let tmp = CACHE[filePath]
if (tmp.changed) {
ws.send({ action: 'reload' })
} else {
ws.send({
action: 'render',
data: {
path: file.replace(/\\/g, '/'),
content: tmp.css
}
})
}
}
break
default:
ws.send({ action: 'reload' })
break
}
} else if (act === 'unlink' || act === 'unlinkDir') {
ws.send({ action: 'reload' })
}
}
})
.on('ready', () => {
ready = true
})
})
}