Question

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

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

在我的index.html中，我将包含bundle，但是我还想调用那个静态方法。

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

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

已添加：Webpack config file。

Answer 1

您似乎希望将webpack包公开为library。您可以将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>

使用实际代码检查gist。

Answer 2

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

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

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

最初我尝试使用require完成相同的工作，但是它将模块包装器分配给window.EntryPoint而不是实际的类。

Answer 3

在我的情况下，我可以通过在创建窗口时将函数写入窗口，从另一个脚本的捆绑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，所以这对我有用。

Answer 4

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).. });

Answer 5

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

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

Answer 6

到目前为止，许多答案都可以奏效，只需要澄清一下，Webpack在声明后才构建就不会识别该库。创建库后，您应该立即使用npm run build，在继续与npm start合作之前。

至少仅使用webpack，这就是我的工作方式。

Answer 7

也许这是我的某种冒名顶替综合症，但我认为“真正的”程序员会对我的回答感到畏缩。无论如何，我发现这个解决方案最适合务实地利用我的业余爱好项目：

修改您的 JS 函数声明：

function renderValue(value) {

到：

global.renderValue = function(value) {

当然，您需要像处理任何文件一样require('path/to/your_custom_js')。

我在这里找到了这个答案： https://www.fastruby.io/blog/rails/webpack/from-sprockets-to-webpacker.html

Answer 8

这让我花了很长时间才弄清楚，因为接受的答案对我不起作用。只需确保函数名称与配置中的库相同，并且它与指定的配置捆绑在一起 -- npx webpack --config webpack.config.js --mode=development -- 希望这可以为人们节省几个小时。

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>

Answer 9

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>

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

9 个答案:

webpack.config.js

index.js