使用 Parcel-Bundler 构建 Web 应用程序时遇到问题(编译后未加载 Java)

Sam*_*nia 9 html javascript parceljs popperjs bootstrap-5

美好的一天,伙计们!\n我在网上寻找解决方案,但找不到,所以我向你寻求帮助。请耐心听我完整描述情况。

\n

我是一名初学者,在开发引导 Web 项目时遇到了 Parcel 问题。\nFirst, it throws an error for using index.js which doesn\'t make any sense. As per the bootstrap, doc. folder structure suppose to be

\n
project-name/\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 build/\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 node_modules/\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 bootstrap/\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 popper.js/\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 scss/\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 custom.scss\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src/\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 index.html\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 index.js\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 package.json\n
Run Code Online (Sandbox Code Playgroud)\n

我正在严格遵循引导文档。链接: https: //getbootstrap.com/docs/5.0/getting-started/parcel/

\n

项目使用的包

\n
    \n
  • 包裹捆绑器,

    \n
  • \n
  • 波普尔和

    \n
  • \n
  • 引导程序

    \n
  • \n
\n

使用简单的 HTML 重新创建问题

\n

索引.html

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

索引.js

\n
import * as bootstrap from \'bootstrap\';\nalert(\'JAVA is LOADED\');\nconsole.log(\'Java is loaded another example\');\n
Run Code Online (Sandbox Code Playgroud)\n

自定义.scss

\n
@import "../node_modules/bootstrap/scss/bootstrap";\n
Run Code Online (Sandbox Code Playgroud)\n

包.json

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

错误信息

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

互联网上的其他帖子建议将**"main":**值替换为"../dist/index.js,",但它也不起作用。\n当我尝试消除整行时"main":,构建了 web 应用程序,但没有加载 java。\n如果我这样做npm run dev,web 应用程序将执行 javascript (我在开发模式下维护了“main”:“index.js”),我可以在控制台中看到警报消息和日志消息,但在构建应用程序时它不起作用。\n当我在开发我的Web应用程序时走得太远包裹,我对此时能做什么完全茫然。

\n

我将衷心感谢您的帮助!

\n

小智 14

从 package.json 中删除 main 属性


fir*_*rst 10

这是因为您的应用程序中有 2 个用于生产(构建)的入口点

  1. "main": "index.js",
  2. "build": "parcel build --public-url ./ ./src/index.html --dist-dir build"

在大多数情况下,此错误几乎是不可避免的,因为这些只是默认设置,这不是任何人的错。

我能够从官方文档链接解决该问题。要解决该错误,您可以将其替换"main": "index.js",

"source": "src/index.html",
Run Code Online (Sandbox Code Playgroud)

相应地,您还可以减少"start"(或开发)和"build"脚本。请参阅链接。


小智 0

你的 package.json 说

主要=“index.js”

但您的应用程序的入口点似乎是index.html。

所以你需要改变

main="index.html" (可以工作,但不推荐)

注意:上面会在根目录下构建,所以推荐的方式是

main="dist/index.html"(推荐)

您可以根据需要或您的意愿更改构建目标目录名称,而不是 dist。但生态系统中发现的大多数软件包按照惯例都使用 dist