从 webpack 包中公开一个函数

Question

我正在尝试向网页公开一个函数，该函数可以在外部调用，或者在 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()，我错过了什么？

Answer 1

我认为您需要将您的包公开为一个库。检查此 link 关于 webpack config 中的 output 部分，并检查正确的方法。

也许是这样的配置：（注意libraryExport attr）

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

Answer 2

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

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

这有一个奇怪的效果。如果您的条目未调用 main，则它不会执行任何 export default 函数。

从 webpack 包中公开一个函数

Expose a function from a webpack bundle

javascript

typescript

webpack

webpack-4