Vite构建Monaco Editor WebComponent如何移除文件名hash并打包为单文件

解决方法 #

以下配置可以同时满足你移除JS文件名hash、合并JS/CSS为单个文件的需求：

1. 调整Vite配置

核心修改点：开启库模式、关闭CSS抽离、强制所有文件命名不带hash，完整配置如下：

import { defineConfig } from "vite";
import { resolve } from "path";

export default defineConfig({
    base: "/",
    build: {
        // 开启库模式，适配WebComponent组件输出场景
        lib: {
            entry: resolve(__dirname, "src/rmx-monaco.ts"),
            formats: ["es"],
            // 直接指定输出JS文件名，完全不带hash
            fileName: () => "rmx-monaco.js"
        },
        rollupOptions: {
            output: {
                // 禁用拆包，确保所有逻辑合并到单个文件
                manualChunks: undefined,
                assetFileNames: "assets/[name].[ext]",
            },
        },
        cssCodeSplit: false,
        // 关闭CSS抽离，所有样式直接注入到JS文件中
        css: {
            extract: false
        },
        chunkSizeWarningLimit: 60000,
    },
});

2. 调整Lit组件样式注入逻辑

你已经导入了Monaco的CSS文件，只需将它注入到Lit组件的样式列表中，即可让样式跟随JS生效，无需单独引入CSS文件：

import { LitElement, css } from 'lit';
import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
import { languages } from "monaco-editor/esm/vs/editor/editor.api";
// 导入的Monaco样式会被Vite转为字符串直接内置到JS中
import monacoMainStyles from "monaco-editor/min/vs/editor/editor.main.css";

export class RmxMonaco extends LitElement {
    static styles = [
        // 你的自定义组件样式
        css`
            :host {
                display: block;
                width: 100%;
                height: 400px;
            }
        `,
        // 注入Monaco样式，转换为Lit支持的CSS格式
        css([monacoMainStyles] as unknown as TemplateStringsArray)
    ];

    // 其余组件逻辑保持不变
}

打包验证

执行构建命令后，dist目录下只会生成单个 rmx-monaco.js 文件，无多余CSS文件，文件名也没有hash后缀。

内容的提问来源于stack exchange，提问作者Simon H