文件名中没有哈希值

Question

我试图编译一个基于摩纳哥编辑器的webcomponent(在一个lit元素上下文中)。在尝试了很多选项之后，我现在已经得到了两个文件

• rmx-monaco.abc123.js
• style.css

我的首要任务是摆脱哈希(abc123)，但我也想得到与js和css中的单个文件。提前感谢

我的配置如下:

import { resolve } from "path";
export default defineConfig({
base: "/",
build: {
rollupOptions: {
input:
// main: resolve(__dirname, "index.html"),
resolve(__dirname, "src/rmx-monaco.ts"),
output: {
// Prevent vendor.js being created
manualChunks: undefined,
// chunkFileNames: "zzz-[name].js",
// this got rid of the hash on style.css
assetFileNames: "assets/[name].[ext]",
},
},
// Prevent vendor.css being created
cssCodeSplit: false,
// prevent some warnings
chunkSizeWarningLimit: 60000,
},
});

我的js条目文件有这些行

import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
import { languages } from "monaco-editor/esm/vs/editor/editor.api";
import styles from "monaco-editor/min/vs/editor/editor.main.css";

(如果有帮助，我可以补充更多)

Answer 1

add this:

export default defineConfig({
...
build: {
rollupOptions: {
output: {
entryFileNames: `assets/[name].js`,
chunkFileNames: `assets/[name].js`,
assetFileNames: `assets/[name].[ext]`
}
}
}
})

Answer 2

我需要添加output: {entryFileNames: "[name].js",...

仍在获取单个文件

Answer 3

对于@joy-lab提供的答案的一个小补充:您可以使用回调自定义单个文件的文件名结构。我必须只删除Fontawesome精灵文件的哈希值:

const fontawesomeFileNames = [
"brands.svg",
"sharp-solid.svg",
"sharp-light.svg",
"sharp-regular.svg",
"solid.svg",
"regular.svg",
"light.svg",
"duotone.svg",
"thin.svg",
];
export default defineConfig({
...
build: {
rollupOptions: {
output: {
assetFileNames: function (file) {
return fontawesomeFileNames.includes(file.name)
? `assets/[name].[ext]`
: `assets/[name]-[hash].[ext]`;
},
}
}
}
})

这将保留所有文件的哈希值，除了名称包含在fontawesomeFileNames数组中的文件。

Answer 4

已经过去很长时间了，但是对于将来访问这个线程的浏览者，可以使用ViteJS尝试这个包来捆绑单个。html文件:https://github.com/richardtallent/vite-plugin-singlefile