Webpack + babel, ReferenceError: класс не определен - PullRequest
Новая
       9

Webpack + babel, ReferenceError: класс не определен

0 голосов
/ 27 сентября 2019

Я пишу свою первую библиотеку JS и хотел научиться использовать babel и webpack.

Проблема, с которой я столкнулся, заключается в том, что класс (точка входа?), Который я хотел бы создать в моем *Файл 1003 * заставляет браузер жаловаться, что он "не определен".

Это моя конфигурация веб-пакета: 

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 из папки "demo", в которой у меня есть символические ссылки как на formr-editor.js (вывод webpack), так и на css.

У меня естьтакже пробовал var formr = new FormrEditor(document.getElementById('editor'), {}); без import согласно MarcRo, и я все еще получаю ту же ошибку.

Я пробовал export и export default в классе и ничего ...

1 Ответ

0 голосов
/ 27 сентября 2019

Есть несколько вещей, которые вы можете проверить.

  1. Вы не можете использовать импорт ES6 в браузере, как это - на самом деле оператор импорта совершенно не нужен.

  2. Ваш <script src="formr-editor"> кажется, что имеет неправильный путь.Ваш вывод веб-пакетов генерирует файл в dist / js / formr-editor.js.если вы хотите импортировать нетранслируемый файл src в свой браузер, используйте <script src="src..." type="module"> - убедитесь, что нетранслируемый файл также доступен.

  3. Как вы обслуживаете публичные ресурсы?Доступен ли ваш файл formr-editor.js (созданный веб-пакетами)?

  4. Вы хотите вызвать свой класс FormrEditor с ключевым словом new.

Примечание: вы можете проверить в своих инструментах dev для браузера, удастся ли вашему браузеру загрузить соответствующие файлы!

...