استفاده از Compile/ Bund برای جاسازی یک برنامه Express/ Vite/ Vue

چرا؟

خوب ، بنابراین شما در حال توسعه یک ابزار داخلی با استفاده از JS … یا پروژه برای مشتری است. شما می خواهید یک باینری 100 ٪ خود را برای آنها ارسال کنید ، که آنها فقط اجرا می شوند ، تا ابزار را راه اندازی کنند … هیچ مرحله نصب برای مشتری ، بدون نسخه اشکال زدایی از Bun / کتابخانه ها … شما همچنین می خواهید برای جلوگیری از توزیع کد منبع ، از توانایی اساسی استفاده کنید.

https://www.youtube.com/watch؟v=_rhtuwfgs5o

بندر/کامپایلر

BUN این مرحله ساخت را کاملاً خوب انجام می دهد ، https://bun.sh/docs/bundler/exidebables اما دارای چند مسئله کوچک است که مربوط به بسته بندی پرونده ها است ، که می تواند به صورت محلی ارائه شود.

مسئله این است که توانایی جاسازی شده برای Bun …. در بهترین حالت در بتا است و به نظر می رسد چند مورد وجود دارد. همچنین بازگرداندن پرونده ها برای ارائه آنها با اکسپرس بسیار دشوار است.

بنابراین راه حل؟

1) پروژه Vite خود را بسازید

vite build

2) خود را بگیرید /dist دایرکتوری ، و ساخت یک سیستم فایل مجازی!

ما می توانیم از https://github.com/seveibar/make-vfs/ استفاده کنیم تا کل دایرکتوری Dist خود را بگیریم و آن را به عنوان یک پرونده .js مجدداً بازپرداخت کنیم. این می تواند یک پرونده نسبتاً سنگین ایجاد کند ، اما همانطور که ما به هر حال همه چیز را به عنوان باینری توزیع می کنیم ، مهم نیست!

bunx make-vfs --dir ./dist --content-format string --outfile ./dist/client-bundle-vfs.js

3) از Express برای بارگیری و سپس خدمت VFS خود استفاده کنید: (به repo مراجعه کنید)

import staticRoutes from "../../dist/client-bundle-vfs.js";
import { lookup } from "es-mime-types"
import express from "express";
import routes from "./routes.js";

const app = express();
// serve express routes
app.use(routes);
// serve the static bundled files
app.use((req, res, next) => {
  const url = new URL(req.url, `http://${req.headers.host}`);
  const path = url.pathname;
  const normalizedPath = path.replace(/^\//, "").replace(/\/$/, "");
  if (staticRoutes[normalizedPath]) {
    let mimeType = lookup(normalizedPath);
    return res.status(200).type(mimeType).send(staticRoutes[normalizedPath]);
  }
  next();
});

// Fallback to assist vue-router
app.use((req, res) => {
  return res.status(200).type("text/html").send(staticRoutes["index.html"]);
});


app.listen(3002, () => {
  console.log("Server is running on http://localhost:3002");
});

4) کاربرد نهایی خود را بسازید ، زیرا برنامه VFS را مصرف می کند ، همه چیز همراه است.

bun build ./src/server/main-compile.js --compile --outfile myServer