Контекст
У меня есть webpack.config.js
, как это:
/* Something here */
module.exports = {
entry: {
main: './src/index.js'
},
output: {
library: 'MyClass',
libraryTarget: 'umd',
path: path.resolve(__dirname, 'lib'),
filename: `package.js`
},
...
}
Мой ./src/index.js
выглядит так:
import MyClass from 'src/myClass'
import 'src/myStyle.css'
export default MyClass
Задача
Хотя это работает нормально, класс MyClass
выставляется для window
объекта как:
console.log(window.MyClass)
=> Module {default: ƒ, __esModule: true, Symbol(Symbol.toStringTag): "Module"}
Таким образом, я не могу вызвать свой класс, используя:
new MyClass();
=> TypeError: Slidery is not a constructor
Я должен вызвать это как:
new MyClass.default();
=> MyClass { ... }
Я могу решить эту проблему, выполнив что-то подобное в моем ./src/index.js
:
const MyClass = require('src/myClass')
module.exports = MyClass
/* in browser */
new MyClass()
=> Good, works fine
Однако, таким образом, я не могу import
моя таблица стилей:
const MyClass = require('src/myClass')
import 'src/myStyle.css'
module.exports = MyClass
=> TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
Редактировать
Следующий способ также решает проблему, но выполняется без export
:
/* webpack.config.js */
module.exports = {
entry: {
main: './src/index.js'
},
output: {
/* Need to remove library related props */
// library: 'MyClass',
// libraryTarget: 'window',
path: path.resolve(__dirname, 'lib'),
filename: `package.js`
},
...
}
/* ./src/index.js */
import MyClass from 'src/myClass'
import 'src/myStyle.css'
window.MyClass = MyClass
Вопрос
Есть ли в Webpack способ для export
модуля напрямую к глобальному без необходимости одновременного вызова с .default
и import
таблицей стилей в файле ввода?