Webpack：如何直接导出到包含样式表导入的全局（不带.default）？

Question

语境

\n

我有一个webpack.config.js这样的：

\n

/* Something here */\n\nmodule.exports = {\n  entry: {\n    main: './src/index.js'\n  },\n  output: {\n    library: 'MyClass',\n    libraryTarget: 'umd',\n    path: path.resolve(__dirname, 'lib'),\n    filename: `package.js`\n  },\n  ...\n}\n

\n

我的./src/index.js看起来像这样：

\n

import MyClass from 'src/myClass'\nimport 'src/myStyle.css'\n\nexport default MyClass\n

\n

问题

\n

虽然这工作正常，但它将MyClass类暴露给window对象：

\n

console.log(window.MyClass)\n=> Module {default: \xc6\x92, __esModule: true, Symbol(Symbol.toStringTag): "Module"}\n

\n

这样，我就无法使用以下方式调用我的类：

\n

new MyClass();\n=> TypeError: MyClass is not a constructor\n

\n

我必须像这样调用它：

\n

new MyClass.default();\n=> MyClass { ... }\n

\n

我可以通过在我的中执行类似的操作来解决问题./src/index.js：

\n

const MyClass = require('src/myClass')\nmodule.exports = MyClass\n\n/* in browser */\nnew MyClass()\n=> Good, works fine\n

\n

但是，这样，我就无法使用import我的样式表：

\n

const MyClass = require('src/myClass')\nimport 'src/myStyle.css'\n\nmodule.exports = MyClass\n=> TypeError: Cannot assign to read only property 'exports' of object '#<Object>'\n

\n

编辑

\n

下面的方法也解决了这个问题，但是没有export:

\n

/* webpack.config.js */\nmodule.exports = {\n  entry: {\n    main: './src/index.js'\n  },\n  output: {\n    /* Need to remove library related props */\n    // library: 'MyClass',\n    // libraryTarget: 'window',\n    path: path.resolve(__dirname, 'lib'),\n    filename: `package.js`\n  },\n  ...\n}\n\n/* ./src/index.js */\nimport MyClass from 'src/myClass'\nimport 'src/myStyle.css'\n\nwindow.MyClass = MyClass\n

\n

问题

\n

Webpack 中有没有一种方法可以让我将export模块直接全局化，而不必同时调用.default 入口文件import中的样式表？

\n

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 {...}