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

Question

我正在尝试从 functions.js 导出并将其导入到 login.js，但是当我加载 localhost:3000 时出现错误“未捕获的语法错误：无法在模块外使用导入语句”和“未捕获的语法错误：意外的标记 'export'”

webpack 是唯一的解决方案吗？我正处于项目的后期阶段，正在努力寻找简单的解决方法。

代码：

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

Answer 1

由于您要求 简单的解决方法，您可以考虑使用 globals.

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

隐式访问。

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

Answer 2

如果您使用 <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 主体中的引用进行通信吗？

Can two javascript files communicate through referencing in html body?

html

javascript

import

export

require