javascript - Webpack:如何直接导出到包含样式表导入的全局(没有.default)？

Question

上下文

我有一个像这样的 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: MyClass 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

但是，通过这种方式，我无法导入我的样式表:

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 和何时在入口文件中导入样式表？

Answer 1

在 webpack.config.js 中使用 output.libraryExport。 ( ref )

连同 output.libraryTarget 设置为 umd，output.libraryExport 告诉 Webpack 将哪个属性导出为由output.library.

在您的情况下，除了原始配置之外，将 output.libraryExport 设置为 default 等同于在编译后的代码后附加以下代码段。

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

配置如下。

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

在控制台中试一试。

> window.MyClass
class {...}