JS:将数组模块导入主脚本，而不是HTML

Question

我是JavaScript新手。我一直在寻找问题的答案，但就是找不到。

同样，我有一个不同的选项数组(用于文本冒险游戏)，我想导入到主JS脚本。问题是我在主脚本中从数组调用不同的选项，它不工作。

我在互联网上找到的答案将用于从模块导入函数到HTML代码，但这不是我要找的。

是的代码工作:

const textElement = document.getElementById('text');
const buttonOptionsElement = document.getElementById('buttonOptions');
// keep track of what the character has on them
let state = {}
// function to start the game
function startGame() {
state = {}
showTextNode(1)
}
function showTextNode(textNodeIndex) {
const textNode = textNodes.find(textNode => textNode.id === textNodeIndex)
textElement.innerText = textNode.text
while (buttonOptions.firstChild) {
buttonOptions.removeChild(buttonOptions.firstChild)
}
textNode.options.forEach(option => {
if(showOption(option)) {
const button = document.createElement('button')
button.innerText = option.text
button.classList.add('btn')
button.addEventListener('click', () => selectOption(option))
buttonOptions.appendChild(button)
}
})
}
function showOption(option) {
return option.requiredState == null || option.requiredState(state)
}
// function to get the element clicked
function selectOption(option) {
const nextTextNodeId = option.nextText
if (nextTextNodeId <= 0) {
return startGame()
}
state = Object.assign(state, option.setState)
showTextNode(nextTextNodeId)
}
const textNodes = [
{
id: 1,
text: 'First scenario',
options: [
{
text: 'Take goo',
setState: { blueGoo: true},
nextText: 2
},
{
text: 'leave the goo',
}
]
},
{
id: 2,
text: 'this is the second scenario.',
options: [
{
text: 'trade the goo for a sword',
requiredState: (currentState) => currentState.blueGoo,
setState: { blueGoo: false, sword: true},
nextText: 3
}
]
startGame();

不是的代码工作是完全相同的事情，但不是在main.js中有textNodes数组，我 在一个单独的文件中。我用以下行导入它来代替const textNodes = [{},...,{}]:

import { textNodes } from './modules/scenario.js'

Answer 1

嗯，声誉不足以评论。基本上，您需要在调试会话之前先查看JS模块文档。可能有两个地方需要检查:

1. 对于模块js文件，你需要在HTML中将其声明为模块。

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

2. 需要在scenario.js中导出相应的函数。

Answer 2

我发现了问题…这是荒谬的，只是在HTML 我输入type="modules"而不是type="module"。