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

0
Dan 28 Май 2019 в 21:40

2 ответа

Лучший ответ

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

  1. Переименуйте файл, чтобы иметь расширение .mjs:
mv mainJS.js mainJS.mjs
  1. Запустите его с флагом --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

< Сильный > 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