从脚本标签的全局范围调用 webpack 模块中的函数答案

【问题标题】：Invoke function in webpack module from global scope in script tag从脚本标签的全局范围调用 webpack 模块中的函数
【发布时间】：2016-04-21 23:19:06
【问题描述】：

我似乎无法解决这个问题：

想一个简单的示例应用程序，它带有一个 javascript 模块 app1.js，在最简单的版本中看起来像这样：

function configure() {
   // configure app
}
function start(id) {
   // start app
}

// This is what I dislike and would like to find a better solution!
window.APP = {start: start};

export default {configure};

我的 html 页面 app.html 看起来像这样：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div id="view"></div>
        <script src="app.bundle.js"></script>
        <script>APP.start('view');</script>
    </body>
</html>

还有一个 webpack 配置文件 webpack.config.js，看起来像这样：

const webpack = require('webpack'); const path = require('path');

module.exports = {
  entry: {'app': './app.js'},
  output: {
    path: __dirname,
    filename: '[name].bundle.js'
  },
  module: {
    loaders: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel?presets=es2015'
    }]
  }
};

我能想出的唯一方法是将 start 函数导出到窗口对象 (window.APP = {start: start}) 中的 APP 命名空间，就像在模块前时代完成的那样。有没有更好的（更模块化的方式）来做到这一点？

【问题讨论】：

标签： javascript webpack es6-module-loader

【解决方案1】：

您真的需要从外部“触发”或“启动”脚本吗？鉴于您在上面描述的模式，您可以让您的 webpack 入口点启动（例如，它导入相关模块然后使用它们）。

如果您确实需要将 webpack 构建加载为各种库，以供页面上的其他 js 使用，您需要查看 webpack 配置中的 output.library 和 output.libraryTarget 选项。这些告诉 webpack 将你的包构建为一个库，libraryTarget 指定如何在运行时定义库（例如，var 选项将你的库定义为一个变量，这可能是一个全局变量，类似于 jQuery） .

【讨论】：

之所以必须从脚本中启动JavaScript代码，是因为start中的参数。 html实际上是在后端生成的，当需要给前端代码参数时，就是这样完成的。
创建一个全局库真的不是我想要的。代码应保持模块化并为所有其他模块导出 API。我宁愿寻找一种从全局范围内使用模块的方法。