Javascript 学习如何使用ES6导入和模块获取参考错误_Javascript_Ecmascript 6_Module_Es6 Modules

Javascript 学习如何使用ES6导入和模块获取参考错误

javascript ecmascript-6 module

Javascript 学习如何使用ES6导入和模块获取参考错误,javascript,ecmascript-6,module,es6-modules,Javascript,Ecmascript 6,Module,Es6 Modules,我刚刚开始学习ES6导入，希望将应用程序转换为模块化ES6。我的当前项目具有以下目录结构： index.html -scripts\ --function1.js --function2.js --globals.js --main.js 我的index.html文件代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <me

我刚刚开始学习ES6导入，希望将应用程序转换为模块化ES6。我的当前项目具有以下目录结构：

index.html
-scripts\
   --function1.js
   --function2.js
   --globals.js
   --main.js

我的index.html文件代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Modular JS Example</title>
</head>
<body>
  <button onclick="changevar1()">Change Var 1</button>
  <button onclick="changevar2()">Change Var 2</button>
  <script src="scripts/main.js" type="module"></script>

</body>
</html>

import {globalvar1 as globalvar1,
  globalvar2 as globalvar2} from "./globals.js";
import {changevar1 as changevar1} from "./function1.js";
import {changevar2 as changevar2} from "./function2.js";

console.log(globalvar1, globalvar2,changevar1,changevar2);

export let globalvar1 = "I am globalvar1";
export let globalvar2 = "I am globalvar2";

import { globalvar1 } from "./globals.js" //do I need to import here?

export function changevar1() {
  globalvar1 = "Now changed globalvar1"
  console.log(globalvar1);
}

export function changevar2() {
  globalvar2 = "Now changed globalvar2"
  console.log(globalvar2);
}

My globals.js是我声明一些全局变量的地方，这些变量将由

functions1.js

或

functions2.js

中的函数使用，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Modular JS Example</title>
</head>
<body>
  <button onclick="changevar1()">Change Var 1</button>
  <button onclick="changevar2()">Change Var 2</button>
  <script src="scripts/main.js" type="module"></script>

</body>
</html>

import {globalvar1 as globalvar1,
  globalvar2 as globalvar2} from "./globals.js";
import {changevar1 as changevar1} from "./function1.js";
import {changevar2 as changevar2} from "./function2.js";

console.log(globalvar1, globalvar2,changevar1,changevar2);

export let globalvar1 = "I am globalvar1";
export let globalvar2 = "I am globalvar2";

import { globalvar1 } from "./globals.js" //do I need to import here?

export function changevar1() {
  globalvar1 = "Now changed globalvar1"
  console.log(globalvar1);
}

export function changevar2() {
  globalvar2 = "Now changed globalvar2"
  console.log(globalvar2);
}

My function1.js具有第一个按钮的功能，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Modular JS Example</title>
</head>
<body>
  <button onclick="changevar1()">Change Var 1</button>
  <button onclick="changevar2()">Change Var 2</button>
  <script src="scripts/main.js" type="module"></script>

</body>
</html>

import {globalvar1 as globalvar1,
  globalvar2 as globalvar2} from "./globals.js";
import {changevar1 as changevar1} from "./function1.js";
import {changevar2 as changevar2} from "./function2.js";

console.log(globalvar1, globalvar2,changevar1,changevar2);

export let globalvar1 = "I am globalvar1";
export let globalvar2 = "I am globalvar2";

import { globalvar1 } from "./globals.js" //do I need to import here?

export function changevar1() {
  globalvar1 = "Now changed globalvar1"
  console.log(globalvar1);
}

export function changevar2() {
  globalvar2 = "Now changed globalvar2"
  console.log(globalvar2);
}

在上面的例子中，我正在从

globals.js

导入

globalvar1

，我不确定这是否是必需的，或者它是否会在

main.js

中合并在一起

My function2.js具有第二个按钮的功能，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Modular JS Example</title>
</head>
<body>
  <button onclick="changevar1()">Change Var 1</button>
  <button onclick="changevar2()">Change Var 2</button>
  <script src="scripts/main.js" type="module"></script>

</body>
</html>

import {globalvar1 as globalvar1,
  globalvar2 as globalvar2} from "./globals.js";
import {changevar1 as changevar1} from "./function1.js";
import {changevar2 as changevar2} from "./function2.js";

console.log(globalvar1, globalvar2,changevar1,changevar2);

export let globalvar1 = "I am globalvar1";
export let globalvar2 = "I am globalvar2";

import { globalvar1 } from "./globals.js" //do I need to import here?

export function changevar1() {
  globalvar1 = "Now changed globalvar1"
  console.log(globalvar1);
}

export function changevar2() {
  globalvar2 = "Now changed globalvar2"
  console.log(globalvar2);
}

在本例中，我并没有导入

globalvar2

，只是想看看它是否是必需的

现在的问题很简单，当您按下按钮时，如何触发

changevar1（）

或

changevar2（）

来更改

globalvar1

或

globalvar2

？我不断得到“参考错误”

为了理解模块化js，我阅读了一些在线文档，并观看了一些在线视频教程。

请原谅我缺乏关于模块的知识和任何帮助，即使非常基本的知识是有用的。

您不能在浏览器上直接使用es6模块。您需要一个将es6代码转换为es5的编译器，就像您需要一个将js文件转换为捆绑包的节点服务器一样。大多数框架，如React、Angular，都遵循这个过程。我的理解是ES6模块在最新版本的Chrome和Firefox中是兼容的，符合MDN的要求，显示它现在已经有几个版本了？控制台日志是否正在打印函数，您是否可以直接从控制台调用函数以查看它们是否在全局范围内可用？main.js中的

console.log

显示所有已导入的内容。但是，如果打开控制台并尝试键入导入，例如，

changevar1（）

，则会出现一个引用错误。@dibakarlder已经过时，您可以在现代浏览器中使用模块。