Webpack: как предоставить конструктор класса глобальному пространству имен браузера - PullRequest
Новая
       0

Webpack: как предоставить конструктор класса глобальному пространству имен браузера

0 голосов
/ 28 февраля 2019

Я новичок в webpack и не могу понять, как представить конструктор класса глобальному пространству имен браузера.Например, как мне настроить webpack таким образом, чтобы приведенный ниже код выводил «hello world» на консоль?Я безуспешно пытался использовать exports-loader, expose-loader и script-loader.

main.js 

class MyClass {
  print() {
    console.log('hello world');
  }
}

index.html

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <script src="./dist/bundle.js"></script>
    <script>
      myClass = new MyClass;
      myClass.print();
    </script>
  </body>
</html>

1 Ответ

0 голосов
/ 28 февраля 2019

Вы можете:

a) Явно представить свою функцию (класс):

main.js 

class MyClass {
  print() {
    console.log('hello world');
  }
}

window.MyClass = MyClass;

Затем вы можете вызывать ваш конструктор из глобального объекта, напрямую ссылаясь на MyClass.

b) Сконфигурировать веб-пакет для отображения ваших экспортов в глобальном объекте следующим образом:

webpack.config.js 

module.exports = {
    output: {
        library: 'someName',
        libraryTarget: 'umd',
        globalObject: 'this'
    }
}

Затем вы можете вызвать ваш конструктор, сославшись на экспортированную функцию (класс) в глобальной переменной, настроенной как опция library в указанном выше файле конфигурации.В этом примере someName.MyClass.Чтобы это работало, вы должны экспортировать функцию в файл main.js, как показано ниже.

main.js 

export class MyClass {
    print() {
        console.log('hello world');
    }
}

См. выход веб-пакетаКонфигурация для более подробной информации.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...