从外部调用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文件 。

看来你想把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> 

检查实际代码的要点 。

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

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

在这里输入图像描述

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

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

在我的情况下,我可以通过在创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> 

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

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>