从外部调用Webpacked代码（HTML脚本标记）

假设我有这样的类（用打字稿编写），并将其与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节：

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>

检查要点与实际代码。

webpack.config.js通过简单地使用import我从main / index.js文件中调用的语句，我设法在不做任何进一步修改的情况下使此工作正常进行：

import EntryPoint from './EntryPoint.js';
window.EntryPoint = EntryPoint;

供参考，这是我的weback.config.js文件。

最初，我尝试使用实现相同的功能require，但是它将模块包装器分配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，因此对我有用。

我遇到了类似的挑战，我想为一个旅程中的多个页面创建一个包，并希望每个页面在代码中都有它自己的入口点，并且每个页面都没有单独的包。

这是我的方法，它与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>

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作为库，我们使用like（对于那些想要创建lib的人）

define(['jquery', './aux-lib.js'], function ($) { ..(1).. });

应用程式：

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>