时间戳

首页 > 解决方案 > 使用 webpack 导出和捆绑函数并在 html 脚本标签中调用它

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

问题描述

我一直在尝试一些非常简单的事情——使用 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
    }

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

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

我的图书馆

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

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

编辑1： 这是webpack捆绑后生成的文件：/public/js/sample.js

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

标签： javascriptwebpack

解决方案

由于您的导出方式：

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

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

{
  default: function() { ... }
}

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

{
  sampleFunctionExported1: function() { ... }
}

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

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

推荐阅读