Question

是否可以在没有用于该模块的脚本标签的情况下使用导入？

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

文件夹结构：

|-- 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>

config.json.js：

export default {

  modules : ['module1', 'module3']

}

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.`);
  )}
})

由于未在script标签中定义模块，因此上述方法无效。

有什么方法可以使用香草JS并保持清洁吗？

Answer 1

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

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

但是，就您而言，简单的forEach可能还不够。如果要等待所有模块从配置中加载，则可能需要Promise.all或类似的文件。

const modules = config.modules.map(moduleName => import(`modules/${moduleName}`))

Promise.all(modules)
  .then(modules => {
    // modules is an array of all your loaded modules
    console.log('All modules loaded.');
  )}

进一步阅读：

Answer 2

要在DOM加载后导入更多模块，一种不太干净但可行的方法是创建一个新的模块类型的调用者脚本。

/* 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» */ 
document.querySelector("script[type='module']").parentElement.appendChild(dynamicModules)

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

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

但是将新模块调用附加到该脚本不起作用。必须创建一个新的调用者模块脚本。

功能：

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

dynModule("BubbleSynth")

是否动态加载type =“ module”不在脚本标签中的模块？

2 个答案: