Как использовать es6 в старом js?

Question

[Виктор Архипов]

Есть у меня класс:

export default class TestClass {
    constructor() {
        console.log('Hello!')
    }
}

потом webpack файл с этим классом прогоняет через babel и переносит в dist.

Я подключаю этот файл внутри html и так же внутри этого html хочу создать новый экземпляр класса TestClass

document.addEventListener("DOMContentLoaded", function(event) {
    var test = new TestClass();
});

Но в консоле пишет

TestClass is not defined

Answer 1

[Андрей Хохлов]

Вы неверно понимаете назначение вебпака. Его задача - собрать бандл из модулей.

main.js - точка входа, именно с ней должен поработать вебпак.

import TestClass from ‘./classes/TestClass‘;

document.addEventListener("DOMContentLoaded", function(event) {
    var test = new TestClass();
});

TestClass.js

export default class TestClass {
    constructor() {
        console.log('Hello!')
    }
}

Если же нужно класс инициализировать позже, извне, то как-то так:

main.js

import TestClass from ‘./classes/TestClass‘;

const App = {
  classes: {
    TestClass,
  },
};

window.App = App;