从外部调用webpacked代码(HTML脚本标记)

假设我有这样的类(用typescript编写)并将其与webpack捆绑在一起bundle.js.

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

在我的index.html中,我将包含bundle,但是我还想调用那个静态方法.

但是,EntryPoint在这种情况下,未定义.我如何从另一个脚本调用捆绑的JavaScript？

补充:Webpack配置文件.

1> dreyescat..：

---

您似乎希望将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');
  }
};

然后,您将能够像您期望的那样访问您的库方法:

用实际代码检查要点.

---

我们有多个入口点,所以在输出部分,我改为`library:["GlobalAccess","[name]"],`.然后使var成为具有每个入口点成员的对象:GlobalAccess.EntryPointFoo,GlobalAccess.EntryPointBar等.

---

这适用于`nam run build`,但在使用`webpack-dev-server`的dev env中不起作用.我导出的EntryPoint是一个空对象.有任何想法吗？

2> Matt..：

---

webpack.config.js通过简单地使用import我从main/index.js文件调用的语句,我设法让这个工作没有任何进一步的修改:

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

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

最初我尝试使用相同的方法require,但它将模块包装器分配window.EntryPoint给实际的类.

---

这个解决方案非常简单,一旦出现问题我就不会考虑它,我感到很惭愧.

---

没有es6的任何机会吗？否则我得到`Uncaught SyntaxError:Unexpected token import`.或者你的`index.js`也捆绑了(我确实把它看作入口点,但不确定)？

3> Kurt William..：

---

在我的情况下,我可以通过在创建窗口时将函数写入窗口,从另一个脚本的捆绑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
Click Me

我无法使用Babel,所以这对我有用.