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: 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一起调用条目文件中的样式表？

Answer 1

如果仅将脚本设计为可在Web浏览器中运行，为什么不直接更新window：

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

window.MyClass = MyClass;

我认为这比使用间接访问要清楚得多。

Answer 2

在您的output.libraryExport中使用webpack.config.js。 （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 {...}