从外部调用Webpacked代码（HTML脚本标记）

一尘不染

从外部调用Webpacked代码（HTML脚本标记）

javascript

假设我有这样的类（用打字稿编写），并将其与webpack捆绑在一起bundle.js。

export class EntryPoint {
    static run() {
        ...
    }
}

在我的index.html中，我将包含该捆绑包，但随后我也想调用该静态方法。

<script src="build/bundle.js"></script>
<script>
    window.onload = function() {
        EntryPoint.run();
    }
</script>

但是，EntryPoint在这种情况下，未定义。那我该如何从另一个脚本中调用捆绑的javascript？

阅读 223

2020-05-01

共1个答案

一尘不染

看来您想将webpack捆绑包公开为一个库。您可以将webpack配置为在自己的变量（如）中在全局上下文中公开您的库EntryPoint。

我不知道TypeScript，所以该示例改用普通JavaScript。但是这里重要的是webpack配置文件，尤其是本output节：

webpack.config.js

module.exports = {
  entry: './index.js',
  output: {
    path: './lib',
    filename: 'yourlib.js',
    libraryTarget: 'var',
    library: 'EntryPoint'
  }
};

index.js

module.exports = {
  run: function () {
    console.log('run from library');
  }
};

然后，您将可以像期望的那样访问您的库方法：

<script src="lib/yourlib.js"></script>
<script>
  window.onload = function () {
    EntryPoint.run();
  };
</script>

2020-05-01