从另一个 JS 文件导入 json 对象

Question

我有 file1，data.js：export var data = [    {        id : "001",        name : "apple",        category : "fruit",        color : "red"    },    {        id : "002",        name : "melon",        category : "fruit",        color : "green"    },    {        id : "003",        name : "banana",        category : "fruit",        color : "yellow"    }]module.exports = data;我有 file2，index.html：<table id="table">    <tr>        <th>ID</th>        <th>Name</th>        <th>Category</th>        <th>Color</th>    </tr></table><script src="jquery.js"></script><script>import {data} from 'data.js';for(var i = 0; i < data.length; i++) {    var row = '<tr><td>' + data[i].id + '</td>';    row+= '<td>' + data[i].name+ '</td>';    row+= '<td>' + data[i].category + '</td>';    row+= '<td>' + data[i].color + '</td></tr>';    $("#table").append(row);}</script>问题出在这一行：import {data} from 'data.js';如果我将数据变量直接包含在index.html中，它工作正常，但是当我尝试从它自己的单独文件引用它时，它不起作用。它抛出的错误是：  Unexpected token { import call expects exactly one argument任何帮助将非常感激。

Answer 1

使用script标签代替import. export在js文件中删除。

  <script type="text/javascript" src="data.js"></script>

1.html

<table id="table">

  <tr>

    <th>ID</th>

    <th>Name</th>

    <th>Category</th>

    <th>Color</th>

  </tr>

</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript" src="data.js"></script>

<script>

  for (var i = 0; i < data.length; i++) {

    var row = "<tr><td>" + data[i].id + "</td>";

    row += "<td>" + data[i].name + "</td>";

    row += "<td>" + data[i].category + "</td>";

    row += "<td>" + data[i].color + "</td></tr>";

    $("#table").append(row);

  }

</script>

数据.js

var data = [

  {

    id: "001",

    name: "apple",

    category: "fruit",

    color: "red",

  },

  {

    id: "002",

    name: "melon",

    category: "fruit",

    color: "green",

  },

  {

    id: "003",

    name: "banana",

    category: "fruit",

    color: "yellow",

  },

];