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尚未定义...

更多信息：

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

根据MarcRo，我也尝试了不使用var formr = new FormrEditor(document.getElementById('editor'), {});的{{1}}，但仍然出现相同的错误。

我在课堂上尝试了import和export，但没有尝试...

Answer 1

您可能需要检查几件事。

您不能像这样在浏览器中使用ES6导入-实际上完全不需要import语句。
您的<script src="formr-editor">似乎路径错误。您的webpacks输出将在dist / js / formr-editor.js处生成一个文件。如果要在浏览器中导入未编译的src文件，请使用<script src="src..." type="module">-确保也可以访问未编译的文件。
您如何服务公共资产？您的formr-editor.js文件（由Webpack生成）可以访问吗？
您想使用new关键字来调用FormrEditor类。

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

Webpack + babel，ReferenceError：类未定义

1 个答案: