如何正确的Webpack库导出？

Question

首先真正尝试使用webpack，我正在尝试创建可重用的库。我不知道如何正确导出我的库类。这是我目前正在做的事情的简要概述，以及我如何尝试使用已构建的内容。

我有这样的入口点：

import ClassA from './classA';
import ClassB from './classB';

export {ClassA, ClassB};

我想在应用程序需要时使用内置库来导入我的类：

import {ClassA} from './libs/library.js'; // currently using chrome flags for testing

但是我无法为我的webpack构建找出正确的“输出”配置。我正在将babel-env与.babelrc一起使用：

{
  "presets": [[
    "env", {
      "targets": {
        "browsers": "last 2 versions"
      }
    }
  ]]
}

和一个webpack配置，例如：

const path = require('path');

export default () => ({
    entry: __dirname + '/src/index.js',
    output: {
        path: path.resolve(__dirname, './libs'),
        filename: 'library.js',
        libraryTarget: 'umd',
        library: ''
    },
    externals: {},
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader"
            }
        },{
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: "eslint-loader"
            }
        }]
    },
    resolve: {
        modules: [path.resolve('./node_modules'), path.resolve('./src')],
        extensions: ['.json', '.js']
    }
});

但是，当尝试使用我的类时，通过前面显示的导入，我得到一个错误：

未捕获的SyntaxError：所请求的模块未提供名为“ ClassA”的导出

有人知道我在做什么错吗？我敢肯定我只是缺少正确的webpack选项配置，但是几个小时的Google并没有帮助。

Answer 1

Webpack 中似乎有一个长期存在的功能请求来解决这个问题。

同时，您也许可以执行一个简单的操作import './classA'，它将变量添加到全局范围（这是该libraryTarget: 'umd'选项的默认行为）