Question

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

想想一个带有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命名空间，就像在模块前时间完成一样。有更好的（更模块化的方式）来做这件事吗？

Answer 1

你真的需要触发＆＃39;或者＆＃39;开始＆＃39;来自外面的剧本？鉴于您在上面描述的模式，您可以让您的webpack入口点关闭（例如，它导入相关模块然后使用它们）。

如果你真的需要将你的webpack版本加载为各种类型的库，供页面上的其他js使用，你需要查看webpack中的output.library和output.libraryTarget选项＆＃39 ; s config。这些告诉webpack将您的bundle构建为库，libraryTarget指定如何在运行时定义库（例如var选项将您的库定义为变量，这可能是全局的，类似于jQuery）。

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

1 个答案: