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) }) }