使用 webpack 导出和捆绑函数并在 html 脚本标签中调用它

Posted 2023-03-13

【中文标题】使用 webpack 导出和捆绑函数并在 html 脚本标签中调用它

【英文标题】：Exporting and bundling a function using webpack and calling it inside html script tag

【发布时间】：2021-03-25 10:12:44

【问题描述】：

我一直在尝试一些非常简单的事情——使用 webpack 导出和捆绑（以及 babel 转译）一个函数，然后在我的 html 页面的脚本标签中调用它。

sample.js - 使用 webpack 捆绑

export default function sampleFunctionExported1()
    console.log("sampleFunctionExported1");

Webpack 配置（版本 = 4.44.1）

module.exports = (env, arguments) => 
    entry: 
            main: ['./assets/js/sample.js', './assets/css/main.scss'],
            entry2: ['./assets/js/entry2.js', './assets/css/entry2.scss']
    ,
    output: 
        path: path.join(__dirname, '../public/js'),
        filename: '[name].js',
        library: 'MyLibrary',
        libraryTarget: 'var',

        // some additional configs/options that I have tried          
        // libraryTarget: 'window', // tried with this option, it does not work
        // libraryTarget: 'umd',  // tried with this option, it does not work
        // libraryExport: 'default', // tried with this option, it does not work
    

我虽然将 library 和 libraryTarget 目标添加到 webpack 配置中一样简单，然后我应该能够将我的函数调用为 MyLibrary.sampleFunctionExported1()。

但是当我在浏览器控制台中执行MyLibrary 时，它会显示如下并且MyLibrary.sampleFunctionExported1() 返回... is not a function 错误

我在许多这些问题/答案中都遵循了建议：answer 1、answer 2、answer 3 和其他各种博客文章，但它对我根本不起作用。

所以在花了这么多时间之后，我在这里发布它，希望有人可以帮助我了解问题所在。

编辑 1： webpack打包后生成的文件如下：/public/js/sample.js

附： - 忽略entry2.js 文件，因为它是一个空文件，我只是添加它来显示我的配置，因为我不确定是否有多个入口点会导致我目前面临的这个问题。

【问题讨论】：

MyLibrary.default 在场吗？我认为 MyLibrary.sampleFunctionExported1 只有在您将其作为命名导出而不是默认导出时才会出现。

你能在这里分享你转译的../public/js/sample.js 吗？可能有助于诊断。 FWIW，在过去，我经常以 umd 为目标，它们......似乎工作......经过一些调整。

@Jacob - 实际上我注意到 MyLibrary 不是一个空对象，它有 default 存在，但我的函数调用仍然返回未定义的错误（我已经用 MyLibrary 对象图片更新了我的问题）

将代码粘贴到浏览器中，似乎MyLibrary.default() 调用了您想要的函数。这...是有道理的，因为它是默认导出...

如果你想使用命名函数，也许删除默认关键字？ ，即MyLibrary.sampleFunctionExported1()

【参考方案1】：

因为您的导出方式：

export default function sampleFunctionExported1()
    console.log("sampleFunctionExported1");

...您的 MyLibrary 变量将具有以下形状：

  default: function()  ... 

如果您希望它具有以下形状：

  sampleFunctionExported1: function()  ... 

...您需要进行命名导出而不是默认导出：

export function sampleFunctionExported1() 
  console.log("sampleFunctionExported1");