Как импортировать модуль из index.js
Я создал пример node.js проекта:
"name": "example",
"version": "1.0.0",
"type": "module",
Вот index.js (только две строки):
"use strict";
import MapLibreGlDirections, { LoadingIndicatorControl } from "@maplibre/maplibre-gl-directions";
Установите «@maplibre/maplibre-gl-directions» в глобальном масштабе:
# npm install "@maplibre/maplibre-gl-directions" --global
Теперь запустите index.js с узлом:
# node index.js
Вот ошибка:
node:internal/errors:496
ErrorCaptureStackTrace(err);
^
Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@maplibre/maplibre-gl-directions' imported from /root/Documents/test/index.js
at new NodeError (node:internal/errors:405:5)
at packageResolve (node:internal/modules/esm/resolve:890:9)
at moduleResolve (node:internal/modules/esm/resolve:939:20)
at defaultResolve (node:internal/modules/esm/resolve:1132:11)
at nextResolve (node:internal/modules/esm/loader:163:28)
at ESMLoader.resolve (node:internal/modules/esm/loader:835:30)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)
at link (node:internal/modules/esm/module_job:76:36) {
code: 'ERR_MODULE_NOT_FOUND'
}
Node.js v18.18.2
Я скопировал «импорт» отсюда: https://github.com/maplibre/maplibre-gl-directions
В пакете «@maplibre/maplibre-gl-directions» уже есть been installed in global, but index.js still can't find the module (ERR_MODULE_NOT_FOUND).
Что не так в index.js? Как импортировать этот модуль?
Обновлять:
После установки vite в глобальном масштабе с помощью npm попробуйте собрать следующие файлы и содержимое, но это не сработает.
пакет.json:
{
"name": "example",
"version": "1.0.0",
"description": "",
"main": "index.js",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"author": "",
"license": "ISC"
}
индекс.js:
"use strict";
import MapLibreGlDirections, { LoadingIndicatorControl } from "@maplibre/maplibre-gl-directions";
console.info("hello world in console");
function hello() {
document.write("hello world in document")
}
module.exports = hello;
индекс.html:
<html>
<head>
<script src = "index.js"></script>
</head>
<body>
hello world in body!
<script type = "javascript">
new hello()
</script>
</body>
</html>
После запуска:
# npm run build
# npm run preview
Вот вывод в Firefox:
hello world in body!
Вот ожидаемый результат в Firefox:
hello world in body!
hello world in document!
vite не создает «index.js» в проекте. Как заставить этот пример проекта работать с vite build?
Обновление 2:
После добавления в скрипт:
<script type = "module" src = "index.js"></script>
Затем перестройте с помощью: npm run build
error during build:
Error: [vite]: Rollup failed to resolve import "@maplibre/maplibre-gl-directions" from "/root/Documents/test/index.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
Он по-прежнему не может найти модуль с vite, это то же самое, что и node. В чем проблема импортировать этот модуль из index.js?
Обновление 3:
vite.config.js: (только одна строка)
import { defineConfig } from 'vite'
Затем восстановите:
failed to load config from /root/Documents/test/vite.config.js
error during build:
Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'vite' imported from /root/Documents/test/vite.config.js.timestamp-1710392651394-3723eb717de11.mjs
at new NodeError (node:internal/errors:405:5)
at packageResolve (node:internal/modules/esm/resolve:916:9)
at moduleResolve (node:internal/modules/esm/resolve:973:20)
at defaultResolve (node:internal/modules/esm/resolve:1193:11)
at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:403:12)
at ModuleLoader.resolve (node:internal/modules/esm/loader:372:25)
at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:249:38)
at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:39)
at link (node:internal/modules/esm/module_job:75:36)
То самое ERR_MODULE_NOT_FOUND!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вам необходимо использовать этот пакет в среде браузера, а не использовать Node для его выполнения.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "UTF-8" />
<link rel = "icon" type = "image/svg+xml" href = "/vite.svg" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head>
<body>
<div id = "root"></div>
<script type = "module" src = "/src/main.tsx"></script>
</body>
</html>
{
"name": "demo",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"@maplibre/maplibre-gl-directions": "^0.6.1",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.64",
"@types/react-dom": "^18.2.21",
"@typescript-eslint/eslint-plugin": "^7.1.1",
"@typescript-eslint/parser": "^7.1.1",
"@vitejs/plugin-react": "^4.2.1",
"eslint": "^8.57.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"typescript": "^5.2.2",
"vite": "^5.1.6"
}
}
// Import the plugin
import MapLibreGlDirections, { LoadingIndicatorControl } from "@maplibre/maplibre-gl-directions";
// Make sure to create a MapLibreGlDirections instance only after the map is loaded
function App() {
console.info(MapLibreGlDirections);
console.info(LoadingIndicatorControl);
return (
<>
</>
)
}
export default App
vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})
пожалуйста, проверьте папку dist
конечно. Вам нужно использовать некоторые инструменты для создания пакетов. Webpack, режим библиотеки Vite, tsup и т. д.
Я часто использую Vite для создания собственных пакетов и публикации их на npm. Эта статья может вам помочь. rbardini.com/how-to-build-ts-library-with-vite
Я пытался собрать с помощью Vite, но не получилось. Можете ли вы помочь проверить мой обновленный пост? Спасибо.
Я добавил обновление 2, при сборке с помощью vite возникает та же ошибка. Помогите, пожалуйста, проверить.
Я добавил vite.config.js в «update 3», то же самое module not found для глобально установленного vite пакета.
Пожалуйста, предоставьте мне свой репозиторий кода на GitHub. Я из Восточного Восьмого округа. Вечером я вытащу предоставленный вами код и помогу разобраться в этой проблеме. Как насчет этого?
Спасибо, я только что создал свой самый первый проект «node.js» в локальной папке документов. Все файлы указаны в посте. Я пытаюсь собрать модуль со своим собственным пакетом, а затем использовать свой пакет в качестве «обертки» модуля импорта. Я хочу использовать эти несколько простых файлов для изучения node.js.
src/index.ts Вот запись пакета для всего проекта. Но я не знаю, знаком ли вам Typescript. Для упаковки собственного пакета npm необходимо освоить детали настройки многих инструментов настройки. Рекомендую обратиться к соответствующим шаблонам проектов.
Я хочу создать свой пакет для импорта этого модуля, а затем использовать его в браузере. Является ли это возможным?