feat: 模块解析

lizuncong · lizuncong · commit 374e659f10b9 · 2022-04-11T18:16:22.000+08:00
diff --git a/index.html b/index.html
@@ -7,6 +7,9 @@
   <title>Vite App</title>
 </head>
 <body>
+  <div>
+    hello vite
+  </div>
   <div id="app"></div>
   <script type="module" src="/src/main.js"></script>
 </body>
diff --git a/lib/index.js b/lib/index.js
@@ -1,6 +1,8 @@
 const Koa = require('koa')
-const serverStaticPlugin = require('./serverPluginService');
+const serverStaticPlugin = require('./serverPluginServeStatic');
 const moduleReWritePlugin = require('./moduleRewritePlugin');
+const { moduleResolvePlugin } = require('./serverPluginModuleResolve')
+
 
 function createServer(){
   let app = new Koa();
@@ -12,7 +14,8 @@ function createServer(){
   }
 
   const resolvePlugin = [
-      moduleReWritePlugin,
+      moduleReWritePlugin, // 重写请求路径
+      moduleResolvePlugin,
       serverStaticPlugin,
   ]
 
diff --git a/lib/moduleRewritePlugin.js b/lib/moduleRewritePlugin.js
@@ -1,12 +1,33 @@
-const { readBody}  = require('./util')
+const { readBody }  = require('./util')
+const { parse } = require('es-module-lexer')
+const MagicString = require('magic-string')
+
+function rewriteImports(source){
+  const imports = parse(source)[0]
+  const ms = new MagicString(source)
+  if(imports.length){
+    for(let i = 0; i < imports.length; i++){
+      const { s, e } = imports[i]
+      let id = source.slice(s, e) // 引用的模块名称
+      if(/^[^\/\.]/.test(id)){
+        id = `/@modules/${id}`
+        ms.overwrite(s, e, id)
+      }
+    }
+  }
+  return ms.toString()
+}
+
 function moduleRewritePlugin({ app, root }){
   app.use(async (ctx, next) => {
     await next()
     // 默认会先执行静态服务中间件，会将结果放到ctx.body
 
     // 需要将流转换成字符串，只需要处理js中的引用问题
     if(ctx.body && ctx.response.is('js')){
-      console.log(ctx.body)
+      const r = await readBody(ctx.body)
+      const result = rewriteImports(r)
+      ctx.body = result
     }
   })
 }
diff --git a/lib/serverPluginModuleResolve.js b/lib/serverPluginModuleResolve.js
@@ -0,0 +1,31 @@
+const path = require('path')
+const fs = require('fs').promises
+
+const reg = /^\/@modules\//
+
+function moduleResolvePlugin({ app, root }){
+    app.use(async (ctx, next) => {
+
+        // 如果没有匹配到/@modules 就往下执行即可
+        if(!reg.test(ctx.path)){
+            return await next()
+        }
+
+        const id = ctx.path.replace(reg, '')
+
+        const mapping = {
+            vue: path.resolve(root, 'node_modules', '@vue/runtime-dom/dist/runtime-dom.esm-browser.js')
+        }
+        
+
+        const result = await fs.readFile(mapping[id], 'utf8')
+
+        ctx.type = 'js'
+
+        ctx.body = result
+    })
+}
+
+
+
+exports.moduleResolvePlugin = moduleResolvePlugin
diff --git a/lib/serverPluginServeStatic.js b/lib/serverPluginServeStatic.js
@@ -3,7 +3,7 @@ const path = require('path')
 
 function serverStaticPlugin({ app, root }) {
   app.use(static(root))
-  app.use(static(path.resolve(root, 'demo')))
+  app.use(static(path.resolve(root, 'public')))
 }
 
 module.exports = serverStaticPlugin;
diff --git a/lib/util.js b/lib/util.js
@@ -1,5 +1,19 @@
-const readBody = async (steam) => {
+const { Readable, Stream } = require('stream')
 
+const readBody = async (stream) => {
+    if(stream instanceof Readable){
+        return new Promise((resolve, reject) => {
+            let res = ''
+            stream.on('data', function(chunk){
+                res += chunk
+            })
+            stream.on('end', function(){
+                resolve(res)
+            })
+        })
+    } else {
+        return stream
+    }
 }
 
 exports.readBody = readBody
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@ const path = require('path')`
`3`	`3`
`4`	`4`	`function serverStaticPlugin({ app, root }) {`
`5`	`5`	`app.use(static(root))`
`6`		`- app.use(static(path.resolve(root, 'demo')))`
	`6`	`+ app.use(static(path.resolve(root, 'public')))`
`7`	`7`	`}`
`8`	`8`
`9`	`9`	`module.exports = serverStaticPlugin;`