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&nbsp;/*output.library*/&nbsp;=&nbsp;module.exports.default&nbsp;/*output.libraryExport*/配置如下。/* Something here */module.exports = {&nbsp; entry: {&nbsp; &nbsp; main: './src/index.js'&nbsp; },&nbsp; output: {&nbsp; &nbsp; library: 'MyClass',&nbsp; &nbsp; libraryTarget: 'umd',&nbsp; &nbsp; libraryExport: 'default',&nbsp; // export the default as window.MyClass&nbsp; &nbsp; path: path.resolve(__dirname, 'lib'),&nbsp; &nbsp; filename: `package.js`&nbsp; }}在控制台中尝试一下。> window.MyClassclass {...}

Answer 2

如果仅将脚本设计为可在Web浏览器中运行，为什么不直接进行window显式更新：import MyClass from 'src/myClass'import 'src/myStyle.css'window.MyClass = MyClass;我认为这比使用间接更清楚。