Javascript 动态加载不在类型为“”的脚本标记中的模块；模块"；？

是否可以在没有为所述模块设置脚本标记的情况下使用导入

我的问题是，我想根据配置文件动态加载模块，例如：

文件夹结构：

|-- main.js
|-- config.json.js
|-- modules
    |-- module1.js
    |-- module2.js
    |-- module3.js

Index.html标题：

<script src="/config.json.js" type="module"></script>
<script src="/main.js"></script>

main.js：

import config from '/config.json.js'

//Loading modules defined in config
config.modules.forEach(moduleName => {
  import(`modules/${moduleName}`)
  .then( module => {
    console.log(`${module.name} loaded.`);
  )}
})

由于脚本标记中未定义模块，因此上述操作不起作用

---

有什么方法可以使用vanilla JS实现这一点并保持干净吗？

是的，只要加载程序脚本标记为

module

<script type="module">
  const moduleSpecifier = './myModule.mjs';
  import(moduleSpecifier)
    .then((module) => {
      // do something
    });
</script>

进一步阅读：

---

可以，只要加载程序脚本标记为

模块

<script type="module">
  const moduleSpecifier = './myModule.mjs';
  import(moduleSpecifier)
    .then((module) => {
      // do something
    });
</script>

进一步阅读：

编辑

---

旧答案：
要在DOM加载后导入更多模块，一种不太干净但有效的方法是创建一个module类型的新调用方脚本

/* Example */
/* Loading BubbleSynth.js from «synth» folder*/
let dynamicModules = document.createElement("script")
dynamicModules.type = "module"
dynamicModules.innerText = "import * as bsynth from '../synth/BubbleSynth.js'"
/* One module script already exist. eq: «main.js», append after it */ 
document.querySelector("script[type='module']").parentElement.appendChild(dynamicModules)

销毁模块调用方脚本不会损害过去的调用：

document.querySelectorAll("script[type='module']")[1].outerHTML = ""
// *BubbleSynth* is still in memory and is running

但将新模块调用附加到该脚本不起作用。必须创建新的调用方模块脚本
作为一项功能：

function dynModule(me){
  let dyn = document.createElement("script")
  dyn.type = "module"
  dyn.innerText = `import * as ${me} from '../synth/${me}.js'`
  document.querySelector("script[type='module']").parentElement.appendChild(dyn)
  document.querySelectorAll("script[type='module']")[1].outerHTML = ""
}

dynModule("BubbleSynth")

编辑

---

旧答案：
要在DOM加载后导入更多模块，一种不太干净但有效的方法是创建一个module类型的新调用方脚本

/* Example */
/* Loading BubbleSynth.js from «synth» folder*/
let dynamicModules = document.createElement("script")
dynamicModules.type = "module"
dynamicModules.innerText = "import * as bsynth from '../synth/BubbleSynth.js'"
/* One module script already exist. eq: «main.js», append after it */ 
document.querySelector("script[type='module']").parentElement.appendChild(dynamicModules)

销毁模块调用方脚本不会损害过去的调用：

document.querySelectorAll("script[type='module']")[1].outerHTML = ""
// *BubbleSynth* is still in memory and is running

但将新模块调用附加到该脚本不起作用。必须创建新的调用方模块脚本
作为一项功能：

function dynModule(me){
  let dyn = document.createElement("script")
  dyn.type = "module"
  dyn.innerText = `import * as ${me} from '../synth/${me}.js'`
  document.querySelector("script[type='module']").parentElement.appendChild(dyn)
  document.querySelectorAll("script[type='module']")[1].outerHTML = ""
}

dynModule("BubbleSynth")

---

框架是用vanillaJS编写的，所以如果在框架中是可能的，那么在JS中也是可能的。这就是说，这似乎有点像滥用模块。你能动态创建一个脚本标记并将其附加到头部吗？你根本不需要
，删除它。相反，必须使用

type=“module”

包含导入文件。框架是用vanilla JS编写的，因此如果可以在框架中使用，也可以在JS中使用。这就是说，这似乎有点像滥用模块。你能动态创建一个脚本标记并将其附加到头部吗？你根本不需要
，删除它。相反，必须使用

type=“module”

包含导入文件。谢谢你，回答得很好，虽然模块属性转到加载程序而不是模块似乎有点奇怪，但我很高兴它是这样的。我刚刚意识到，如果动态加载的模块中也有导入，这是行不通的，对吗？谢谢，很好的回答，虽然模块属性属于加载程序而不是模块似乎有点奇怪，但我很高兴它是这样的。我刚刚意识到，如果动态加载的模块中也有导入，这是行不通的，对吗？