【问题标题】：Exposing a default variable to the browser when building a JS library with Webpack使用 Webpack 构建 JS 库时向浏览器公开默认变量
【发布时间】：2020-06-23 04:41:24
【问题描述】：

我有一个 JS 类，我想用 Webpack 将它构建到一个库中。

class MyCoolComponent {

  constructor(a, b, c) {
  }

  render() {
    // Do stuff
  }

}

export default MyCoolComponent;

最终目标是让最终用户获取我的脚本（带有<script> 标签）并将MyCoolComponent 变量作为全局变量公开在他们的浏览器中。

According to the Webpack docs，我可以通过在我的 Webpack 配置文件中配置 library 和 libraryTarget 来公开变量：

output: {
  // ...
  library: 'MyCoolComponent',
  libraryTarget: 'var',
  // ...
},

当我捆绑脚本、在页面上获取它并尝试在浏览器控制台中访问 MyCoolComponent 时，我收到以下错误：

var mcc = new MyCoolComponent('a', 'b', 'c');
=> TypeError: MyCoolComponent is not a constructor

我注意到MyCoolComponent 实际上是一个带有default 键的对象，如果我直接访问该键，它就可以工作：

var mcc = new MyCoolComponent.default('a', 'b', 'c');
=> (No Error)

为什么会发生这种情况？我在JS文件中指定了export default MyCoolComponent，那么class不应该是默认导出的吗？
如何配置导出，这样我就不必使用.default() 访问它？

谢谢！

编辑 - Webpack 配置

var DEMO_BUILD_DIR = path.resolve(__dirname, 'docs');
var DEMO_SRC_DIR = path.resolve(__dirname, 'demo');
var DIST_DIR = path.resolve(__dirname, 'dist');
var SRC_DIR = path.resolve(__dirname, 'src');

var config = {
  entry: SRC_DIR + '/components/MyCoolComponent/MyCoolComponent.js',
  output: {
    path: DIST_DIR,
    filename: 'index.js',
    library: 'MyCoolComponent',
    libraryTarget: 'var'
  },
  externals: {},
  plugins: [
    new MiniCssExtractPlugin()
  ],
  devtool: 'source-map',
  mode: process.env.NODE_ENV,
  resolve: {
    extensions: ['.js', '.sass', '.scss', '.css'],
    modules: [
      SRC_DIR,
      'node_modules'
    ]
  },
  resolveLoader: {
    modules: ['node_modules']
  },
  module: {
    strictExportPresence: true,
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: { hmr: process.env.NODE_ENV == 'development' },
          },
          'css-loader',
        ],
      },
      {
        test: /\.(sass|scss)$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: { hmr: process.env.NODE_ENV == 'development' },
          },
          'css-loader',
          'sass-loader'
        ],
      },
      {
        test: /\.(js)$/,
        exclude: /node_modules/,
        use: [
          'babel-loader'
        ]
      }
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
};

【问题讨论】：

你错误配置了 webpack，确保你的基本配置。
添加你的 webpack 配置以便我们检查。
编辑添加 webpack 配置！

标签： javascript webpack es6-modules

【解决方案1】：

看起来 Webpack 通过指定 libraryExport 选项来支持这种情况

libraryExport: 'default' - 入口点的默认导出将分配给库目标：

// if your entry has a default export of `MyDefaultModule`
var MyDefaultModule = _entry_return_.default;

所以我只需要添加选项，效果很好：

 output: {
   // ...
   library: 'MyCoolComponent',
   libraryTarget: 'var',
+  libraryExport: 'default'
   // ...
 },

【讨论】：