Проблема с созданием веб-приложения с помощью parcel-bundler (Java не загружается после компиляции)

Доброго времени суток, ребята! Я поискал в Интернете решение, но не смог его найти, поэтому обращаюсь к вам за помощью. Пожалуйста, подождите, пока я полностью опишу ситуацию.

Я новичок, у которого возникли проблемы с посылкой при разработке веб-проекта начальной загрузки. First, it throws an error for using index.js which doesn't make any sense. As per the bootstrap, doc. folder structure suppose to be

      project-name/
├── build/
├── node_modules/
│   └── bootstrap/
│   └── popper.js/
├── scss/
│   └── custom.scss
├── src/
│   └── index.html
│   └── index.js
└── package.json

Я слежу за загрузочной документацией до мелочей. Ссылка: https://getbootstrap.com/docs/5.0/getting-started/parcel/

Пакеты, использованные в проекте :

  • упаковщик посылок,

  • popperjs и

  • бутстрап

Повторно созданная проблема с простым HTML

index.html

      <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>HELLOW WORLD</h1>
  <script type="module" src="index.js"></script>
</body>
</html>

index.js

      import * as bootstrap from 'bootstrap';
alert('JAVA is LOADED');
console.log('Java is loaded another example');

custom.scss

      @import "../node_modules/bootstrap/scss/bootstrap";

package.json

      {
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "parcel ./src/index.html",
    "prebuild": "npx rimraf build",
    "build": "parcel build --public-url ./ ./src/index.html --dist-dir build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@popperjs/core": "^2.9.2",
    "bootstrap": "^5.0.2"
  }
}

Сообщение об ошибке :

      @parcel/namer-default: Target "main" declares an output file path of "index.js" which does not match the compiled bundle type "html".
/Users/abc/Visual_Code/test/package.json:5:11
  4 |   "description": "",
> 5 |   "main": "index.js",
>   |           ^^^^^^^^^^^^^^^^^^ Did you mean "index.html"?
  6 |   "scripts": {
  7 |     "dev": "parcel ./src/index.html",
Try changing the file extension of "main" in package.json.

Другие сообщения в Интернете рекомендовали заменить **"main":** значение с "../dist/index.js,"но это тоже не сработало. Когда я попытался удалить полную "main":line, веб-приложение было создано, но Java не была загружена. Если я сделаю npm run devвеб-приложение выполняет javascript (я поддерживал "main": "index.js" в режиме разработки), и я могу видеть предупреждающее сообщение и сообщение журнала в консоли, но оно не работает при создании приложения. Когда я зашел слишком далеко в разработке своего веб-приложения в посылке, я совершенно не знал, что можно сделать на этом этапе.

Буду очень признателен за вашу помощь!

Источник

4 ответа

Удалите основной атрибут из package.json

Источник

Это связано с тем, что в вашем приложении для производства (сборки) есть 2 точки входа.

  2. "build": "parcel build --public-url ./ ./src/index.html --dist-dir build"

Эта ошибка практически неизбежна в большинстве случаев, потому что это всего лишь настройки по умолчанию, и в этом никто не виноват.

Мне удалось решить проблему по ссылке официальной документации . Чтобы устранить ошибку, вы можете заменить свой "main": "index.js",с

      "source": "src/index.html",

соответственно, вы также можете уменьшить "start"(или разработчик) и "build"скрипты. См. ссылку.

Источник

Вы, вероятно, уже разобрались с этим, но я сам был немного сбит с толку этим, когда использовал посылку с экспресс-приложением, поэтому вот ответ для тех, кто придет позже. Проблема здесь в том, что стандарт npm противоречит самоуверенным ожиданиям пакета.

требуется для модулей npm . Из документов npm:

Основное поле — это идентификатор модуля, который является основной точкой входа в вашу программу. То есть, если ваш пакет называется foo, и пользователь устанавливает его, а затем требует ("foo"), то будет возвращен объект экспорта вашего основного модуля.

Вы создаете автономную исполняемую программу, а не модуль, поэтому в данной ситуации это не имеет значения. Таким образом, Дик Ларссон прав, когда говорит, что вы должны удалить package.json, однако это только половина ответа. В идеале вы должны добавить startзначение для ваших скриптов:

      "scripts": {
  "start": "node index.js"
  "dev": "parcel ./src/index.html",
  "prebuild": "npx rimraf build",
  "build": "parcel build --public-url ./ ./src/index.html --dist-dir build"
},

Теперь вы можете запустить свое приложение с помощью npm startпосле того, как он будет построен, и посылка не будет жаловаться на стоимость в main.

Источник

Ваш package.json говорит

основной = "index.js"

Но похоже, что точкой входа для вашего приложения является index.html.

Так что вам нужно изменить

main="index.html" (работает, но не рекомендуется)

Примечание. Вышеупомянутое будет создано в корневом каталоге, поэтому рекомендуется

main="dist/index.html" (рекомендуется)

Вы можете изменить имя вашего целевого каталога сборки по мере необходимости или по своему желанию вместо dist. Но большинство пакетов, найденных в экосистеме, используют dist по соглашению.

Источник
Другие вопросы по тегам