我刚接触Vite，只想做一件简单的事情-〉引用我在main.js中声明的DOM中的变量。
main.js中重要代码：
let getThis = 'Why does this not work';index.html中重要代码：
<body>
<p id="test">not working</p>
<script type="module" src="/main.js"></script>
<script type="module">
document.getElementById('test').innerHTML = getThis;
</script>示例：https://stackblitz.com/edit/vitejs-vite-urotp2?file=main.js,index.html,counter.js&terminal=dev我在互联网上搜索了2天：/
首先，我在使用Bootstrap和Vite时遇到了一个问题。我想通过Javascript触发一个Modal，就像下面的例子：https://stackblitz.com/edit/github-4akyeo?file=src%2Fjs%2Fmain.js,src%2Findex.html
index.html中重要代码：
<script>
const myModalAlternative = new bootstrap.Modal('#exampleModal');
myModalAlternative.show();
</script>main.js中重要代码：
import * as bootstrap from 'bootstrap';
window.bootstrap = bootstrap;但我总是收到Uncaught ReferenceError: bootstrap is not defined（在控制台中查看）。我研究并发现这是因为引导变量没有链接到窗口对象，但这并没有解决这个问题。所以我分解它并意识到这是一个更普遍的问题。我假设它与文件的捆绑有关，现在变量在中不可读。
这是可能的吗？还是我错过了什么？这可能是一个正常的JavaScript范围问题？感谢任何帮助。
1条答案
按热度按时间pbgvytdp1#
感谢来自维特的Arnaud，我已经解决了这个问题。以下是他告诉我的：
ESM模块中的变量的作用域仅限于该模块，您只能通过导出变量并在其他模块中使用import来访问它们，就像您对计数器所做的那样。https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
如果你想绕过它，你可以在窗口对象上设置一些东西，使它成为全局的，但这应该只在特殊情况下使用
所以我研究了JS模块并修复了上面提到的两个问题。
解决标题中提到的主要问题
我不得不从导入到我的main.js的文件中导出变量，然后将变量导入到我的。
custom.js中的代码：
index.html中重要代码：
参见main problem solved
修复"未捕获引用错误：未定义引导'
我只需要将
type="module"添加到<script>中，bootstrap.Modal('#exampleModal');现在就可以工作了。请记住，只有在您首先将bootstrap设置为全局的情况下才可以工作，例如：参见bootstrap problem solved - Stackblitz
希望这对某人有帮助。