1

我正在尝试使用 webpack（v 5.6.0）将一些 JavaScript 捆绑到一个 ESM（又名 ES6 模块，ECMAScript 模块）中，它不能自行运行，而是可以用作另一个应用程序的库。我希望其他应用程序可以选择简单地包含这个库，<script src="..." type="module">而不必有自己的构建步骤并担心依赖关系。

在库的项目中，我已添加"type": "module"到 mypackage.json以使其知道它是 ESM，并且我有一个src文件夹，其中包含一个index.js和一个dist用于 webpack 输出的文件夹。

我的webpack.config.cjs文件看起来像：

const path = require('path');

module.exports = {
    entry: {
        index: './src/index.js',
        // plan to have more here for code spliting
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: '[name].bundle.min.js',
    },
    optimization: {
        // removeEmptyChunks: false, // Tried this, didn't seem to help
    },
};

我的简化版本index.js是：

const hello = () => { console.log('Hello world'); };
export default { hello };

最终这里会有实际的代码、许多不同的文件、依赖项等。

当我运行 webpack 时，会index.bundle.min.js创建一个文件，但它是完全空白的。对于这个简单的示例，我希望它看起来非常像源文件。似乎 Webpack 正在丢弃未运行的代码，这在某些情况下可能是有用的优化，但这不是我想要的。

如果我添加hello();到我的index.jsthen 我确实在我的构建文件中得到了一些代码，但我不想运行任何代码，并且它仍然没有像我想要的那样公开这些方法以供以后使用。

4

2 回答 2

2

Pytth的解决方案解决了代码不显示的问题，但没有解决在ESM中创建库文件的问题（即使用export. 遗憾的是，我认为 Webpack 可能只是缺少.libraryTarget: 'esm'

我想起了我（遗憾地）曾经使用过的一个解决方案：使用配置选项创建一个构建文件，将库输出到window：

entry: {
    'myLib': './src/index.js',
},
output: {
    library: '[name]',
    libraryExport: 'default',
    libraryTarget: 'window',
    path: path.resolve(__dirname, './dist'),
    filename: '[name].window.js',
},

然后在名为的文件夹中包含另一个（非生成的）文件dist，例如，myLib.esm.js它只有：

import './myLib.window.js';
const myLib = window.myLib;
delete window.myLib;
export default myLib;

这很丑陋，但它确实有效。

于 2020-12-09T19:42:18.497 回答
1

Webpack 实际上有一个创建库的设置！你试过吗？

module.exports = {
  //...
  output: {
    library: 'MyLibrary'
  }
};

这是一些附加信息。

于 2020-12-09T16:56:58.413 回答