如何在 javascript 主文件中导入外部模块 (async.js)

Question

所以在工作中我们买了一个主题，我必须自定义并将其用于内部项目。他们使用 pug 从一些模板生成最终文件。在 .pug 模板中，我当然可以插入一些外部 javascript 文件。

来自他们的文件的空 js 示例如下所示：

(function(window, document, $) {
  'use strict';
   $(window).on('load', function () {

   })
})(window, document, jQuery);

（jQuery 和 bootstrap 自动包含在模板中）。我成功地创建了我的 javascript 文件并使用它们来处理仅使用纯 js 和一些 jQuery 的项目（但是我有点错过 angularjs，但我无法使用.pug 和 angular 在同一时间）。

我不得不向服务器发出多个 GET 请求，并且我需要它们是异步的。在我以前的项目中，我成功地使用了 async 模块，我也想在这里使用它。惊奇，惊奇，我无法导入模块。

我尝试使用像 import * as async from '../libs/async/async.js'; 这样的简单行，但如果我想使用简单的 async.series，它会显示：Uncaught TypeError: async.series is not a function。我尽了一切可能。错误从上面的错误到 "Unrecognized token *" 不等。是的，我将 .js 文件声明为 type="module".

我试图自己模拟这个问题，我创建了以下文件结构（它类似于主题中的那个）。

  .
    ├── assets
    │   └── js
    │       ├── dashboards
    │       │   └── dash.js
    │       └── libs
    │           └── async.js
    └── src
        └── index.html

在 .html 文件中，我只包含 jQuery 和 dash.js 文件。 dash.js 文件包含以下代码：

'use strict';
import * as async from '../libs/async.js';

    $(window).on('load', function () {
        function init() {
            console.log("Hello there!");

            async.series([
                function(callback) { console.log(5); callback(); },
                function(callback) { console.log(6); callback(); }
            ]);
        }

        init();
    });

但是...又出错了。

Uncaught ReferenceError: async is not defined
    at init (dash.js:8)

究竟如何导入异步模块（或任何其他模块）并正确使用它？

更新：在 .html 文件中，如果我包含行

<script src="https://cdnjs.cloudflare.com/ajax/libs/async/2.6.1/async.js"></script>

看起来可行，但我真的很想知道没有它是否可以完成。

Answer 1

在 .pug 文件中，更改 .js 文件的顺序有帮助。我把 async.js

 script(src=assets_path + '/js/libs/async.min.js', type='text/javascript')

作为自定义 js 文件的第一行，它起作用了。不需要其他进口。

如何在 javascript 主文件中导入外部模块 (async.js)

How to import external module (async.js) in javascript main file

javascript

jquery

module

async.js

ecmascript-6