两个 javascript 文件可以通过在 html body 中的引用进行通信吗？

如何解决两个 javascript 文件可以通过在 html body 中的引用进行通信吗？

我正在尝试从 functions.js 导出并将其导入到 login.js，但是当我加载 localhost:3000 时出现错误“Uncaught SyntaxError：无法在模块外使用 import 语句”和“Uncaught SyntaxError：Unexpected token”导出'"

webpack 是唯一的解决方案吗？我正处于项目的后期阶段，并试图找到简单的解决方法。

代码：

<html>
 <body
    <script src="/js/exports/functions.js"></script>
    <script src="/js/login.js"></script>
  </body>
</html>

解决方法

既然您需要一个简单的解决方法，您可以考虑使用全局变量。

您所有的 JavaScript 文件都有一个通用的全局范围。浏览器脚本文件之间的通用全局对象上下文是 window。当您分配像 x = 1 这样的变量时，它会被分配给 window.x。如果你定义了一个像 function go() {} 这样的函数，它会被分配给 window.go。如果您尝试读取 foo 之类的变量，它实际上是在查找 window.foo。您的所有 JavaScript 文件都可以访问此 window 对象及其属性，无论是显式使用 window.foo 还是隐式使用 foo。

另外值得一提的是，JavaScript modules 是一个东西。但是，如果您只是在寻找快速解决方案，而现在没有时间学习新东西，那么仔细使用全局变量可以让您摆脱困境。

如果您使用 <script> 手动导入，则不必使用 import，您可以直接使用提供给您的库。

index.html

<html>
  <head>
    <!-- Order matters! -->
    <!-- Sum has to be imported first so `print.js` can use it -->
    <script src="./sum.js"></script>
    <script src="./print.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

sum.js

const sum = (a,b) => {
    return a + b
}

print.js

var result = sum(1,1) // Notice how you dont have to import any library,it's on the global namespace
console.log("1 + 1 = ",result)

Webpack 的工作是将所有 JS 文件捆绑在一起 到一个文件中。因此，如果您想使用 import，那么 webpack 将是您肯定要选择的方式。

但要了解每个工具的用途以及创建它的原因。 Webpack 没有创建，所以你可以使用 import，你仍然可以在没有 Webpack 的情况下制作项目。但它在某些情况下肯定会帮助您，并且不会浪费任何知识。

两个 javascript 文件可以通过在 html body 中的引用进行通信吗？

如何解决两个 javascript 文件可以通过在 html body 中的引用进行通信吗？

解决方法

相关推荐