从0到1手把手教你实现vite系列--重写依赖请求路径,处理/@modules/vue引用-编程思维

重写依赖请求路径,处理/@modules/vue引用

接下来呢,我们要让import { createApp } from '/@modules/vue' 这句话的调用结果正常

  • 就是说,我们现在运行代码结果是这样
  • 但是http://localhost:8088/@modules/vue 是404

编写代码实现功能

  • 创建文件vite\src\serverPluginModuleResolve.js
const reg = /^\/@modules\//
const path = require('path')
const fs = require('fs').promises
function moduleResolvePlugin({app, root}){
    app.use(async(ctx,next)=>{
        // 如果没有匹配到/@modules/vue,就往下执行就行啦
        if(!reg.test(ctx.path)){
            return next()
        }
        const id  = ctx.path.replace(reg, '')
        let mapping={ // 就是它找的路径就是我们真实的VUE依赖的路径
            vue: path.resolve(root,'node_modules','@vue/runtime-dom/dist/runtime-dom.esm-bundler.js')
        }
        const content = await fs.readFile(mapping[id],'utf-8')
        ctx.type = 'js'
        ctx.body = content
    })
}
exports.moduleResolvePlugin = moduleResolvePlugin
  • 把插件引入到我们的主服务(就两行代码,不要搞错哦)
const Koa = require('koa')
const reWritePlugin = require('./serverPluginModuleRewrite')
const {moduleResolvePlugin} = require('./serverPluginModuleResolve')
const staticPlugin = require('./serverPluginServerStatic')

function createServer() {
    let app = new Koa()
    // 实现静态服务功能,访问我们的服务器可以返回对应的文件koa-Static
    const context = { // 创建一个上下文,给不同插件共享功能
        app,
        root: process.cwd() // 这个目录就在vite-vue
    }
    const resolvePlugin = [
        moduleResolvePlugin,// 2.解决http://localhost:8088/@modules/vue请求问题
        reWritePlugin, // 重写请求路径插件 ,为什么这么写这个顺序呢,原因解释放到插件里吧~~
        staticPlugin, // 1.静态服务插件
    ]
    resolvePlugin.forEach(plugin => plugin(context))
    return app
}
createServer().listen(8088, () => {
    console.log('xiaojin server is start at 8088')
    console.log('修改代码跑一把')
})


刷新页面,跑一把看看

我明天继续写,我今天困了哦,哈哈,还是很开心,代码都顺利跑起来了

欢迎大家指出文章需要改正之处~
学无止境,合作共赢

欢迎路过的小哥哥小姐姐们提出更好的意见哇~~

版权声明:本文版权归作者所有,遵循 CC 4.0 BY-SA 许可协议, 转载请注明原文链接
https://www.cnblogs.com/sugartang/p/16395337.html