在webpack中创建全局功能

ray*_*ray 10 javascript typescript webpack

我正在使用webpack制作一个打字稿插件.一切都运作良好,但我有一个问题,从外面看到它.例如,我有文件:

/* ./src/a.ts */
class A {
    constructor(args) {...}
}
export default A;

/* ./src/app.ts */
import A from "./a.ts";
function init(args) {
   new A(args);
}
export { init };

/* ./index.html */
<html>
<head>...</head>
<body>
...

<!-- webpack bundle ts files into ./dist/app.js -->
<script src="./dist/app.js"></script>
<script>init({...});</script>

</body>
</html>
Run Code Online (Sandbox Code Playgroud)

有了这个,我得到了Uncaught ReferenceError: init is not defined.在捆绑文件中我可以看到这个函数不是全局的,但在其他函数中是这样的:

/* 1 */
/***/ function(module, exports) { ... }
Run Code Online (Sandbox Code Playgroud)

如何公开这个功能?

lor*_*non 13

从模块导出不会使实体成为全局.您可以直接将其作为成员添加到窗口:

window.init = init;
Run Code Online (Sandbox Code Playgroud)

或者,更好的是,将init调用移动到typescript模块 - 在这种情况下应该是您的webpack入口点.

  • 如果我要将它们与 webpack 捆绑在一起,这真的是使模块的功能在其自身之外可见的唯一解决方案吗?我正在处理一个大型项目,不可能通过为每个项目添加 `windows.functionname = functionname;` 来改变它。像我这样的情况有更好的解决方案吗? (2认同)