Question

我无法在网站的javascript文件中导入任何内容，我已经尝试了很多方法，但是它不起作用。

所以我想使用import关键字将.json文件导入到.js文件中，但是它不起作用。另一个问题是Visual Studio Code不会显示错误，但控制台会显示...

main.js导入部分

import dropDownList from "./navigationList.json"; //This is line number 1

console.log(dropDownList.shop.kits);

navigationList.json文件

{
    "shop": {
        "kits": "DIY Physics Kits",
        "merch": "Merchendise"
    },

    "learn": {
        "first-sub": "Mechanics",
        "second-sub": "Miscellaneous"
    }
}

控制台显示错误：

mainJS.js:1 Uncaught SyntaxError: Unexpected identifier

控制台说我的导入有一个Uncaught SyntaxError，这导致我将我的代码弄长了，而没有很烂的导入。 请帮助我

Answer 1

import语法是ES6模块的一部分。看来您使用的是Node.js，默认情况下不包含对ES6模块的支持。但是，Node.js has experimental support for ES6 modules。

重命名文件以使用.mjs扩展名：

mv mainJS.js mainJS.mjs

使用--experimental-modules标志运行它：

node --experimental-modules mainJS.mjs

我用您的代码对此进行了测试，并且可以正常工作：

% node --experimental-modules main.mjs
(node:73044) ExperimentalWarning: The ESM module loader is experimental.
DIY Physics Kits

在撰写本文时，我正在使用Node.js v12.3.1：

% node --version
v12.3.1

或者，您可以使用Babel之类的工具来转换代码，该工具会将import s更改为require s。

Answer 2

navigation_list.json

{
    "shop": {
        "kits": "DIY Physics Kits",
        "merch": "Merchendise"
    },

    "learn": {
        "first-sub": "Mechanics",
        "second-sub": "Miscellaneous"
    }
}

main.js

var navigation_list = require('./navigation_list.json');
console.log(`>>>> Returned JSON data: ${navigation_list.shop.kits}`);

End the output here:

Javascript导入在Visual Studio代码中不起作用

main.js导入部分

navigationList.json文件

控制台显示错误：

2 个答案: