假设我有一个类，就像这样（用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捆绑包作为库公开。您可以配置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>
查看具有实际代码的gist。
library: ["GlobalAccess", "[name]"]。这将使变量成为一个对象，其中包括每个入口点的成员：GlobalAccess.EntryPointFoo、GlobalAccess.EntryPointBar等等。 - John Hattonnpm run build，但在使用 webpack-dev-server 的开发环境中不起作用。我的导出入口点是一个空对象。有任何想法吗？ - nkintexport function run() {}而不是module.exports = ...使其正常运行。 - dworvos我设法让它正常工作，没有进一步的 webpack.config.js 修改，只需使用 import 语句，我从我的 main/index.js 文件中调用：
import EntryPoint from './EntryPoint.js';
window.EntryPoint = EntryPoint;
供参考，这是我的weback.config.js文件。
起初我尝试使用require来实现同样的效果，但它将模块包装器分配给了window.EntryPoint，而不是实际的类。
index.js 文件是否已经打包好了（我看到它是入口点，但不确定）？ - Raven在我的情况下，我能够通过在创建函数时将函数写入窗口来从另一个脚本中调用捆绑的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'
}
}
index.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.使用 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
<script>
window.onload = function () {
EntryPoint.rstate()=>{}
</script>
main.js
module.exports={
rstate=function(){
console.log("hi module")
}
}
3.使用AMD作为库时，我们可以像这样使用（适用于那些想要创建库的人）
define(['jquery', './aux-lib.js'], function ($) { ..(1).. });
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>
npx webpack --config webpack.config.js --mode=development -- hopefully this saves people a few hours.
index.js (需要捆绑的函数） >>
function EntryPoint() {
console.log('called from bundle');
}
module.exports = EntryPoint;
webpack.config.js >>
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
libraryTarget: 'var',
library: 'EntryPoint'
},
};
start.html（调用打包函数的地方）>>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Azure SDK Storage Example</title>
<script type="text/javascript" src="./dist/main.js"></script>
</head>
<body>
<h1>Azure SDK Storage Example</h1>
</body>
</html>
<script>
EntryPoint();
</script>
function renderValue(value) {
到：
global.renderValue = function(value) {
require('path/to/your_custom_js')。npm start 之前立即使用 npm run build。
至少对我来说是这样，仅使用 webpack。App.ts:
namespace mytypescript.Pages {
export class Manage {
public Initialise() {
$("#btnNewActivity").click(() => {
alert("sdc'");
});
}
}
}
mypage.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>
onload方法中缺少类似于var EntryPoint = require('EntryPoint')的东西。 - MartyIXrequire的东西，但和下面的import一样，它会显示“未定义require”。我试图使用来自纯JavaScript的打包内容，难道不需要再次使用某个框架才能使用require吗？但我正在尝试避免这种情况。希望有意义。 - Raven