[英]Serve a Parcel app subfolder as static files in express
I have a simple app (no frameworks) bundled with Parcel that I want to serve with express.我有一个与 Parcel 捆绑在一起的简单应用程序(无框架),我想使用 express 服务。 I have divided the app in three different subfolders "assets", "pages" and "admin" so I have a similar structure to this:
我将应用程序划分为三个不同的子文件夹“assets”、“pages”和“admin”,所以我的结构与此类似:
src
|
--assets
--admin
|
-- admin-folder
|
--index.html
--pages
|
--pages-folder
|
--index.html
Once the app is built and bundled with Parcel I want to serve both folders with two different express.static middlewares like:构建应用程序并与 Parcel 捆绑后,我想为两个文件夹提供两个不同的 express.static 中间件,例如:
app.use(express.static(path.join(__dirname, "dist", "pages"));
app.use("/admin", express.static(path.join(__dirname, "dist", "admin"));
I am not serving the whole "dist" folder because I wanted a cleaner URL without a "/pages" in the middle (eg. mywebsite.com/pages-folder and not mywebsite.com/pages/pages-folder) and because I can then authorize the access to the "/admin" part of the website.我没有提供整个“dist”文件夹,因为我想要一个更干净的 URL 中间没有“/pages”(例如 mywebsite.com/pages-folder 而不是 mywebsite.com/pages/pages-folder),因为我然后可以授权访问网站的“/admin”部分。 But, by doing so the bundle is broken since every reference (for example to the assets) is incorrect.
但是,这样做会破坏捆绑包,因为每个引用(例如对资产的引用)都是不正确的。 How can I fix this issue?
我该如何解决这个问题?
Although you could write a custom namer plugin to control the structure of the dist
folder (see, for example, my answer to this question ), I think that the approach you are taking of simply running parcel multiple times with different entries is probably simpler.尽管您可以编写一个自定义命名器插件来控制
dist
文件夹的结构(例如,参见我对这个问题的回答),但我认为您采用的方法是简单地使用不同的条目多次运行 parcel 可能更简单。
You can improve things further by specifiying the multiple entries in your package.json
as different targets .您可以通过将
package.json
中的多个条目指定为不同的目标来进一步改进。 That way you can build everything at once with a single call to the parcel build
CLI command.这样,您只需调用
parcel build
CLI 命令即可一次构建所有内容。
For example, if you had two source .html
pages at src/pages/index.html
and src/admin/index.hml
, your package.json
file might look like this: For example, if you had two source
.html
pages at src/pages/index.html
and src/admin/index.hml
, your package.json
file might look like this:
{
...
"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",
}
}
Which would generate output at /dist/pages/index.html
and /dist/admin/index.html
.这将在
/dist/pages/index.html
和 /dist/admin/index.html 处生成/dist/admin/index.html
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.