在浏览器 JavaScript 中使用 webpack 构建的库

【问题标题】：Using webpack built libraries in browser JavaScript在浏览器 JavaScript 中使用 webpack 构建的库
【发布时间】：2021-08-28 20:37:36
【问题描述】：

我是使用 webpack 的新手。我不明白如何在基于浏览器的 JavaScript 中使用我用 webpack 创建的库。我已经使用 AWS SDK JavaScript 版本 3 中的以下模块构建了一个库。

@aws-sdk/client-cognito-identity
@aws-sdk/credential-provider-cognito-identity
@aws-sdk/client-dynamodb
@aws-sdk/client-dynamodb-streams
@aws-sdk/client-s3

这里是 webpack.config.js 的内容：

const path = require('path');

module.exports = {
  entry: './aws-sdk-build.js',
  output: {
    path: path.resolve(__dirname, './src/js'),
    filename: 'aws-sdk-js-v3.js',
    library: "awssdk"
  },
  mode: 'production', //development
  target: 'web'
};

我在 index.html 的头部添加了<script type="module" src="js/aws-sdk-js-v3.js"></script>。

我不知道如何从浏览器的 javascript 中访问 aws-sdk-js-v3.js 中的模块。

【问题讨论】：

标签： javascript html node.js webpack

【解决方案1】：

在您的模块aws-sdk-build.js 的入口点中，您可以创建一些加载行为以与DOM 交互。例如使用 JQuery：

$(() => {
   const someElement = document.getElementById("targetElement");
   if (someElement) {
      // initialize your cool thing with someElement as mount point
   }
});

您还可以通过将某些代码分配给窗口对象来公开它们。

例如，您可以在模块入口点中使用类似这样的内容：

Object.assign(window, {
    MyGreatClass,
    reallyUsefulFunction
});

...然后您将能够在包含脚本标签的页面中（以及在开发控制台中）使用MyGreatClass / reallyUsefulFunction。

如果没记错的话，另一种选择是在该脚本标签内做一些事情：

<script type="module" src="js/aws-sdk-js-v3.js">
    // module exports can be accessed within here
</script>

虽然我不确定最后一个选项的用法，或者我弄错了，所以请大家纠正我。

【讨论】：