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

假设我有这样的类（写在打字稿中），我把它与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呢？

增加 ： Webpackconfiguration文件 。

Answer 1

看来你想把webpack包作为一个库来公开。 您可以将webpackconfiguration为在您自己的variables（如EntryPoint的全局上下文中展示您的库。

我不知道TypeScript，所以这个例子使用普通的JavaScript代替。 但是这里最重要的部分是webpackconfiguration文件，特别是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> 

检查实际代码的要点 。

Answer 2

我设法得到这个工作，没有任何进一步的webpack.config.js修改，只需使用从我的main / index.js文件中调用的import语句：

 import EntryPoint from './EntryPoint.js'; window.EntryPoint = EntryPoint; 

作为参考，这里是我的weback.config.js文件。

最初我尝试使用require完成相同的操作，但是它将模块包装器分配给window.EntryPoint ，而不是实际的类。

Answer 3

在我的情况下，我可以通过在创build窗口时将函数写入窗口，从另一个脚本的捆绑JavaScript中调用函数。

 // In the bundled script: function foo() { var modal = document.createElement('div'); } // Bind to the window window.foo = foo; // Then, in the other script where I want to reference the bundled function I just call it as a normal function <button onClick="window.foo()">Click Me</button> 

我无法使用巴别塔，所以这为我工作。

Answer 4

App.ts：

 namespace mytypescript.Pages { export class Manage { public Initialise() { $("#btnNewActivity").click(() => { alert("sdc'"); }); } } } 

的mypage.html：

  <input class="button" type="button" id="btnNewActivity" value="Register New Activity" /> <script type="text/javascript"> var page = new mytypescript.Pages.Manage(); page.Initialise(); </script>