英文:
JavaScript variable reference in DOM Script not working
问题
I am new to Vite and want just one simple thing -> to reference a variable in my DOM that I declared in the main.js.
important code from main.js:
let getThis = 'Why does this not work';
important code from 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>
</body>
Exmple: https://stackblitz.com/edit/vitejs-vite-urotp2?file=main.js,index.html,counter.js&terminal=dev I searched the Internet for 2 Days now:/
First I had a problem using Bootstrap in combination with Vite. I wanted to trigger a Modal via Javascript like in this example: https://stackblitz.com/edit/github-4akyeo?file=src%2Fjs%2Fmain.js,src%2Findex.html
important code from index.html:
<script>
const myModalAlternative = new bootstrap.Modal('#exampleModal');
myModalAlternative.show();
</script>
important code from main.js:
import * as bootstrap from 'bootstrap';
window.bootstrap = bootstrap;
But I always received Uncaught ReferenceError: bootstrap is not defined (look in the console). I researched and found out that this is because the bootstrap variable is not linked to the window object but this didn't fix the issue. So I broke it down and realized this is a more general problem. I assume that it has something to do with the bundling of the files and now the variables aren't readable in the <script>.
Is this even possible or am I missing something here? Is this maybe a normal JavaScript scope issue? Thankful for any help.
英文:
I am new to Vite and want just one simple thing -> to reference a variable in my DOM that I declared in the main.js.
important code from main.js:
let getThis = 'Why does this not work';
important code from 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>
</body>
Exmple: https://stackblitz.com/edit/vitejs-vite-urotp2?file=main.js,index.html,counter.js&terminal=dev I searched the Internet for 2 Days now:/
First I had a problem using Bootstrap in combination with Vite. I wanted to trigger a Modal via Javascript like in this example: https://stackblitz.com/edit/github-4akyeo?file=src%2Fjs%2Fmain.js,src%2Findex.html
important code from index.html:
<script>
const myModalAlternative = new bootstrap.Modal('#exampleModal');
myModalAlternative.show();
</script>
important code from main.js:
import * as bootstrap from 'bootstrap';
window.bootstrap = bootstrap;
But I always received Uncaught ReferenceError: bootstrap is not defined(look in the console ). I researched and found out that this is because the bootstrap variable is not linked to the window object but this didn´t fix the issue. So I broke it down and realized this is a more general problem. I assume that it has something to do with the bundling of the files and now the variables aren't readable in the <script>.
Is this even possible or am I missing something here? Is this maybe a normal JavaScript scope issue? Thankful for any help.
答案1
得分: 0
感谢来自Vite的Arnaud，我解决了这个问题。这是他告诉我的内容：
ESM模块中的变量仅在模块范围内，只能通过导出它们并在其他模块中使用导入来访问它们，就像你为计数器所做的那样。更多信息请查看：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
如果你想绕过这个限制，你可以将某些东西设置为全局的window对象，但这应该只在特殊情况下使用。
所以我研究了JS模块并解决了上面提到的两个问题。
解决标题中提到的主要问题
我不得不从一个文件中导出变量，然后在我的main.js中导入该变量，然后在我的<script>中导入该变量。
custom.js中的代码：
export let getThis = '为什么这不起作用';
index.html中的重要代码：
import { getThis } from './custom.js';
查看解决主要问题
修复'Uncaught ReferenceError: bootstrap is not defined'
我只需要将type="module"添加到<script>中，然后bootstrap.Modal('#exampleModal');现在可以正常工作。请记住，这仅在你首先将bootstrap设置为全局时才有效，就像这样：
import * as bootstrap from 'bootstrap';
window.bootstrap = bootstrap; // <- 添加到window对象以绕过范围并使其成为全局变量
希望这对某人有所帮助。
英文:
Thanks to Arnaud from Vite I have solved the problem.
Here is What he told me:
> Variables in ESM modules are scoped to the modules, you can only
> access them in other modules by exporting them and using import in the
> other module, like you did for the counter. More information here:
> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
>
> If you want to bypass this, you can always set something on window
> object to make it global, but that should be used only exceptionally
So I researched JS Modules and fixed both problems mentioned above.
Solving the main problem mentioned in the title
I had to export the variable from a file which is imported to my main.js and then import the variable in my <script>.
code from custom.js:
export let getThis = 'Why does this not work';
important code from index.html:
import { getThis } from './custom.js';
Fixing 'Uncaught ReferenceError: bootstrap is not defined'
I just had to add type="module" to <script> and bootstrap.Modal('#exampleModal'); is working now.
Keep in mind this works only if you first made bootstrap global like:
import * as bootstrap from 'bootstrap';
window.bootstrap = bootstrap; // <- add to window object to bypass the scope and make it global
see bootstrap problem solved - Stackblitz
I hope this helped someone.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论