如何在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请求的地步，我需要它们是异步的。 在我以前的项目中，我成功使用了异步模块，我也想在这里使用它。 惊喜，惊喜，我无法导入模块。

我尝试使用像import * as async from '../libs/async/async.js';这样的简单行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文件的第一行，它可以正常工作。 无需其他进口。