无法访问javascript中的全局变量？_Javascript_Html_Global Variables

无法访问javascript中的全局变量？

javascript html

无法访问javascript中的全局变量？,javascript,html,global-variables,Javascript,Html,Global Variables,我正在尝试从一个文件访问另一个文件。以下是我所拥有的： <!DOCTYPE html> <html lang="en"> <head> </head> <body> <button id="btn">Global</button> <script src="/test.js"></script> <script src="/testpass.js

我正在尝试从一个文件访问另一个文件。以下是我所拥有的：

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>

  <body>
    <button id="btn">Global</button>
    <script src="/test.js"></script>
    <script src="/testpass.js"></script>
  </body>
</html>

testpass.js：

import { globalVariable } from './test.js'
document.getElementById("btn").addEventListener("click", function(){
  alert(globalVariable.output);
});

什么也没发生。我也试过了

var globalVariable = {
    output: "test this"
 };

然后简单地从另一个文件访问它，如下面的回答所示：但它没有起作用。如回答中所述，尝试将其导出：也可以，但没有成功。我使用的是sublime text和vue.js，但这两种版本都不适用

此外，如果我这样做：

import { globalVariable } from '.test.js'
document.getElementById("btn").addEventListener("click", function(){
  alert("Not printing the globalVariable here");
});

在HTML文件中调用时，整个javascript文件似乎都失败了，根本无法工作。

您应该在web控制台中从浏览器的javascript引擎中得到一个错误。要使用

导入

和

导出

，必须将代码视为一个模块。您的

script

标记不会这样做，它们将代码视为脚本。要将

testpass.js

视为一个模块，必须使用

type=“module”

：

遗憾的是，我们无法在SO的堆栈片段中显示模块，但如果您进行了这些更改，您最终得到的就是（除了我将

src=“/testpass.js”

更改为

src=“/testpass.js”

）

请注意，

globalVariable

不是一个全局变量（这是一件好事）™). 它是它导出的
test.js
中的局部变量。任何其他模块都可以导入它，但它不是全局变量。
“什么都不会发生”这意味着甚至没有出现警报窗口？我自己也不太使用es6模块，但我似乎记得，脚本标记上需要一个
type=module
，才能将其视为最不相关的模块：
import { globalVariable } from '.test.js' document.getElementById("btn").addEventListener("click", function(){ alert("Not printing the globalVariable here"); });

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

<!DOCTYPE html> <html lang="en"> <head> </head> <body> <button id="btn">Global</button> <script src="/testpass.js" type="module"></script> </body> </html>