fite/lib/index.js

/**
 * {vue live开发环境}
 * @author yutent<yutent.io@gmail.com>
 * @date 2022/08/31 18:00:37
 */

import http from 'http'
import fs from 'iofs'
import { join, resolve } from 'path'
import { parse } from 'url'
import conf from './live.config.js.js'

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 root = resolve('./src/')

/* ------------------------------- */

let pagesDir = resolve(conf.pages)
let pages = fs.ls(pagesDir).map(it => {
  let tmp = it.slice(pagesDir.length + 1) + '.html'
  return `<li><a href="/${tmp}">${tmp}</a></li>`
})

let currentPage = ''

http
  .createServer(function (req, res) {
    let pathname = parse(req.url.slice(1)).pathname || 'index.html'

    // console.log(req.url, pathname, parse(req.url.slice(1)))
    let isIndex = pathname === 'index.html'

    for (let k in COMMON_HEADERS) {
      res.setHeader(k, COMMON_HEADERS[k])
    }

    let tmp = pathname.split('.')
    let ext = tmp.pop()
    let page = tmp.join('.')

    if (isIndex) {
      res.setHeader('content-type', MIME_TYPES.html)
      res.writeHead(200, 'OK')
      res.end('<ul>' + pages.join('') + '</ul>')
    } else {
      res.setHeader('accept-ranges', 'bytes')

      let code = ''

      switch (ext) {
        case 'html':
          {
            let entry = fs.cat(join(pagesDir, page, 'main.js')).toString()
            let fixedStyle = '\n\n'

            currentPage = page

            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('@/', '/aseets/js/')
                }

                if (!conf.imports[name]) {
                  if (name.startsWith('./')) {
                    name = name.replace('./', `/aseets/js/${currentPage}/`)
                  } else if (name.startsWith('/') && !name.startsWith('/aseets/js/')) {
                    name = name.replace(/^\//, '/aseets/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('@/', '/aseets/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('@/', '/aseets/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(
                '</head>',
                "<script>window.process = {env: {NODE_ENV: 'development'}}</script></head>"
              )
              .replace('{{importmap}}', JSON.stringify({ imports: conf.imports }))
              .replace(
                '<script src="main.js"></script>',
                `<script type="module">\n${entry}\n</script>`
              )
          }

          break

        case 'vue':
          {
            pathname = pathname.replace(/^aseets\/js\//, '')
            let file

            if (pathname.startsWith(currentPage)) {
              file = join(conf.pages, pathname)
            } else {
              file = join(root, pathname)
            }

            if (!fs.isfile(file)) {
              file = file.replace(/\.vue$/, '/index.vue')
            }

            // console.log('>>>>', file)
            code = compileVue(file)

            res.setHeader('content-type', MIME_TYPES.js)
          }
          break

        case 'scss':
        case 'css':
          {
            let file = join(root, pathname.replace(/^aseets\/css\//, ''))
            code = compileScss(file)
            res.setHeader('content-type', MIME_TYPES.css)
          }
          break

        case 'js':
          {
            pathname = pathname.replace(/^aseets\/js\//, '')
            let file
            if (pathname.startsWith(currentPage)) {
              file = join(conf.pages, 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)
            }
            console.log(req.url, '>>>>', file)
            code = parseJs(code + '')
            res.setHeader('content-type', MIME_TYPES.js)
          }

          break

        default:
          res.setHeader('content-type', MIME_TYPES[ext] || MIME_TYPES.other)
          break
      }

      res.setHeader('content-length', Buffer.byteLength(code))
      res.writeHead(200, 'OK')
      res.end(code + '')
    }
  })
  .listen(conf.port)
  .on('error', err => {
    console.log(`${conf.port}端口被占用~~~`)
    conf.port++
    createServer()
  })
  .on('listening', _ => {
    // console.log('启动成功, 请访问', 'http://127.0.0.1:' + conf.port)
  })