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';这样的简单行，但是如果我想使用简单的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）

1 个答案: