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

但我无法弄清楚正确的输出＆＃39;我的webpack构建的配置。我正在使用带有.babelrc的babel-env：

{
  "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']
    }
});

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

Uncaught SyntaxError：请求的模块不提供导出命名为＆＃39; ClassA＆＃39;

任何人都知道我做错了什么？我确定我错过了正确的网络包选项配置，但谷歌的数小时没有帮助。

Answer 1

Webpack中似乎有一个长期存在的feature request来解决这个问题。

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

如何正确地将Webpack库导出？

1 个答案: