IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 从0到1手把手教你实现vite-读取js文件解析所有的import语法,处理字符串并改写文件路径 -> 正文阅读

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

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

睡醒啦:继续开工啦~~

接下来开始读取文件流,

  • 解决 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/,试一把


image.png

打印完成啦,开心(),接下来我们开始解析并改写文件内容(就是把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已经被改写成功了呢~~~~

欢迎大家指出文章需要改正之处~
学无止境,合作共赢
在这里插入图片描述

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

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章           查看所有文章
加:2022-06-23 00:51:34  更:2022-06-23 00:52:39 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年9日历 -2024/9/19 9:43:28-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码