如何在`html`文件中从`js`文件导入类？

Question

如何在`html`文件中从`js`文件导入类？

4

我有以下问题：我想在HTML文件中创建一个类的实例。这是我的结构：

.js file with the class to be included

在HTML主体内部，我想要做：

<!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" />

  <!--include Stacks -->
  <script src="./node_modules/@stackoverflow/stacks/dist/js/stacks.js"></script>



  <!-- PROBLEMATIC PART! -->
  <script type="module" src="./node_modules/@stackoverflow/stacks-editor/dist/stacks-editor/editor.js"></script>


</head>

<body>
  <div style="margin: 20px; width: 800px">
    <div id="editor-container"></div>
    <!-- initialize the editor -->
    <!-- BELOW FAILS! -->
    <script>
      new StacksEditor(
        document.querySelector("#editor-container"), {}
      );
    </script>
  </div>
</body>

</html>

很遗憾，编辑器没有出现，控制台显示以下错误：

Console error

我做错了什么？

编辑唯一剩下的问题是VITE没有捕捉到我的更改。我在node_modules\@stackoverflow\stacks-editor\dist\stacks-editor\editor.js中编辑了构造函数，如下所示（添加了注释）

构造函数中添加了注释

但是在浏览器中并没有捕捉到这些更改：

devTools

然而，当我右键点击 + 在新标签页中打开时，我的注释就在那里输入图像描述

- Kernier

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alexander Nenashev · Accepted Answer

在现今的开发中，没有使用打包工具感觉非常过时。我强烈推荐使用一个打包工具，我推荐 Vite。

OP的目标是修改和调试 node_modules/@stackoverflow/stacks-editor/ 中的文件。

我不知道为什么，但设置Vite来处理这个问题很有趣。stacks-editor NPM包提供了两种嵌入方式：通过打包工具（EMS或CommonJS）和<script>。而<script>链接已经打包好了的代码。因此我们选择使用Vite来处理项目。

但是我们在这里遇到了一个未解决的问题：NPM包是具有CommonJS依赖的，而Vite不支持排除CommonJS包从其依赖预打包中！所以我们被困在了Vite的开发服务器上...

下一步尝试是与构建一起工作，并要求Rollup做一些事情。基本上，我们有watch选项来监视node_modules中的一个目录，这个例子正是添加watch选项的功能请求！出于某种原因，这个选项不起作用，使用npx vite build --watch不会重新构建项目...

我的下一步将是在Rollup的github上报告这个问题。

所以...我们只能采取最后的办法：我们监视文件并重新运行构建。对于Linux来说，我已经安装了`entr`并运行了以下命令：

find node_modules/@stacksoverflow/stacks-editor | entr npx vite build

现在我们可以更改stacks-editor代码中的代码，页面会自动重新构建...

为了舒适地进行构建调试，我们需要关闭压缩和树摇。

唯一的问题是你不能调试原始文件，而是编译后的文件。

所以现在当我在源代码中写入：

export class StacksEditor {
    constructor(target, content, options = {}) {
        debugger;
        console.log('EDITOR CONSTRUCTOR')
        // do a deep merge of the passed options with our default options
        this.options = deepMerge(StacksEditor.defaultOptions, options);
        this.target = target;
        // naively generate a random internalId for this editor instance
        this.internalId = generateRandomId();
        this.innerTarget = document.createElement("div");
        this.target.appendChild(this.innerTarget);
        this.setupPluginContainer();
        this.pluginProvider = new ExternalPluginProvider(this.options.editorPlugins, this.options);
        this.setBackingView(this.options.defaultView, content);
    }

当我加载页面时，我得到的是：

vite.config.js

import { defineConfig } from 'vite';

export default defineConfig({
    build: {
        minify: false,
        rollupOptions: {
            treeshake: false
        }
    }
});

package.json

{
  "name": "stacks-editor",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "vite": "^4.3.9"
  },
  "dependencies": {
    "@stackoverflow/stacks-editor": "^0.8.7"
  }
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="editor-container"></div>
    <script type="module" src="/main.js"></script>
  </body>
</html>

main.js

import { StacksEditor } from "@stackoverflow/stacks-editor";
// don't forget to include the styles as well
import "@stackoverflow/stacks-editor/dist/styles.css";
// include the Stacks js and css as they're not included in the bundle
import "@stackoverflow/stacks";
import "@stackoverflow/stacks/dist/css/stacks.css";

new StacksEditor(
    document.querySelector("#editor-container"),
    "*Your* **markdown** here"
);

安装、构建和运行Vite生产服务器：

npm install
find node_modules/@stacksoverflow/stacks-editor | entr npx vite build
npx vite preview