javascript - Webpack: Hvordan eksportere direkte til globalt (uten .default) som inneholder stilarkimporter?

Kontekst

Jeg har en webpack.config.js som dette:

/* Something here */

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

Min ./src/index.js ser slik ut:

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

export default MyClass

Problem

Selv om dette fungerer fint, eksponerer det MyClass-klassen til window-objektet som:

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

På denne måten kan jeg ikke kalle opp klassen min ved å bruke:

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

Jeg må kalle den slik:

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

Jeg kan løse problemet ved å gjøre noe slikt i min ./src/index.js:

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

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

Men på denne måten kan jeg ikke importere stilarket mitt:

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

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

Rediger

Følgende måte løser også problemet, men gjøres uten en 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

Spørsmål

Finnes det en måte i Webpack for meg å exportere et modul direkte til globalt uten å måtte bruke .default og samtidig importere et stilark i inngangsfilen?

Svar #1

Bruk output.libraryExport i din webpack.config.js. (ref)

Sammen med output.libraryTarget satt til umd, forteller output.libraryExport Webpack hvilken egenskap som skal eksporteres som den globale variabelen navngitt av output.library.

I ditt tilfelle, i tillegg til din opprinnelige konfigurasjon, er det å sette output.libraryExport til default ekvivalent med å legge til følgende utdrag etter din kompilerte kode.

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

Konfigurasjonen vil være som følger.

/* 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øv det i konsollen.

> window.MyClass
class {...}

Svar #2

Hvis skriptet ditt bare er laget for å kjøre i nettleseren, hvorfor ikke bare oppdatere window eksplisitt:

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

window.MyClass = MyClass;

Jeg synes dette er mye klarere enn å bruke omveier.