1. 首页
  2. 问题列表
  3. 两个javascript文件能否通过html正文中的引用进行通信？
提问者：小点点

两个javascript文件能否通过html正文中的引用进行通信？


我试图从functions.js导出并将其导入到login.js，但当我加载localhost:3000时，我得到错误“uncauted syntaxerror:不能在模块外使用import语句”和“uncauted syntaxerror:意外的令牌'export'”

webpack是唯一的解决方案吗？我在我的项目的后期阶段，并试图找到容易的工作周围。

代码:

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

共2个答案

匿名用户

既然您要求的是一个简单的变通方法，那么您可以考虑使用全局变量。

您的所有JavaScript文件都有一个共同的全局范围。浏览器脚本文件之间的通用全局对象上下文是。当您分配像这样的变量时，它将被分配给。如果您定义了一个像这样的函数，它将被分配给。如果您试图读取像这样的变量，它实际上是在查找。您的所有JavaScript文件都可以访问这个对象及其属性，可以通过显式访问，也可以通过隐式访问。

还值得一提的是，JavaScript模块是一个东西。但是如果你只是在寻找一个快速的解决方案，而没有时间学习新的东西现在，那么一个谨慎使用的全局可以让你摆脱困境。

匿名用户

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

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="./printsum.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)

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

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

相关问题