将 Parcel 应用程序子文件夹作为 express 中的静态文件提供服务

Question

我有一个与 Parcel 捆绑在一起的简单应用程序（无框架），我想通过 express 提供服务。 我将应用程序划分为三个不同的子文件夹“assets”、“pages”和“admin”，所以我的结构与此类似：

src
  |
  --assets
  --admin
        |
        -- admin-folder
                      |
                      --index.html 
  --pages
        |
        --pages-folder
                     |
                     --index.html

一旦应用程序被构建并与 Parcel 捆绑，我想为这两个文件夹提供两个不同的 express.static 中间件，例如：

app.use(express.static(path.join(__dirname, "dist", "pages"));
app.use("/admin", express.static(path.join(__dirname, "dist", "admin"));

我没有提供整个“dist”文件夹，因为我想要一个更简洁的 URL，中间没有“/pages”（例如 mywebsite.com/pages-folder 而不是 mywebsite.com/pages/pages-folder）因为我可以授权访问网站的“/admin”部分。 但是，这样做会破坏捆绑包，因为每个引用（例如对资产的引用）都是不正确的。我该如何解决这个问题？

Answer 1

虽然您可以编写一个custom namer plugin 来控制dist 文件夹的结构（例如，请参阅我对this question 的回答），但我认为您采用的方法是简单地多次运行parcel不同的条目可能更简单。

您可以通过将package.json 中的多个条目指定为不同的targets 来进一步改进。这样，您只需调用 parcel build CLI 命令即可一次构建所有内容。

例如，如果您在src/pages/index.html 和src/admin/index.hml 有两个源.html 页面，您的package.json 文件可能如下所示：

{
  ...
  "targets": {
    "pages": {
      "source": "src/pages/index.html",
      "distDir": "dist/pages"
    },
    "admin": {
      "source": "src/admin/index.html",
      "distDir": "dist/admin"
    }
  },
  "scripts": {
    "build": "parcel build",
  },
  "devDependencies": {
    "parcel": "^2.0.1",
  }
}

这将在/dist/pages/index.html 和/dist/admin/index.html 生成输出。