javascript - Webpack: Hogyan lehet közvetlenül exportálni a globális változóba (default használata nélkül), amely tartalmaz stíluslap importokat?

Kontextus

Van egy webpack.config.js-em így:

/* Something here */

module.exports = {
  entry: {
    main: './src/index.js'
  },
  output: {
    library: 'MyClass',
    libraryTarget: 'umd',
    path: path.resolve(__dirname, 'lib'),
    filename: `package.js`
  },
  ...
}

A ./src/index.js fájlom így néz ki:

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

export default MyClass

Probléma

Bár ez jól működik, a MyClass osztályt a window objektumnak teszi ki a következő módon:

console.log(window.MyClass)
=> Module {default: ƒ, __esModule: true, Symbol(Symbol.toStringTag): "Module"}

Így nem tudom meghívni az osztályomat az alábbiak használatával:

new MyClass();
=> TypeError: MyClass is not a constructor

Úgy kell meghívnom, hogy:

new MyClass.default();
=> MyClass { ... }

A problémát így tudom megoldani a saját ./src/index.js-emben:

const MyClass = require('src/myClass')
module.exports = MyClass

/* in browser */
new MyClass()
=> Good, works fine

Azonban így nem tudom importálni a stíluslapomat:

const MyClass = require('src/myClass')
import 'src/myStyle.css'

module.exports = MyClass
=> TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

Szerkesztés

A következő mód szintén megoldja a problémát, de export használata nélkül történik:

/* 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

Kérdés

Van-e a Webpack-ben mód arra, hogy egy modult közvetlenül a globális térbe exportáljak anélkül, hogy a .default-ot kellene hívnom és egyúttal egy stíluslapot importálnék a belépési fájlban?

Válasz #1

Használd a output.libraryExport-t a webpack.config.js-edben. (ref)

Az output.libraryTarget umd-ra állítása mellett az output.libraryExport megmondja a Webpacknak, hogy melyik tulajdonságot exportálja globális változóként, amelyet az output.library nevez meg.

Az Ön esetében, az eredeti konfigurációja mellett, a output.libraryExport értékét default-ra állítani egyenértékű azzal, mintha a következő részletet illesztené a lefordított kódja után.

window.MyClass /*output.library*/ = module.exports.default /*output.libraryExport*/

A konfiguráció a következőképpen fog kinézni.

/* Something here */

module.exports = {
  entry: {
    main: './src/index.js'
  },
  output: {
    library: 'MyClass',
    libraryTarget: 'umd',
    libraryExport: 'default',  // export the default as window.MyClass
    path: path.resolve(__dirname, 'lib'),
    filename: `package.js`
  }
}

Próbáld ki a konzolon.

> window.MyClass
class {...}

Válasz #2

Ha a scripted csak a web böngészőben futásra van tervezve, miért ne frissítenéd egyszerűen a window-t:

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

window.MyClass = MyClass;

Azt hiszem, ez sokkal világosabb, mint az indirekció használata.