javascript - Webpack: Stil dosyası importlarını içeren bir şeyi doğrudan global olarak nasıl dışa aktarabilirim (.default olmadan)?

Bağlam

Benim şöyle bir webpack.config.js dosyam var:

/* Something here */

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

Benim ./src/index.js dosyam şöyle görünüyor:

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

export default MyClass

Problem

Bu sorunsuz çalışsa da, MyClass sınıfını window nesnesine şöyle açığa çıkarır:

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

Bu şekilde, sınıfımı şunu kullanarak çağırmam mümkün değil:

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

Bunu şöyle çağırmam gerekiyor:

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

Şu şekilde ./src/index.js dosyamda bir şey yaparak problemi çözebilirim:

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

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

Ancak, bu şekilde stil sayfamı import edemem:

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

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

Düzenle

Aşağıdaki yol da problemi çözer, ancak export kullanılmadan yapılır:

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

Soru

Webpack'te, bir modülü doğrudan globale export etmek için ve aynı zamanda giriş dosyasında bir stil sayfasını import etmek zorunda kalmadan bir yol var mı?

Cevap #1

webpack.config.js dosyanızda output.libraryExport kullanın. (ref)

output.libraryTarget umd olarak ayarlanmasının yanı sıra, output.libraryExport Webpack'e output.library ile adlandırılan global değişken olarak hangi özelliğin dışa aktarılacağını söyler.

Sizin durumunuzda, orijinal yapılandırmanıza ek olarak, output.libraryExport değerini default olarak ayarlamak, derlenmiş kodunuzun sonuna aşağıdaki parçacığı eklemekle eşdeğerdir.

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

Yapılandırma aşağıdaki gibi olacak.

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

Konsolda bir dene.

> window.MyClass
class {...}

Cevap #2

Eğer scriptiniz yalnızca web tarayıcısında çalışmak için tasarlandıysa, neden sadece window öğesini açıkça güncellemiyorsunuz:

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

window.MyClass = MyClass;

Bence bu, dolaylı kullanım yapmaktan çok daha net.