在JS中引入其他JS，如何保证加载顺序？

Question

比如我在一个js文件中

import './A.js';
import './B.js';
import './C.js';

怎么保证 按A-B—C 的顺序引入？

一定要按script标签那样动态引入吗？比如,import这种引入有什么好方法吗？

function loadScript(url, doc = document) {
    return new Promise(function (resolve) {
        let script_ = doc.createElement("script");
        script_.type = "text/javascript";
        script_.src = url;
        script_.onload = function () {
              console.log(url);
            resolve();
        };
        doc.body.appendChild(script_);
    });
}

// Promise 链式调用 保证顺序

loadScript('./A.js').then(()=>{
    loadScript('./B.js')
}).then(()=>{
    loadScript('./C.js')
})

Answer 1

loadScript无缝替换成import

import('./A.js').then(()=>{
    return import('./B.js')
}).then(()=>{
    import('./C.js')
})

---

你在某一页面直接使用了其他页面的方法？模块内的方法变量都是黑盒，不是全局的，除非手动设置window.xxx，使用的话需要在页面中把相关方法export导出去，然后在使用的页面import引入

Answer 2

import './A.js';
import './B.js';
import './C.js';

就是按照 A-B-C 顺序加载的

Answer 3

loadScript无缝替换成import

Answer 4

这个问题，你得往上层思考。

1. 依赖 A 与 B 之间，应该减少依赖关系，即先加载谁都可以，顺序无所谓。
2. 如果 A 依赖 B，那么应该由模块管理工具，而不是你来决定先加载谁
3. 换言之，B 里应该有 import A，然后你就不用管了

综上，你应该用模块管理的思路，无论是 CommonJS 还是 ESM 来组织代码，不要试图手动调整或者加载模块。

Answer 5

这个有比较好的解决办法吗？