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

Question

我无法在我网站的 javascript 文件中导入任何内容，我尝试了很多方法，但都没有用。

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

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

控制台说我的导入有一个未捕获的语法错误，这导致我的代码很长而且没有导入，这很糟糕。 请帮帮我

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 等工具转译您的代码，它将 imports 更改为 requires。

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 代码中不起作用

Javascript Import Don't Work In Visual Studio Code

javascript

import

javascript-import

main.js导入部分

navigationList.json 文件

控制台显示错误：