Webpack: Как экспортировать напрямую в глобальный (без .default), содержащий импорт таблиц стилей? - PullRequest
2 голосов
/ 02 мая 2019

Контекст

У меня есть 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 таблицей стилей в файле ввода?

1 Ответ

0 голосов
/ 02 мая 2019

Если ваш сценарий предназначен только для запуска в веб-браузере, почему бы просто не обновить window явно:

import MyClass from 'src/myClass'
import 'src/myStyle.css'

window.MyClass = MyClass;

Я думаю, что это намного яснее, чем использование косвенного обращения.

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