增加热加载

lib/dev.js

@@ -3,6 +3,7 @@ import https from 'https'
 import fs from 'iofs'
 import { join, resolve, dirname } from 'path'
 import { parse } from 'url'
+import socket from './ws.js'
 
 import { compileScss, parseJs, compileVue, parseHtml } from './compile-vue.js'
 
@@ -12,12 +13,15 @@ import { COMMON_HEADERS } from './constants.js'
 const noc = Buffer.from('')
 const SERVER_OPTIONS = {}
 
-export default function createServer(root = '', conf = {}) {
+export default async function createServer(root = '', conf = {}) {
   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 WEB_SERVER = USE_HTTPS ? https : http
+  const server = (USE_HTTPS ? https : http)
+    .createServer(SERVER_OPTIONS)
+    .listen(PORT)
+
   let indexPage = Object.keys(conf.pages)
     .map(it => {
       let tmp = it + '.html'
@@ -37,29 +41,41 @@ export default function createServer(root = '', conf = {}) {
     }
   }
 
-  WEB_SERVER.createServer(SERVER_OPTIONS, function (req, res) {
+  server
-    let pathname = parse(req.url.slice(1)).pathname
+    .on('request', function (req, res) {
-    let pageName = '',
+      let pathname = parse(req.url.slice(1)).pathname
-      isIndex = false // 是否渲染目录页
+      let pageName = '',
-    let ext
+        isIndex = false // 是否渲染目录页
+      let ext
 
-    if (pathname) {
+      if (pathname) {
-      pathname = pathname.split('/')
+        pathname = pathname.split('/')
 
-      if (pathname[0].endsWith('.html')) {
+        if (pathname[0].endsWith('.html')) {
-        pageName = pathname.shift()
+          pageName = pathname.shift()
 
-        let tmp = pageName.split('.')
+          let tmp = pageName.split('.')
 
-        ext = tmp.pop()
+          ext = tmp.pop()
-        pageName = tmp.join('.')
+          pageName = tmp.join('.')
 
-        currentPage = pageName
+          currentPage = pageName
-        pagesDir = dirname(conf.pages[pageName].entry)
+          pagesDir = dirname(conf.pages[pageName].entry)
+        } else {
+          if (currentPage) {
+            ext = pathname.at(-1).split('.').pop()
+            pageName = currentPage
+          } else {
+            pageName = Object.keys(conf.pages).pop()
+            currentPage = pageName
+            pagesDir = dirname(conf.pages[pageName].entry)
+            ext = 'html'
+          }
+        }
+        pathname = pathname.join('/')
       } else {
-        if (currentPage) {
+        if (IS_MPA) {
-          ext = pathname.at(-1).split('.').pop()
+          isIndex = true
-          pageName = currentPage
         } else {
           pageName = Object.keys(conf.pages).pop()
           currentPage = pageName
@@ -67,135 +83,124 @@ export default function createServer(root = '', conf = {}) {
           ext = 'html'
         }
       }
-      pathname = pathname.join('/')
+      // 修正history路由时的访问
-    } else {
+      if (pathname === ext) {
-      if (IS_MPA) {
-        isIndex = true
-      } else {
-        pageName = Object.keys(conf.pages).pop()
-        currentPage = pageName
-        pagesDir = dirname(conf.pages[pageName].entry)
         ext = 'html'
       }
-    }
-    // 修正history路由时的访问
-    if (pathname === ext) {
-      ext = 'html'
-    }
 
-    for (let k in COMMON_HEADERS) {
+      for (let k in COMMON_HEADERS) {
-      res.setHeader(k, COMMON_HEADERS[k])
+        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 })
-
-            code = parseHtml(html, { page, imports: conf.imports, entry })
-          }
-
-          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.imports, {
-              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 + '', conf.imports, { IS_MPA, currentPage })
-            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))
+      if (isIndex) {
-      res.writeHead(200, 'OK')
+        res.setHeader('content-type', MIME_TYPES.html)
-      res.end(code || noc)
+        res.writeHead(200, 'OK')
-    }
+        res.end('<ul>' + indexPage + '</ul>')
-  })
+      } else {
-    .listen(PORT)
+        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 })
+
+              code = parseHtml(html, { page, imports: conf.imports, entry })
+            }
+
+            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.imports, {
+                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 + '', conf.imports, { IS_MPA, currentPage })
+              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)
+      }
+    })
+
     .on('error', err => {
       console.log(`${PORT}端口被占用~~~`)
       conf.devServer.port = PORT + 1
@@ -216,4 +221,10 @@ export default function createServer(root = '', conf = {}) {
         PORT
       )
     })
+
+  const ws = await socket(server)
+
+  console.log(ws)
+
+  ws.send('hello from vue-live')
 }

lib/ws.js

@@ -0,0 +1,25 @@
+/**
+ * {}
+ * @author yutent<yutent.io@gmail.com>
+ * @date 2023/01/17 17:32:51
+ */
+import { WebSocketServer } from 'ws'
+
+function defer() {
+  var o = {}
+  o.promise = new Promise((resolve, reject) => {
+    o.resolve = resolve
+    o.reject = reject
+  })
+  return o
+}
+
+export default function (server) {
+  var _ = defer()
+  var conn = new WebSocketServer({ server, path: '/ws-vue-live' })
+
+  conn.on('connection', client => {
+    _.resolve(client)
+  })
+  return _.promise
+}

package.json

@@ -9,6 +9,7 @@
     "@bytedo/sass": "^1.54.8",
     "chokidar": "^3.5.3",
     "esbuild": "^0.15.13",
-    "iofs": "^1.5.2"
+    "iofs": "^1.5.2",
+    "ws": "^8.12.0"
   }
 }