fite/lib/dev.js

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)

  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 `<li><a href="${DEPLOY_PATH + tmp}">${DEPLOY_PATH + tmp}</a></li>`
    })
    .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('<ul>' + indexPage + '</ul>')
      } 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
              })

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

              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.setHeader('content-type', MIME_TYPES.html)
                  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
              })
              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',
        '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
                    })
                    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
        })
    })
}