# mini-vite **Repository Path**: efrice/mini-vite ## Basic Information - **Project Name**: mini-vite - **Description**: vite 基础版 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2022-11-12 - **Last Updated**: 2022-11-12 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # mini-vite ## 前言目前 Vite 3.0 已经正式发布，也被称为是下一代前端构建工具。 Vite 作为构建工具最基础的功能就是在入口文件 `index.html` 中引入相关的内容。 ## 原生 ESM 语法总所周知，原生 ESM 语法` ``` ```javascript app.get("/", (_, res) => { let content = fs.readFileSync( path.resolve(__dirname, "./index.html"), "utf-8" ) // window下process缺失会导致报错，所以动态设置process content = content.replace( " window.process = { env: { NODE_ENV: 'dev' } } { let content = fs.readFileSync( path.resolve(__dirname, req.url.slice(1)), "utf-8" ) res.type("application/javascript").send(rewriteImport(content)) }) // 替换第三方库并发送请求 from 'vue' => from '/@modules/vue' function rewriteImport(content) { return content.replace(/ from ['|"]([^'"]+)['|"]/g, (s0, s1) => { if (s1[0] !== "." && s1[0] !== "/") { return ` from '/@modules/${s1}'` } else { return s0 } }) } ``` ### 响应第三方库 ```javascript app.get("/@modules/*", (req, res) => { const prefix = path.resolve( __dirname, "node_modules", req.url.replace("/@modules/", "") ) const module = require(prefix + "/package.json").module let content = fs.readFileSync(path.resolve(prefix, module), "utf-8") res.type("application/javascript").send(rewriteImport(content)) }) ``` ### 响应 Vue 单文件组件 app.vue 文件准备。 ```vue ``` ```javascript // .vue单文件编译 => complier-sfc => template + script + styles const complierSfc = require("@vue/compiler-sfc") const complierDom = require("@vue/compiler-dom") app.get("/*.vue", (req, res) => { const p = path.resolve(__dirname, req.url.split("?")[0].slice(1)) const { descriptor } = complierSfc.parse(fs.readFileSync(p, "utf-8")) let body = "" if (!req.query.type) { body = ` ${rewriteImport( descriptor.script.content.replace( "export default", "const __script = " ) )} import { render as __render } from "${req.url}?type=template" __script.render = __render export default __script ` if (descriptor.styles.length > 0) { body += resolveStyle( descriptor.styles.map((item) => item.content).join("") ) } } else { // template => complier-dom => render函数 const { template } = descriptor const render = complierDom.compile(template.content, { mode: "module" }) body = rewriteImport(render.code) } res.type("application/javascript").send(body) }) // 处理 style function resolveStyle(content) { return ` let link = document.createElement('style') link.setAttribute('type','text/css') document.head.appendChild(link) link.innerHTML = "${content.replace(/\s/g, "")}" ` } ``` ### 响应 css 文件 index.css 文件准备。 ```css div { color: skyblue; } ``` ```javascript app.get("/*.css", (req, res) => { const file = fs.readFileSync( path.resolve(__dirname, req.url.slice(1)), "utf-8" ) res.type("application/javascript").send(resolveStyle(file)) }) ```