Question

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

＆＃xA;＆＃xA;

 导出默认函数（{makeCurrentVerUrl，verUrl，fileServer，downloadTokenType，appId}） {＆＃XA; ...＆＃xA;}＆＃xA;

＆＃xA;＆＃xA;

当由webpack编译时，它看起来像这样：

＆＃xA; ＆＃xA;

  webpackJsonp（[5,7]，[＆＃xA; / * 0 * /＆＃xA; / *** / function（module，exports）{＆＃xA;＆＃ xA;'use strict';＆＃xA;＆＃xA; Object.defineProperty（exports，“__ myModule”，{＆＃xA; value：true＆＃xA;}）;＆＃xA;＆＃xA; exports.default = function（_ref）{＆＃xA; var makeCurrentVerUrl = _ref.makeCurrentVerUrl;＆＃xA; var verUrl = _ref.verUrl;＆＃xA; var fileServer = _ref.fileServer;＆＃xA; var downloadTokenType = _ref.downloadTokenType; ＆＃xA; var appId = _ref.appId;＆＃xA;＆＃xA; ...＆＃xA;};＆＃xA;＆＃xA; / *** /}＆＃xA;]）;＆ #xA;

＆＃xA;＆＃xA;

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

＆＃xA ;＆＃xA;

我可以包含它，

＆＃xA;＆＃xA;

 ＆lt; script src =“/ path / to / script.js”＆gt;＆lt; / script＆gt;＆＃xA;

＆＃xA;＆＃xA;

我认为我会自动运行它，但是如何调用我已经执行的功能从浏览器中罚款？ require 未在我的浏览器中定义。

＆＃xA;

Answer 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或作为root的属性

默认值："var"

然后你就可以了

myLibrary()

Answer 2

因此，最简单的方法是在不更改output.library的情况下执行此操作（假设您不想全局化所有内容），只需将所需的函数附加到window即可。 e.g。

// 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()。

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

2 个答案: