Импорт Javascript не работает в коде Visual Studio
Я не могу ничего импортировать в свои файлы javascript на своем веб-сайте, я много чего пробовал, но это не работает.
Итак, я хочу импортировать файл .json в файл .js, используя ключевое слово import, но это не работает. Другая проблема заключается в том, что код Visual Studio не показывает мне ошибку, но консоль делает...
часть импорта main.js
import dropDownList from "./navigationList.json"; //This is line number 1
console.info(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, и это заставляет меня делать мой код длинным и без импорта, что отстой. Пожалуйста помогите
используйте API fetch, чтобы получить JSON.
@Sarwara - это: ключевое слово import не работает с импортом данных json не точно. Можно импортировать JSON данные, пока он экспортируется. Но нельзя импортировать из типа MIME, отличного от JS (например, navigationList.json).
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Синтаксис 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, который меняет imports на requires.
Привет, Эллиот, ты действительно помог мне, хотя я не использую Node.js, эти скрипты подключены к моей веб-странице с тегом <script>, однако я попытаюсь транспилировать свой код, чтобы использовать require(), и я посмотрю, работает ли он. Примечание. В настоящее время, когда я пытаюсь использовать слово require() в своем коде, консоль говорит, что require is not defined.
Кстати: в этой статье говорится, что без сервера я не могу использовать ключевое слово import, и в настоящее время я запускаю свой веб-сайт на своем компьютере с протоколом file://, поэтому я думаю, что это была главная проблема...
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.info(`>>>> Returned JSON data: ${navigation_list.shop.kits}`);
importключевое слово не работает с импортом данных json, оно может импортировать только определенные модули из файла js. См. документацию — developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… и обходной путь — stackoverflow.com/questions/34944099/….