从0到1手把手教你实现vite-读取js文件解析所有的import语法，处理字符串并改写文件路径

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

• 已经写完了两篇了，因为实在太长，所以就分功能搞吧
• 这个是第一篇的链接：vite原理，创建项目，基础知识
• 这个是第二篇的链接Vite-中篇-通过服务访问静态资源以及重写请求路径
• 我写完以后把所有的合起来全加到1里

睡醒啦：继续开工啦~~

接下来开始读取文件流,

• 解决 vite\src\serverPluginModuleRewrite.js 中需要将流转换为字符串，而且我们只需要处理其中JS的引用问题
• 创建vite\src\utils.js

const {Readable} = require('stream')
async function readBody(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

• 修改代码vite\src\serverPluginModuleRewrite.js

const { readBody } = require("./utils")

function reWritePlugin({app,root}) {
app.use(async (ctx, next) =>{
    // todu:
    await next() // 先走静态服务，因为默认会先执行 静态服务中间件，将结果放到ctx.body
    // 需要将流转换为字符串，而且我们只需要处理其中JS的引用问题
    console.log('reWritePlugin:')
    if(ctx.body && ctx.response.is('js')){
        // console.log(ctx.body) // 这个打出来是main.js的文件流
        let res = await readBody(ctx.body)
        console.log(res)
        console.log('ctx.body已打印完毕')
    }

})
}
module.exports = reWritePlugin

访问http://localhost:8088/，试一把

打印完成啦，开心(^▽)，接下来我们开始解析并改写文件内容（就是把VUE文件解析处理为 @/modules）

• 我们需要安装插件,处理字符串
• es-module-lexer 可以解析所有的import语法
• magic-string 处理字符串，把字符串变成对象类型，引用类型
• 外层执行：

 
npm install es-module-lexer magic-string

• 给 vite\src\serverPluginModuleRewrite.js 添加解析代码

const {parse} = require('es-module-lexer')
function reWriteImports(source) {
    let imports = parse(source)
    console.log(imports)
}

• 刷新一下页面，看打印结果

修改代码跑一把
reWritePlugin:
reWritePlugin:
[
  [
    { n: 'vue', s: 27, e: 30, ss: 0, se: 31, d: -1, a: -1 },
    { n: './App.vue', s: 49, e: 58, ss: 32, se: 59, d: -1, a: -1 }
  ],
  [],
  false
]
reWriteRes已打印完毕

• 解释一下这个是什么哦
  

开始编写重写文件逻辑啦

const { readBody } = require("./utils")
const { parse } = require('es-module-lexer')
const MagicString = require('magic-string')
function reWriteImports(source) {
    let imports = parse(source)[0]
    // console.log(imports)
    // 路径处理逻辑开始咯
    let ms = new MagicString(source)
    if (imports.length > 0) {
        imports.forEach(_ => {
            let { s, e, n } = _
            let id = n
            console.log('old id :', id)
            if (/^[^\/\.]/.test(id)) {
                id = `/@modules/${id}`
                console.log('new id :', id)
                ms.overwrite(s, e, id)
            }
        })
    }
    return ms.toString()
}

function reWritePlugin({ app, root }) {
    app.use(async (ctx, next) => {
        // todu:
        await next() // 先走静态服务，因为默认会先执行 静态服务中间件，将结果放到ctx.body
        // 需要将流转换为字符串，而且我们只需要处理其中JS的引用问题
        console.log('reWritePlugin:')
        if (ctx.body && ctx.response.is('js')) {
            // console.log(ctx.body) // 这个打出来是main.js的文件流
            let res = await readBody(ctx.body)
            const reWriteRes = reWriteImports(res)
            ctx.body = reWriteRes
            // console.log(reWriteRes)
            console.log('reWriteRes已打印完毕')
        }

    })
}
module.exports = reWritePlugin

• 重点改了这里哦
  
  

• 给大家看一下打印出来的内容

old id : vue
new id : /@modules/vue
old id : ./App.vue

跑一把试一下，main.js已经被改写成功了呢~~~~

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

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