Webpack 脚本执行顺序答案

【问题标题】：Webpack script execution orderWebpack 脚本执行顺序
【发布时间】：2018-07-23 16:10:09
【问题描述】：

我正在尝试将现有项目转换为使用 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 等。

我应该如何让上面的例子工作？

【问题讨论】：

标签： javascript webpack

【解决方案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 放在顶部也是一个常见的 eslint 规则......

显然，这不是您所期望的行为，您需要一种将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 东西的完整文章，以防你发现更有趣的东西

如果您在应用程序的某个地方执行此操作，这里是如何使用 webpack shim globals 的指南。

【讨论】：