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

Question

I am trying to export from functions.js and import it to login.js, but when i load localhost:3000 i get error "Uncaught SyntaxError: Cannot use import statement outside a module" and "Uncaught SyntaxError: Unexpected token 'export'"我正在尝试从functions.js导出并将其导入到login.js，但是当我加载localhost：3000时出现错误“未捕获的语法错误：无法在模块外使用导入语句”和“未捕获的语法错误：意外令牌'导出'”

Is webpack only solution for this? webpack 是唯一的解决方案吗？ I am in late stage of my project and trying to find easy work around.我处于项目的后期阶段，并试图找到简单的工作。

Code:代码：

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

Answer 1

Since you're asking for an easy workaround , you may consider using globals .由于您要求一个简单的解决方法，您可以考虑使用全局变量。

All your JavaScript files have a common global scope.您的所有 JavaScript 文件都有一个通用的全局 scope。 The common global object context between your script files for a browser is window .浏览器脚本文件之间的通用全局 object 上下文是window 。 When you assign a variable like x = 1 , it gets assigned to window.x .当您分配像x = 1这样的变量时，它会被分配给window.x 。 If you define a function like function go() {} it gets assigned to window.go .如果你定义一个 function 像function go() {}它被分配给window.go If you try to read a variable like foo , it's actually looking for window.foo .如果您尝试读取像foo这样的变量，它实际上是在寻找window.foo 。 All your JavaScript files will have access to this window object and its properties, both explicitly with window.foo and implicitly with just foo .您的所有 JavaScript 文件都将有权访问此window foo及其属性，无论是显式使用window.foo还是隐式使用。

Also worth mentioning that JavaScript modules are a thing.另外值得一提的是JavaScript 模块是一个东西。 But if you're just looking for a quick solution and have no time to learn something new right now, then a carefully used global can get you out of a pinch.但是，如果您只是在寻找一个快速的解决方案并且现在没有时间学习新的东西，那么精心使用的全局可以让您摆脱困境。

Answer 2

If you're importing manually with <script> then you shouldn't have to use import , you can straight use the library that is provided to you.如果您使用<script>手动导入，则不必使用import ，您可以直接使用提供给您的库。

index.html索引.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 sum.js

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

print.js打印.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 's job is to bundle all the JS files together into one file. Webpack的工作是将所有 JS 文件捆绑到一个文件中。 So if you wanna use import then webpack will be the way you want to choose sure.因此，如果您想使用import ，那么 webpack 将是您要选择的方式。

But understand what the purpose of each tool is and why it was created.但要了解每个工具的用途以及创建它的原因。 Webpack was not created so you can use import , and you can still make projects without Webpack. Webpack 未创建，因此您可以使用import ，并且您仍然可以在没有 Webpack 的情况下制作项目。 But it will help you for sure in some cases and no knowledge goes wasted.但在某些情况下，它肯定会对您有所帮助，并且不会浪费任何知识。

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

问题描述

2 个解决方案

解决方案1
1 2020-12-19 15:25:04

解决方案2
1 已采纳 2020-12-19 15:26:14

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

问题描述

2 个解决方案

解决方案1 1 2020-12-19 15:25:04

解决方案2 1 已采纳 2020-12-19 15:26:14

解决方案1
1 2020-12-19 15:25:04

解决方案2
1 已采纳 2020-12-19 15:26:14