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

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 to control the structure of the dist folder (see, for example, my answer to this question)，但我认为您采用的方法只是运行多次包裹不同的条目可能更简单。

您可以通过将 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 处生成输出。

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

Serve a Parcel app subfolder as static files in express

html

javascript

node.js

express

parceljs