Webpack + babel，ReferenceError：未定义类

Question

我正在编写我的第一个 JS 库，想学习使用 babel 和 webpack。

我遇到的问题是我想在 index.htm 文件中实例化的类（入口点？）导致浏览器抱怨它“未定义”。

这是我的 webpack 配置：

const path = require('path');

module.exports = {
    entry: path.resolve(__dirname, './src/js/FormrEditor.js'),
    output: {
        filename: 'formr-editor.js',
        path: path.resolve(__dirname, 'dist/js'),
    },
    devtool: "source-map",
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: '/node_modules/',
                query: {
                    presets: ['@babel/env']
                }
            }
        ]
    },
};

还有js：

import {Toolbox, ToolboxItem} from "./Toolbox";

export default class FormrEditor{
    constructor(element, config){

        /** Find the element to use as the container */
        if(element instanceof Element)
            this.container = element;
        else
            this.container = document.getElementById(element);

        this.container.classList.add("feditor")

        this.buildEditorDom();
    }

    buildEditorDom()
    {
        let form = document.createElement("div");
        form.classList.add("feditor-form");

        let toolbox = document.createElement("div");
        toolbox.classList.add("feditor-toolbox");

        let handle = document.createElement("div");
        handle.classList.add("feditor-toolbox-handle");

        let testItem = document.createElement("div");
        testItem.classList.add("feditor-toolbox-item");

        toolbox.appendChild(handle);
        toolbox.appendChild(testItem);

        this.container.appendChild(form);
        this.container.appendChild(toolbox);

        this.toolbox = new Toolbox(toolbox);
        this.form = form;
    }
}

所以在我正在做的index.htm 文件中：

<script src="formr-editor.js"></script>
<script>
    import FormrEditor from "./formr-editor";

    var formr = FormrEditor(document.getElementById('editor'), {});
</script>

这就是它抱怨 FormrEditor 没有定义的时候......

更多信息：

我正在从“演示”文件夹中提供 index.htm，其中我有指向 formr-editor.js（webpack 的输出）和 css 的符号链接。

我也按照 MarcRo 尝试了 var formr = new FormrEditor(document.getElementById('editor'), {}); 没有 import ，但我仍然遇到同样的错误。

我已经在课堂上尝试过export 和export default，但什么都没有...

Answer 1

您可能需要检查一些事项。

1. 你不能像这样在浏览器中使用 ES6 导入 - 实际上 import 语句是完全没有必要的。

2. 您的<script src="formr-editor"> 似乎路径错误。你的 webpacks 输出在 dist/js/formr-editor.js 生成一个文件。如果您想在浏览器中导入未转译的 src 文件，请使用 <script src="src..." type="module"> - 确保也可以访问未转译的文件。

3. 您如何为公共资产提供服务？您的 formr-editor.js 文件（由 webpacks 生成）是否可访问？

4. 您想使用 new 关键字调用 FormrEditor 类。

注意：您可以在浏览器开发工具中检查您的浏览器是否能够加载相应的文件！