从 webpack 包中公开一个函数答案

【问题标题】：Expose a function from a webpack bundle从 webpack 包中公开一个函数
【发布时间】：2021-04-24 18:41:10
【问题描述】：

我正在尝试向网页公开一个函数，该函数可以在外部、window.load 或任何时候调用。

DoThing.ts

import * as lib from "libs";

export default function DoAThingFunc():void{
    console.log('Do a thing)'
}

这就是导入的东西 ExposeDoThing.js

import DoAThingFunc from './DoThing'
window.exposeFunc = DoAThing
window.exposeFunc():

webpack 4 捆绑包

     entry: {
            main: './src/MainEntry.tsx',
            popupcallback: './src/ExposeDoThing.js'
        },
        output: {
            path: path.join(__dirname, outputDir + "/js"),
            filename: '[name].js',
            publicPath: "/js/",
            library:'pclGlobal'
        },

MyPage.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pop up</title>
</head>

<body>
    <script src="/js/vendor-main.js" type="text/javascript"></script>
    <script src="/js/popupcallback.js" type="text/javascript"></script>
</body>

</html>

什么都没有被调用，pclGlobal 是未定义的，即使：

var pclGlobal=(window.webpackJsonppclGlobal=window.webpackJsonppclGloba...

出现在输出中。并且没有从函数中调用任何内容。我只想在脚本加载后触发函数DoAThingFunc()，我错过了什么？

【问题讨论】：

标签： javascript typescript webpack webpack-4

【解决方案1】：

我认为您需要将您的捆绑包公开为一个库。检查webpack config中有关output部分的链接，并检查正确的方法。

可能是这样的配置：（注意libraryExport attr）

module.exports = {
  entry: './index.js',
  output: {
  path: './lib',
  filename: 'yourlib.js',
  libraryTarget: 'umd',
  library: 'YourLibraryName',
  umdNamedDefine: true,
  libraryExport: 'default'
 }
};

【讨论】：

我得到的只是 'Uncaught TypeError: Cannot read property 'default' of undefined' 没有任何东西从包中暴露出来

【解决方案2】：

我在我的 quoyted html 示例中注意到了 vendor-main.js，但我们在 weback 条目中没有一个，但有文件输出...... 看起来我们曾经有一个供应商捆绑包，然后停止但留下了webpack.config.js

            runtimeChunk: {
                name: entrypoint => `vendor-${entrypoint.name}`
            }

这有一个奇怪的效果。如果你的条目不叫main，那么它就不会执行任何export default 函数。

【讨论】：