假设我有这样的类（用typescript编写）并将它与 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？
添加：Webpack 配置文件。
似乎您想将 webpack bundle 作为library公开。您可以配置 webpack 以在您自己的变量中的全局上下文中公开您的库，例如EntryPoint.
我不知道 TypeScript，所以这个例子使用了普通的 JavaScript。但这里重要的部分是 webpack 配置文件，特别是以下output部分：
module.exports = {
entry: './index.js',
output: {
path: './lib',
filename: 'yourlib.js',
libraryTarget: 'var',
library: 'EntryPoint'
}
};
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通过简单地使用import我从 main/index.js 文件调用的语句，我设法在没有任何进一步修改的情况下使其工作：
import EntryPoint from './EntryPoint.js';
window.EntryPoint = EntryPoint;
作为参考，这是我的weback.config.js文件。
最初我尝试使用 完成相同的操作require，但是它分配了module包装器而window.EntryPoint不是实际的类。
在我的情况下，通过在创建窗口时将函数写入窗口，我能够从另一个脚本中的捆绑 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，所以这对我有用。
WEBPACK.CONFIG.JS
1.使用UMD
module.exports={
mode:'development',
entry:'./yourentry.js',
output:{
path:path.resolve(__dirname,"dist"),
filename:'main.js',
publicPath:'/dist/',
libraryTarget:'umd',
library:'rstate',
umdNamedDefine: true,
libraryExport: 'default'
}
}
索引.html
<script src="dist/main.js"></script>
<script>
window.onload = function () {
rstate()=>{}
</script>
主文件
export default function rstate(){
console.log("i called from html")
}
2.使用VAR
module.exports={
mode:'development',
entry:'./yourentry.js',
output:{
path:path.resolve(__dirname,"dist"),
filename:'main.js',
publicPath:'/dist/',
libraryTarget:'var',
library: 'EntryPoint'
}
}
索引.html
<script>
window.onload = function () {
EntryPoint.rstate()=>{}
</script>
主文件
module.exports={
rstate=function(){
console.log("hi module")
}
}
3.USING AMD as library we used like (for those who want to make lib)
define(['jquery', './aux-lib.js'], function ($) { ..(1).. });
我遇到了类似的挑战，我想为一个旅程中的多个页面创建一个包，并希望每个页面都有自己的代码入口点，并且每个页面没有单独的包。
这是我的方法，它与 Kurt Williams 非常相似，但角度略有不同，而且没有更改 webpack 配置：
JourneyMaster.js
import { getViewData } from './modules/common';
import { VIEW_DATA_API_URL } from './modules/constants';
import { createLandingPage, createAnotherPage } from './modules/components/pageBuilder';
window.landingPageInit = () => {
getViewData(VIEW_DATA_API_URL).then(viewData => {
createLandingPage(viewData);
});
};
window.anotherPageInit = () => {
getViewData(VIEW_DATA_API_URL).then(viewData => {
createAnotherPage(viewData);
});
};
// I appreciate the above could be one liners,
// but readable at a glance is important to me
然后是我如何在html页面末尾调用这些方法的示例：
<script src="/js/JourneyMaster.js"></script>
<script>window.landingPageInit();</script>