Javascript 从外部调用 webpacked 代码（HTML 脚本标签）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34357489/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Calling webpacked code from outside (HTML script tag)
提问by Raven
Suppose that I have class like this (written in typescript) and I bundle it with webpack into bundle.js.
假设我有这样的类（用打字稿编写）并将它与 webpack 捆绑到bundle.js.
export class EntryPoint {
static run() {
...
}
}
In my index.html I will include the bundle, but then I would also like to call that static method.
在我的 index.html 中，我将包含该包，但随后我还想调用该静态方法。
<script src="build/bundle.js"></script>
<script>
window.onload = function() {
EntryPoint.run();
}
</script>
However, the EntryPointis undefined in this case. How would I call the bundled javascript from another script then?
但是，EntryPoint在这种情况下是未定义的。那么我将如何从另一个脚本调用捆绑的 javascript？
Added: Webpack config file.
添加：Webpack 配置文件。
回答by dreyescat
It seems that you want to expose the webpack bundle as a library. You can configure webpack to expose your library in the global context within a variable of your own, like EntryPoint.
似乎您想将 webpack bundle 作为library公开。您可以将 webpack 配置为在您自己的变量中的全局上下文中公开您的库，例如EntryPoint.
I don't know TypeScript so the example uses plain JavaScript instead. But the important piece here is the webpack configuration file, and specifically the outputsection:
我不知道 TypeScript，所以这个例子使用了普通的 JavaScript。但这里重要的部分是 webpack 配置文件，特别是以下output部分：
webpack.config.js
webpack.config.js
module.exports = {
entry: './index.js',
output: {
path: './lib',
filename: 'yourlib.js',
libraryTarget: 'var',
library: 'EntryPoint'
}
};
index.js
索引.js
module.exports = {
run: function () {
console.log('run from library');
}
};
Then you will be able to access your library methods like you expect:
然后您将能够像您期望的那样访问您的库方法：
<script src="lib/yourlib.js"></script>
<script>
window.onload = function () {
EntryPoint.run();
};
</script>
Check the gistwith the actual code.
使用实际代码检查要点。
回答by Matt
I managed to get this working without any further webpack.config.jsmodifications, by simply using the importstatement which i called from my main/index.js file:
webpack.config.js通过简单地使用import我从 main/index.js 文件调用的语句，我设法在没有任何进一步修改的情况下使其工作：
import EntryPoint from './EntryPoint.js';
window.EntryPoint = EntryPoint;
For reference, here's my weback.config.jsfile.
作为参考，这是我的weback.config.js文件。
Initially I tried accomplishing the same using require, however it assigned the module wrapper to window.EntryPointas opposed to the actual class.
最初我尝试使用 完成相同的操作require，但是它分配了模块包装器而window.EntryPoint不是实际的类。
回答by Kurt William
In my circumstance I was able to call a function from within the bundled JavaScript from another script by writing the function to the window when creating it.
在我的情况下，通过在创建窗口时将函数写入窗口，我能够从另一个脚本中的捆绑 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>
I wasn't able to use Babel so this worked for me.
我无法使用 Babel，所以这对我有用。
回答by Darren Sweeney
I had a similar challenge, I wanted to create a bundle for multiple pages within a journey and wanted each page to have it's own entry point into the code, and without a separate bundle for each page.
我遇到了类似的挑战，我想为一个旅程中的多个页面创建一个包，并希望每个页面都有自己的代码入口点，并且每个页面没有单独的包。
Here's my approach, which is very similar to Kurt Williams but from a slightly different angle, also without changing webpack config:
这是我的方法，它与 Kurt Williams 非常相似，但角度略有不同，也没有更改 webpack 配置：
JourneyMaster.js
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
Then an example of how I call these methods at the end of the htmlpage:
然后是我如何在html页面末尾调用这些方法的示例：
<script src="/js/JourneyMaster.js"></script>
<script>window.landingPageInit();</script>
回答by ??l?j?
WEBPACK.CONFIG.JS
WEBPACK.CONFIG.JS
1.USING UMD
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'
}
}
index.html
索引.html
<script src="dist/main.js"></script>
<script>
window.onload = function () {
rstate()=>{}
</script>
main.js
主文件
export default function rstate(){
console.log("i called from html")
}
2.USING VAR
2.使用VAR
module.exports={
mode:'development',
entry:'./yourentry.js',
output:{
path:path.resolve(__dirname,"dist"),
filename:'main.js',
publicPath:'/dist/',
libraryTarget:'var',
library: 'EntryPoint'
}
}
index.html
索引.html
<script>
window.onload = function () {
EntryPoint.rstate()=>{}
</script>
main.js
主文件
module.exports={
rstate=function(){
console.log("hi module")
}
}
3.USING AMD as library we use like(for those who want to make lib)
3.USING AMD as library we used like(对于那些想要制作lib的人)
define(['jquery', './aux-lib.js'], function ($) { ..(1).. });
回答by Veera Induvasi
App.ts:
应用程序：
namespace mytypescript.Pages {
export class Manage {
public Initialise() {
$("#btnNewActivity").click(() => {
alert("sdc'");
});
}
}
}
mypage.html:
我的页面.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>
