Javascript Webpack：如何直接导出到包含样式表导入的全局（无.default）中？ 上下文

我有一个像这样的

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`
  },
  ...
}

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

export default MyClass

我的

/src/index.js

如下所示：

/* Something here */

module.exports = {
  entry: {
    main: './src/index.js'
  },
  output: {
    library: 'MyClass',
    libraryTarget: 'umd',
    path: path.resolve(__dirname, 'lib'),
    filename: `package.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

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

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

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

问题:

---

在Webpack中是否有一种方法可以将模块直接导出到全局，而无需使用

。默认值
，同时
导入条目文件中的样式表？
如果您的脚本仅设计为在web浏览器中运行，为什么不显式更新
窗口
：

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

window.MyClass = MyClass;

我认为这比使用间接寻址要清楚得多。
在
webpack.config.js
中使用
output.libraryExport
。（）

随着
output.libraryTarget
设置为
umd
，
output.libraryExport
告诉网页哪个属性要导出为
output.library
命名的全局变量

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

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

配置如下所示

/*这里有些东西*/
module.exports={
条目：{
main:“./src/index.js”
},
输出：{
库：“MyClass”，
图书馆目标：“umd”，
libraryExport:'默认值'，//将默认值导出为window.MyClass
path:path.resolve（uu dirname，'lib'），
文件名：`package.js`
}
}

在控制台中尝试一下

> window.MyClass
class {...}

这确实是一个我从未想过的解决办法。但是我对使用
export
语法更感兴趣。如果它也是为服务器环境设计的呢？