Импорт Javascript не работает в коде Visual Studio

Question

Я ничего не могу импортировать в файлы javascript на моем веб-сайте, я пробовал много вещей, но это не работает.

Поэтому я хочу импортировать файл .json в файл .js, используя ключевое слово import, но это не работает. Другая проблема заключается в том, что 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, и это заставляет меня делать мой код длинным и без импорта, что отстой. Пожалуйста, помогите мне

javascript import javascript-import

0

Dan 28 Май 2019 в 21:40

Answer 1

Синтаксис import является частью модулей ES6. Похоже, вы используете Node.js, который по умолчанию не поддерживает модули ES6. Однако Node.js имеет экспериментальную поддержку модулей ES6.

Переименуйте файл, чтобы иметь расширение .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 на require.

3

Elliot 28 Май 2019 в 19:13

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}`);

Конец вывода здесь:

1

Nhan Tran Trong 28 Май 2019 в 20:11

Импорт Javascript не работает в коде Visual Studio

Часть импорта main.js

Файл navigationList.json

Ошибка консоли показывает:

2 ответа

Похожие вопросы

Связанные вопросы

Новые вопросы

javascript