从外部调用网络打包的代码（HTML 脚本标记）

javascript html typescript webpack

2022-08-30 02:24:15

假设我有这样的类（用typescript编写），我把它和webpack捆绑到.bundle.js

export class EntryPoint {
    static run() {
        ...
    }
}

在我的索引中.html我将包含捆绑包，但随后我还想调用该静态方法。

<script src="build/bundle.js"></script>
<script>
    window.onload = function() {
        EntryPoint.run();
    }
</script>

但是，在这种情况下，未定义。那么，我该如何从另一个脚本调用捆绑的javascript呢？EntryPoint

新增：Webpack 配置文件。

答案 1

似乎您希望将 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'
  }
};

索引.js

module.exports = {
  run: function () {
    console.log('run from library');
  }
};

然后，您将能够像预期的那样访问您的库方法：

<script src="lib/yourlib.js"></script>
<script>
  window.onload = function () {
    EntryPoint.run();
  };
</script>

使用实际代码检查要点。

答案 2

我设法让它工作，没有任何进一步的修改，只需使用我从我的主/索引文件中调用的语句.js文件：webpack.config.jsimport

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

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

最初，我尝试使用来完成相同的操作，但是它分配了模块包装器而不是实际的类。requirewindow.EntryPoint