Question

我有一些仅出于浏览器目的导出的第三方代码。它包装在一个期望调用window的自调用函数中。

(function (window) { "use strict";
   window['module'] = {}
})(window);

是否有一个更好的名称来描述此样式模块？

我想使用webpack来require或import此代码。

当前使用webpack@3.5.1才能在Node.js和ES6环境中工作。

Answer 1

除非作者将其代码更新为UMD（或类似代码），否则您将无法import / //in a separate file const Window = require("window"); const window = new Window(); global.window = window; //Try with and without this require("my_module"); module.exports = window["module_global_variable_name"];。

我想不出一种方法，如果不经过作者的修改，便可以使其真正发挥作用。

尽管如此，在the window package的帮助下，您可以使用以下技巧：

fetch

但这仅在作者不使用任何其他全局变量的情况下才有效（例如，用window.fetch而不是$rows = DB::select($sql, $bindings); $jobs = Job::hydrate($rows);会破坏窍门）。

Answer 2

尝试从窗口进行请求/导入的另一种方法是在导入声明后对其进行解构。这使您有一种重要的感觉，而不会跳过箍。

    $('#download_btn').on('click', e => {
    // random data
    let data = 'mydata=foo&excel=bar';
    let request = new XMLHttpRequest();
    request.open('POST', '{% url "tests" %}', true);
    request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
    request.responseType = 'blob';

    request.onload = function (e) {
        if (this.status === 200) {
            let filename = "";
            let disposition = request.getResponseHeader('Content-Disposition');
            // check if filename is given
            if (disposition && disposition.indexOf('attachment') !== -1) {
                let filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
                let matches = filenameRegex.exec(disposition);
                if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, '');
            }
            let blob = this.response;
            if (window.navigator.msSaveOrOpenBlob) {
                window.navigator.msSaveBlob(blob, filename);
            }
            else {
                let downloadLink = window.document.createElement('a');
                let contentTypeHeader = request.getResponseHeader("Content-Type");
                downloadLink.href = window.URL.createObjectURL(new Blob([blob], {type: contentTypeHeader}));
                downloadLink.download = filename;
                document.body.appendChild(downloadLink);
                downloadLink.click();
                document.body.removeChild(downloadLink);
            }
        } else {
            alert('Download failed.')
        }
    };
    request.send(data);
});

Answer 3

我能够通过使用imports-loader和exports-loader

来实现这一点。

rules: [
  {
    test: /MyModule\.js/,
    use: [
      "imports-loader?window=>{}",
      "exports-loader?window.MyModule"
    ]
  },

Webpack如何将模块封装在窗口关闭中？

3 个答案: