如何从 <script> 执行 webpack 模块？答案

【问题标题】：How to execute a webpack module from a <script>?如何从 <script> 执行 webpack 模块？
【发布时间】：2015-12-10 19:35:31
【问题描述】：

我写了一个类似这样的 ES6 模块：

export default function({makeCurrentVerUrl, verUrl, fileServer, downloadTokenType, appId}) {
    ...
}

通过 webpack 编译时，它看起来像这样：

webpackJsonp([5,7],[
/* 0 */
/***/ function(module, exports) {

    'use strict';

    Object.defineProperty(exports, "__esModule", {
        value: true
    });

    exports.default = function (_ref) {
        var makeCurrentVerUrl = _ref.makeCurrentVerUrl;
        var verUrl = _ref.verUrl;
        var fileServer = _ref.fileServer;
        var downloadTokenType = _ref.downloadTokenType;
        var appId = _ref.appId;

        ...
    };

/***/ }
]);

这很好，但我不确定如何运行这个文件并调用我的默认函数。

我可以包含它，

<script src="/path/to/script.js"></script>

我相信它会自动运行它，但是如何从浏览器调用我在其中定义的函数？ require 没有在我的浏览器中定义。

【问题讨论】：

标签： javascript webpack

【解决方案1】：

您可以在配置中设置output.library。来自docs：

output.library
如果设置，则将包导出为库。 output.library 是名字。

如果您正在编写库并希望将其发布为单个文件。

output.libraryTarget
导出库的格式：

"var" - 通过设置变量导出：var Library = xxx（默认）

"this" - 通过设置以下属性导出：this["Library"] = xxx

"commonjs" - 通过设置导出属性导出： exports["Library"] = xxx

"commonjs2" - 通过设置 module.exports 导出：module.exports = xxx

"amd" - 导出到 AMD（可选命名）

"umd" - 导出到 AMD、CommonJS2 或作为根目录中的属性

默认："var"

那你就可以了

myLibrary()

【讨论】：

Hrm...没有办法有多个编译目标是吗？理想情况下，我想以默认方式（非库）加载我的供应商包，然后使用 AMD 之类的东西动态加载我的页面特定脚本。
@mpen，这个例子记录了在 webpack 下配置多部分库。它使用 UMD，它应该实现你想要的：直接脚本标签加载和使用像 requirejs 这样的 AMD 加载器：github.com/webpack/webpack/tree/master/examples/…

【解决方案2】：

因此，在不更改output.library（假设您不想全球化一切）的情况下执行此操作的最简单方法是将您需要的函数附加到window。例如

// entry-point.js
import foo from './scripts/foo.js';
window.foo = foo;

或者，如果您想将一大堆东西附加到window（不仅仅是default），您可以执行以下操作：

Object.assign(window, require('./scripts/somelib.js'));

如果您想在运行时包含一些脚本，您还可以查看 bundle-loader、内置 webpack 功能 require.context 或动态 import()s。

【讨论】：

我需要在主 Aurelia 应用程序启动之前运行 detect-browser。这个答案帮助我配置了这个。我刚刚定义了另一个条目，其中有一个模块，它设置了 window 属性。