从外部调用webpacked代码(HTML脚本标记)
Rav*_*ven 107 html javascript typescript webpack
假设我有这样的类(用typescript编写)并将其与webpack捆绑在一起bundle.js.
export class EntryPoint {
static run() {
...
}
}
在我的index.html中,我将包含bundle,但是我还想调用那个静态方法.
<script src="build/bundle.js"></script>
<script>
window.onload = function() {
EntryPoint.run();
}
</script>
但是,EntryPoint在这种情况下,未定义.我如何从另一个脚本调用捆绑的JavaScript？
补充:Webpack配置文件.
dre*_*cat 122
您似乎希望将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>
用实际代码检查要点.
- 我们有多个入口点,所以在输出部分,我改为`library:["GlobalAccess","[name]"],`.然后使var成为具有每个入口点成员的对象:GlobalAccess.EntryPointFoo,GlobalAccess.EntryPointBar等. (16认同)
- 这适用于`nam run build`,但在使用`webpack-dev-server`的dev env中不起作用.我导出的EntryPoint是一个空对象.有任何想法吗？ (2认同)
- 按照步骤，更改配置，重建它，但仍然未捕获 ReferenceError: EntryPoint is not defined (2认同)
- 通过将 index.js 从 `module.exports = ...` 更改为 `export function run() {}`，我得到了一个类似的示例，可以在 babel + webpack v3.10.0 中工作 (2认同)
Mat*_*att 50
webpack.config.js通过简单地使用import我从main/index.js文件调用的语句,我设法让这个工作没有任何进一步的修改:
import EntryPoint from './EntryPoint.js';
window.EntryPoint = EntryPoint;
作为参考,这是我的weback.config.js文件.
最初我尝试使用相同的方法require,但它将模块包装器分配window.EntryPoint给实际的类.
- 这个解决方案非常简单,一旦出现问题我就不会考虑它,我感到很惭愧. (4认同)
- 好吧，您看，我正在尝试访问从不属于该捆绑包的脚本中捆绑的内容。就像 bundle 是一个库，我会尝试从外部访问它的方法。那可能吗？ (3认同)
- 没有es6的任何机会吗？否则我得到`Uncaught SyntaxError:Unexpected token import`.或者你的`index.js`也捆绑了(我确实把它看作入口点,但不确定)？ (2认同)
- 我在这个问题上被困了好几个小时。只是要将脚本移至我的包中，但这会导致更多问题。感谢您简单的回答！ (2认同)
Kur*_*iam 10
在我的情况下,我可以通过在创建窗口时将函数写入窗口,从另一个脚本的捆绑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>
我无法使用Babel,所以这对我有用.