Я создал библиотеку JavaScript с помощью Webpack.Точка входа someClass.js выглядит следующим образом:
import x from './x'
/* several more imports here */
class SomeClass {}
export default SomeClass;
Моя конфигурация веб-пакета, которая связывает эту библиотеку, выглядит следующим образом:
module.exports = {
entry: './someClass.js',
output: {
path: __dirname,
filename: 'lib.js',
library: 'lib',
libraryTarget: 'umd',
},
Затем я импортирую сгенерированный lib.js в простой index.html, который определяется следующим образом:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="app.js" type="module"></script>
</body>
</html>
В app.js я просто пытаюсь импортировать файл следующим образом:
import * as lib from './lib.js';
console.log(lib);
// Output: Module {Symbol(Symbol.toStringTag): "Module"} Symbol(Symbol.toStringTag): "Module"
Однако этот оператор импорта, похоже, неработать как запланировано (я ожидаю, что модуль с полем default, который является моим SomeClass конструктором).
Единственный способ получить доступ к экспорту библиотеки по умолчанию SomeClass - это выполнить глобальный оператор импортав app.js следующим образом, который устанавливает lib как объект на window:
import './lib.js';
console.log(window.lib);
// Output: Module {default: ƒ, __esModule: true, Symbol(Symbol.toStringTag): "Module"} default: class SomeClass_SomeClass
Я не хочу, чтобы мой класс был доступен в глобальном window, поскольку это делает его жесткимдля модульности моего кода.
Я также хочу иметь возможность использовать эту библиотеку в различных местах в Интернете (реагировать на приложения, отдельные html-файлы и т. д.) и поэтому хочу минимизировать зависимости.
Что я могу сделать, чтобы импортировать модуль как импорт es6?