import http from 'node:http' import https from 'node:http2' import fs from 'iofs' import { join, dirname } from 'node:path' import { parse } from 'node:url' import socket from './ws.js' import chokidar from 'chokidar' import { red } from 'kolorist' import { friendlyErrors, defaultCustomElement, gzip } 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 = { allowHTTP1: true } 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 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'] } if (conf.imports['vue-router-dev']) { conf.imports['vue-router'] = conf.imports['vue-router-dev'] } if (conf.devServer.headers) { Object.assign(COMMON_HEADERS, conf.devServer.headers) } 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) [USE_HTTPS ? 'createSecureServer' : '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', async 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, USE_HTTPS ? void 0 : '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, USE_HTTPS ? void 0 : '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, USE_HTTPS ? void 0 : 'OK') res.end( '' + '
    注意: 你看到这个页面, 仅在开发时可见。
    仅为了方便开发多页应用时访问自己想要修改的页面, 而不需要手动输入地址。
      ' + indexPage + '
    ' ) } 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, isCustomElement, plugin, define }, page.entry ) for (let fn of plugin) { entry = await fn('js', entry) } code = parseHtml(html, { page, imports: conf.imports, entry, LEGACY_MODE }) } 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, USE_HTTPS ? void 0 : 'Not Found') res.end('') return } code = await compileVue(file, conf.imports, { IS_MPA, currentPage, SOURCE_DIR, CACHE, DEPLOY_PATH, INJECT_SCSS, LEGACY_MODE, isCustomElement, plugin, define }) for (let fn of plugin) { code = await fn('js', code) } 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, USE_HTTPS ? void 0 : 'Not Found') res.end('') return } } if (file === conf.inject?.scss) { console.log(red('设置为注入的样式文件不可被vue/js文件引用\n')) res.writeHead(404, USE_HTTPS ? void 0 : 'Not Found') res.end('') 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个值相等, 避免出现目录名和页面名字相同时走错逻辑 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))) { file = join(PUBLIC_DIR, rpath) code = fs.cat(file) } else { friendlyErrors(rpath, ext) res.writeHead(404, USE_HTTPS ? void 0 : 'Not Found') 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]) } 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, USE_HTTPS ? void 0 : 'Not Found') res.end('') return } break } if (ENABLE_GZIP) { code = gzip(code || noc) res.setHeader('Content-Encoding', 'gzip') } else { code = code || noc } res.setHeader('Content-Length', Buffer.byteLength(code)) res.writeHead(200, USE_HTTPS ? void 0 : 'OK') res.end(code) } }) .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', async (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() } for (let fn of plugin) { content = await fn('css', content) } ws.send({ action: 'render', data: { path: file.replace(/\\/g, '/'), content } }) } break case 'vue': { let content = await compileVue(filePath, conf.imports, { IS_MPA, currentPage, SOURCE_DIR, CACHE, DEPLOY_PATH, INJECT_SCSS, LEGACY_MODE, isCustomElement, plugin, define }) 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 }) }) }