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

output.libraryExport在您的中使用webpack.config.js。（参考）

连同output.libraryTargetset to一起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 {...}

Answer 2

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

import MyClass from 'src/myClass'

import 'src/myStyle.css'

window.MyClass = MyClass;

我认为这比使用间接更清楚。