Javascript 无法导出Web包中的API

我正在用Javascript创建一个库，并使用Webpack将其作为捆绑包

.js

文件发送。以下文件

lib.js

用作Webpack的条目，以公开库中的所有API：

import * as bodies from "./bodies.js";
import * as composites from "./composites.js";
import * as connections from "./connections.js";

export var bodies = {
    Body: bodies.Body,
    Pyramid: composites.Pyramid
};

export var connections = {
    Connection: connections.Connections
};

导入的所有文件基本上都会导出我在

lib.js

中引用的类：

// In bodies.js
export class Body { ... };

// In composites.js
export class Pyramid { ... };

// In connections.js
export class Connection { ... };

使用Webpack进行捆绑的文件是：

const path = require('path');
module.exports = {
    entry: './lib.js',
    output: {
        filename: 'lib-bundle.js',
        path: path.resolve(__dirname, 'out')
    },
    module: {
        rules: [
            /* In order to transpile ES6 */
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: { presets: ['env'] }
                }
            }
        ],  
    }
};

Webpack成功地捆绑了所有内容，最终我得到了我的lib文件

使用它的问题 然后我在另一个项目中使用它：

import * as mylib from "./lib/lib-bundle.js";

// Trying to use Pyramid
var pyramid = new mylib.bodies.Pyramid();

我再次使用Webpack将此文件捆绑到名为

start.js

的文件中，并将其导入我的页面：

<script type="application/javascript" src="./start.js"></script>

但是，当运行此页面时，我得到一个错误。如果我运行F12工具，并尝试在包中创建金字塔的实例，在那里我可以清楚地看到对象mylib没有我公开的任何内容。它是空的，没有我以前接触过的所有物体

---

我做错了什么？

您需要在网页配置文件的

输出
部分指定
库目标

使用它，捆绑包将正确导出您定义的值，这
然后可以使用各种模块装入器导入

我建议使用
libraryTarget:“umd”
，因为它将增加对最常用加载程序的支持。从：

这将在所有模块定义下公开您的库，允许它与CommonJS、AMD和作为全局变量一起工作

生成的网页包配置文件如下所示：

const path = require('path');
module.exports = {
    entry: './lib.js',
    output: {
        filename: 'lib-bundle.js',
        path: path.resolve(__dirname, 'out'),
        libraryTarget: 'umd',
    },
    module: {
        rules: [
            /* In order to transpile ES6 */
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: { presets: ['env'] }
                }
            }
        ],  
    }
};

尝试将
libraryTarget:“umd”
添加到网页配置文件的
输出部分它的作用是什么？它在改变什么？只是好奇……从：
这将在所有模块定义下公开您的库，允许它与CommonJS、AMD和作为全局变量一起工作。
它工作：）请发布答案！我试过医生，但不太容易理解。参数
输出
，用于什么？您只添加了
libraryTarget
，但文档似乎热衷于建议开发人员也使用
library
…基本上
library
定义了全局对象的名称，在其中设置所有导出值，以防您直接使用
元素包含库。例如
库：“Foo”
将创建
window.Foo={Body，Pyramid，Connection}在您的情况下