手写vite

喜欢ヅ旅行 2022-09-04 07:46 243阅读 0赞

### 手写vite ###

目录结构：

|-- babel_webpack
        |-- index.html
        |-- index.js
        |-- package.json
        |-- src
            |-- main.js
            |-- moduleA.js

index.html

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <div>酱紫</div>
        <div id="app"></div>
        <script type="module" src="src/main.js"></script>
    </body>
    
    </html>

index.js

const Koa = require('koa');
    const path = require('path');
    const app = new Koa();
    const fs = require('fs');
    app.use(async ctx => { 
        const {  url } = ctx;
    
        if (url === '/') { 
            console.log('url', url);
            console.log('ctx', ctx);
            ctx.type = 'text/html'
            let content = fs.readFileSync('./index.html', 'utf-8');
            content = content.replace(
                "<script ",
                ` <script> window.process = {env: { NODE_ENV: 'dev' }} </script> <script `
            );
            ctx.body = content;
        } else if (url.endsWith('.js')) { 
            console.log('url', url);
            // js文件
            const p = path.resolve(__dirname, url.slice(1))
            ctx.type = 'application/javascript';
            const content = fs.readFileSync(p, 'utf-8');
            // import xx from 'xxx' => '/@modules/xxx';
            ctx.body = rewriteImport(content)
        } else if (url.startsWith('/@modules/')) { 
            // TODO /@modules/
            // @modules/vue ==> node_modules/vue => esmodule 的入口
            const prefix = path.resolve(__dirname, 'node_modules', url.replace('/@modules/', ''));
            console.log('prefix', prefix);
            const module = require(prefix + '/package.json').module;
            const p = path.resolve(prefix, module);
            const ret = fs.readFileSync(p, 'utf-8');
            ctx.type = 'application/javascript';
            ctx.body = rewriteImport(ret);
        }
    
    });
    
    let listens = 3300;
    
    app.listen(listens, () => { 
        console.log(`监听端口${ listens} `);
    })
    
    
    function rewriteImport(content) { 
        return content.replace(/ from ['|"]([^'"]+)['|"]/g, function (s0, s1) { 
            // ../ / 开头的 ，都是相对路径
            if (s1[0] !== '.' && s1[1] !== "/") { 
                return `from '/@modules/${ s1}'`
            } else { 
                return s0
            }
        })
    }

src/main.js

// console.log('酱紫----------')
    // import { str } from './moduleA.js';
    // console.log(str);
    
    import {  createApp, h } from 'vue';
    const App = { 
        render() { 
            return h('div', null, [h('div', null, String('123'))])
        }
    }
    createApp(App).mount('#app')

src/moduleA.js

export const str = '哈哈哈'

packpage.json

{ 
      "name": "手写vite",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": { 
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC",
      "dependencies": { 
        "koa": "^2.13.1",
        "vue": "^3.2.2"
      }
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，243人围观）

还没有评论，来说两句吧...

相关阅读

相关手写java_手写java锁

手写非公平可重入锁公平锁：多个线程按照申请锁的顺序去获得锁，线程会直接进入队列去排队，永远都是队列的第一位才能得到锁。优点：所有的线程都能得到资源，不会饿死在队列中。

矫情吗；*/ 2022年10月23日 12:53/ 0 赞/ 88 阅读

相关手写vite

手写vite 目录结构： |-- babel_webpack |-- index.html |-- index.js

喜欢ヅ旅行/ 2022年09月04日 07:46/ 0 赞/ 244 阅读

相关手写一个 Vite 后，再也不怕面试官问我原理了！

在刚刚结束的 VueConf2021 中，除了 Vue 3.0 以外，另外一个亮点就是下一代构建工具 Vite 了。在尤雨溪分享的【 Vue 3 生态进展和计划】的演讲中，

客官°小女子只卖身不卖艺/ 2022年08月31日 00:54/ 0 赞/ 232 阅读

相关手写instanceOf

function myInstanceOf(leftvalue,rightvalue){ let rightProto = rightvalue.pr

一时失言乱红尘/ 2022年08月30日 11:44/ 0 赞/ 179 阅读

相关手写HashMap

在本文中，将会实现一个简单的HashMap，模拟实现了put、get和到达扩容条件时自动扩容等功能。 1、Map<K,V>接口的定义 public

傷城~/ 2022年05月21日 05:27/ 0 赞/ 254 阅读

相关手写HashMap

1.手写一个HashMap 2.jdk1.8的HashMap原理 3.HashMap扩容机制是怎么样的？ 4.JDK1.8为什么要使用红黑树 5.为什么重写Equals

川长思鸟来/ 2022年04月04日 15:53/ 0 赞/ 309 阅读

相关手写HashMap

1.Map集合接口 package com.weichai.hashmap; / 纯手写Map集合接口 @auth

系统管理员/ 2022年03月20日 15:46/ 0 赞/ 262 阅读

相关手写RateLimiter

[手写RateLimiter][RateLimiter] 自定义注解封装如果需要让接口实现限流RateLimiter使用网关：一般拦截所有的接口实现限流秒杀

╰半橙微兮°/ 2022年01月28日 12:53/ 0 赞/ 241 阅读

相关手写HashMap

1.定义Map接口 public interface Map<K, V> { //设置值 public V put(K k, V v

朴灿烈づ我的快乐病毒、/ 2021年12月04日 09:31/ 0 赞/ 383 阅读

相关手写识别

作者：倪屁屁链接：https://zhuanlan.zhihu.com/p/40431290 来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载

左手的ㄟ右手/ 2021年11月24日 01:16/ 0 赞/ 398 阅读