如何引入特定JS模块替代bundle.min.js以调试Stacks Editor？

我正尝试在项目中使用Stacks。问题在于我想要调试某个特定JavaScript文件，但由于引入了完整的打包文件，调试器打开的是min.js文件而非特定模块。请问如何才能不依赖min.js，转而单独引入所有文件？

编辑补充
以下是我当前使用min文件运行编辑器的方式，需要修改哪些内容才能不引用min文件？

<!DOCTYPE html>
<html>
    <head>
        <title>Markdown Editor</title>
        <!--include Stacks -->
        <link
            rel="stylesheet"
            href="./node_modules/@stackoverflow/stacks/dist/css/stacks.css"
        />
        <!-- include the bundled styles -->
        <link
            rel="stylesheet"
            href="./node_modules/@stackoverflow/stacks-editor/dist/styles.css"
        />

        <!-- highlight.js is not included in the bundle, so include it as well if you want it -->
        <script src="//unpkg.com/@highlightjs/cdn-assets@latest/highlight.min.js"></script>
        <!--include Stacks -->
        <script src="./node_modules/@stackoverflow/stacks/dist/js/stacks.min.js"></script>
        <!-- include the bundle -->
        <script src="./node_modules/@stackoverflow/stacks-editor/dist/app.bundle.js"></script>

        <script
            src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_HTML-full"
        ></script>
    </head>

    <body>
        <div style="margin: 20px; width: 800px">
            <div id="editor-container"></div>
            <!-- initialize the editor -->
            <script>
                new window.stacksEditor.StacksEditor(
                    document.querySelector("#editor-container"),
                    "*Your* **markdown** here",
                    {}
                );
            </script>
        </div>
    </body>
</html>

要替换打包后的压缩文件为可调试的单独模块，按以下步骤修改：

1. 替换Stacks的JS引入 #

@stackoverflow/stacks的dist/js目录下自带未压缩的stacks.js文件，直接替换原有的压缩版引入：

<!-- 替换原有的stacks.min.js -->
<script src="./node_modules/@stackoverflow/stacks/dist/js/stacks.js"></script>

2. 改用ES模块引入Stacks Editor #

Stacks Editor采用ES模块结构，可直接引入源码文件进行调试：

步骤2.1：移除打包的编辑器文件 #

删掉这一行打包文件的引入：

<script src="./node_modules/@stackoverflow/stacks-editor/dist/app.bundle.js"></script>

步骤2.2：添加模块加载脚本 #

新增一个type="module"的script标签，直接引入编辑器源码的入口文件并初始化：

<script type="module">
    // 从源码入口引入编辑器核心类
    import { StacksEditor } from './node_modules/@stackoverflow/stacks-editor/src/index.js';
    
    // 初始化逻辑和原代码一致
    new StacksEditor(
        document.querySelector("#editor-container"),
        "*Your* **markdown** here",
        {}
    );
</script>

3. 调试注意事项 #

• 本地直接打开HTML文件可能触发跨域限制，建议用http-server这类本地开发服务器运行项目。
• 浏览器开发者工具的「源代码」面板中，可直接找到node_modules/@stackoverflow/stacks-editor/src下的对应模块文件，设置断点调试。
• 编辑器的依赖模块会通过ES模块的import自动加载，无需手动逐个引入。

最终修改后的完整代码 #

<!DOCTYPE html>
<html>
    <head>
        <title>Markdown Editor</title>
        <!--include Stacks -->
        <link
            rel="stylesheet"
            href="./node_modules/@stackoverflow/stacks/dist/css/stacks.css"
        />
        <!-- include the bundled styles -->
        <link
            rel="stylesheet"
            href="./node_modules/@stackoverflow/stacks-editor/dist/styles.css"
        />

        <!-- highlight.js is not included in the bundle, so include it as well if you want it -->
        <script src="//unpkg.com/@highlightjs/cdn-assets@latest/highlight.min.js"></script>
        <!--include Stacks 未压缩版 -->
        <script src="./node_modules/@stackoverflow/stacks/dist/js/stacks.js"></script>

        <script
            src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_HTML-full"
        ></script>
    </head>

    <body>
        <div style="margin: 20px; width: 800px">
            <div id="editor-container"></div>
            <!-- 用ES模块方式初始化编辑器 -->
            <script type="module">
                import { StacksEditor } from './node_modules/@stackoverflow/stacks-editor/src/index.js';
                new StacksEditor(
                    document.querySelector("#editor-container"),
                    "*Your* **markdown** here",
                    {}
                );
            </script>
        </div>
    </body>
</html>

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