使用 parcel-bundler 构建 webapp 时遇到问题（编译后不加载 Java）答案

【问题标题】：Trouble building webapp with parcel-bundler (Not loading Java after compilation)使用 parcel-bundler 构建 webapp 时遇到问题（编译后不加载 Java）
【发布时间】：2021-09-09 17:59:55
【问题描述】：

大家好！我在网上寻找解决方案，但找不到解决方案，所以我向您寻求帮助。请耐心等待我完整描述情况。

我是一名初学者，在开发引导网络项目时遇到了包裹问题。 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": 行时，构建了webapp，但没有加载java。如果我执行npm run dev，webapp 会执行 javascript（我在 dev 模式下维护“main”：“index.js”），我可以在控制台中看到警报消息和日志消息，但它在构建时不起作用应用程序。当我在包裹中开发我的 web 应用程序时太过分了，我完全不知道此时可以做什么。

非常感谢您的帮助！

【问题讨论】：

标签： javascript html bootstrap-5 parceljs popperjs

【解决方案1】：

从 package.json 中移除 main 属性

【讨论】：

【解决方案2】：

你的 package.json 说

main = "index.js"

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

所以你需要改变

main="index.html"（可行但不推荐）

注意：以上会在根目录下构建，所以推荐的方式是

main="dist/index.html"（推荐）

您可以根据需要或您希望更改构建目标目录的名称，而不是 dist。但是在生态系统中发现的大多数包都按约定使用 dist

【讨论】：