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

Question

我写了一个 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 未在我的浏览器中定义。

Answer 1

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

output.library
If set, export the bundle as library. output.library is the name.

Use this, if you are writing a library and want to publish it as single file.

output.libraryTarget
Which format to export the library:

"var" - Export by setting a variable: var Library = xxx (default)

"this" - Export by setting a property of this: this["Library"] = xxx

"commonjs" - Export by setting a property of exports: exports["Library"] = xxx

"commonjs2" - Export by setting module.exports: module.exports = xxx

"amd" - Export to AMD (optionally named)

"umd" - Export to AMD, CommonJS2 or as property in root

Default: "var"

那你就可以做到

myLibrary()

Answer 2

因此，在不更改 output.library 的情况下执行此操作的最简单方法（假设您不想全球化 everything）是将您需要的功能附加到 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 -时间。

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

How to execute a webpack module from a <script>?

javascript

webpack