Question

我正在尝试将现有项目转换为使用Webpack。项目代码使用许多全局变量，这些变量在不同的地方进行了调整和使用。这是我要达到的目标的最小示例：

main.js

window.foo = {};

import './bar.js';

foo.bar();

bar.js

foo.bar = function() {
    console.log('bar');
};

入口是main.js。在我看来，这应该声明全局window.foo，仅出于副作用导入bar.js，从而向bar添加window.foo函数，然后运行它。最终实际发生的是：

bar.js:1 Uncaught TypeError: Cannot set property 'bar' of undefined
    at eval (bar.js:1)

我知道Webpack可能不是用来处理这种奇怪的全局“模块”的，但目前的代码库太大，无法转换为合适的ES6模块。现在，我只想将Webpack用于第三方库，linting等。

我应该如何使以上示例起作用？

Answer 1

好的，让我们看看在这种情况下webpack的输出是什么

// this code in main.js
window.foo = {};

import './bar.js';

foo.bar();


//produces this webpack output

({
  "./src/bar.js": (function(module, exports) {

    foo.bar = function() {
      console.log('bar');
    };

  }),

  "./src/index.js": (function(module, __webpack_exports__, __webpack_require__) {

    "use strict";
    __webpack_require__.r(__webpack_exports__);
    /* harmony import */

    /*        ----------Check below line -------------- */


    var _bar_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/bar.js");



    /* harmony import */
    var _bar_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/ __webpack_require__.n(_bar_js__WEBPACK_IMPORTED_MODULE_0__);
    window.foo = {};
    foo.bar();

  })

});

仔细查看bar.js的导入位置和实际运行位置。

据我所知，window.foo = {}之前的语句import已移至文件顶部。我无法确定这是规范还是其他原因，但我知道将imports放在顶部也是一个普遍的习惯规定。...

很显然，这不是您所希望的行为，您需要的是一种将imported代码准确地放置在编写import语句的位置的方法。

现在改为使用require ...

// this code in main.js
window.foo = {};

require('./bar.js');

foo.bar();

// will produce this webpack output

({
  "./src/bar.js": (function(module, exports) {

    foo.bar = function() {
      console.log('bar');
    };

  }),

  "./src/index.js": (function(module, exports, __webpack_require__) {

    window.foo = {};

    /* ------------------ Check below line ------------------ */

    __webpack_require__( /*! ./bar.js */ "./src/bar.js");

    foo.bar();

  })

});

现在您可以看到bar.js正在imported上，并且完全在您声明require语句的位置运行。在我看来require保持原始位置。再次，我不能告诉您这是webpack的内容还是实际的规格，但是无论如何您都可以。

所以，总结一下，尝试require()您的模块，应该没问题

以下是有关Webpack所有possible ways to import内容的完整文章，以防万一您发现更有趣的内容

这是一个指南，介绍如何shim globals使用webpack，以防您在应用程序中的某个位置执行此操作。

Webpack脚本执行顺序

1 个答案: