Question

我已经建立了一个html页面，其中包含一个按钮，单击该按钮可以激活来自外部javascript文件的功能。有问题的JS文件从另一个JS文件导入了另外两个函数。但是，当我在浏览器（Safari 12.0.2）中加载html文件并在调试器中对其进行查看时，出现错误，指出“ SyntaxError：意外的令牌'{'。import调用恰好需要一个参数”。

文件名为“ html_test_run.html”，“ test_run_javascript.js”和“ export_test_run.js”。我尝试将脚本的类型设置为“模块”，但这只会导致出现一个新错误，即“ Access-Control-Allow-Origin不允许使用Origin null”。我也尝试过使用三个html标记，前两个具有js文件的源，第三个定义了按钮将使用的新功能，但该功能也不起作用。

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Test run</title>
    <meta name="description" content="Test run">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--
    <link rel="stylesheet" href="">
  -->
  <script type="text/javascript" src="assets/test_run_javascript.js">
  </script>
  </head>
  <body>
      <button type="button" name="button" onclick="doSomething()">Click me</button>
  </body>
</html>

第一个JS文件：

import {doSomethingElse1, doSomethingElse2} from "export_test_run.js";
function doSomething(){
  doSomethingElse1();
  doSomethingElse2();
  console.log("Test successful");
}

第二个JS文件：

function doSomethingElse1(){
  console.log("Test successful1");
}

function doSomethingElse2(){
  console.log("Test successful2");
}

export {doSomethingElse1, doSomethingElse2};

我希望文件可以正确加载，并且单击后按钮将调用函数“ doSomething（）”。

任何帮助将不胜感激。

Answer 1

您可以在首页中包含两个js文件：

  <script type="text/javascript" src="export_test_run.js">
  </script>
  <script type="text/javascript" src="assets/test_run_javascript.js">
  </script>

从您的js文件中删除导出和导入代码！使用正确的路径进行包含。

Answer 2

您必须在页面上正确包含一个脚本，该脚本显示脚本类型为“模块”：

<script src="/js/index.js" type="module"></script>

如果浏览器不支持模块，则可以使用“ nomodule”属性进行处理：

<script nomodule>
  console.info(`Your browser doesn't support native JavaScript modules.`);
</script>

错误：尝试从脚本导入函数时，出现“意外令牌'{'。导入调用恰好需要一个参数”

2 个答案: