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

Question

Good day, guys!美好的一天，伙计们！ I looked online for a solution but couldn't find one, so I'm turning to you for assistance.我在网上寻找解决方案，但找不到解决方案，所以我向您寻求帮助。 Please bear with me as I describe the situation in full.当我完整描述情况时，请耐心等待。

I'm a beginner who's having trouble with parcel while developing a bootstrap web project.我是一个初学者，在开发引导网络项目时遇到了包裹问题。 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

I'm following the bootstrap documentation to a tee.我正在关注引导文档。 Link: https://getbootstrap.com/docs/5.0/getting-started/parcel/链接： https ://getbootstrap.com/docs/5.0/getting-started/parcel/

Packages used for the project :项目使用的包：

parcel-bundler,包裹打包机，
popperjs and popperjs 和
bootstrap引导程序

Re-created issue with simple HTML使用简单的 HTML 重新创建问题

index.html索引.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 index.js

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

custom.scss自定义.scss

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

package.json包.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"
  }
}

Error message :错误信息：

@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.

Other posts on the internet advised replacing **"main":** value with "../dist/index.js," but it didn't work either.互联网上的其他帖子建议用"../dist/index.js,"替换**"main":**值，但它也不起作用。 When I tried eliminating the full "main": line, the webapp was built, but no java was loaded.当我尝试消除完整的"main":行时，构建了 webapp，但没有加载 java。 If I do npm run dev , the webapp executes the javascript (I maintained "main": "index.js" in dev mode), and I can see the alert message and log message in the console, but it does not function while building the app.如果我执行npm run dev ，webapp 会执行 javascript（我在 dev 模式下维护“main”：“index.js”），我可以在控制台中看到警报消息和日志消息，但它在构建时不起作用应用程序。 When I went too far in developing my webapp in the parcel, I'm utterly blank about what can be done at this point.当我在包裹中开发我的 web 应用程序时走得太远，我对此时可以做什么完全一无所知。

I would really appreciate your help!我将衷心感谢您的帮助！

Answer 1

从 package.json 中删除 main 属性

Answer 2

This is because there are 2 entry points in your application for production(build)这是因为您的应用程序中有 2 个用于生产（构建）的入口点

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

This error is pretty much unavoidable in most cases because these are just default settings and its nobody's fault.在大多数情况下，这个错误几乎是不可避免的，因为这些只是默认设置，没有人的错。

I was able to solve the issue from official documentation link .我能够从官方文档链接中解决这个问题。 To solve the error you can replace your "main": "index.js", with要解决该错误，您可以将"main": "index.js",替换为

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

accordingly you can also reduce the "start" (or dev) and "build" scripts.因此，您还可以减少"start" （或开发）和"build"脚本。 See link.见链接。

Answer 3

Your package.json says你的 package.json 说

main = "index.js"主 = “index.js”

But it seems the entry point for your app is index.html.但您的应用程序的入口点似乎是 index.html。

So you need to change所以你需要改变

main="index.html" (will work but not recommended) main="index.html" （可以使用但不推荐）

Note: The above will build in the root directory, so the recommended way is注意：以上会在根目录下构建，所以推荐的方式是

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

You may change the name of your build target directory name as needed or as you wish instead of dist.您可以根据需要或您希望更改构建目标目录名称的名称，而不是 dist。 But most packages found in the ecosystem use dist by convention但是在生态系统中发现的大多数包都按照约定使用 dist

Answer 4

从 package.json 中删除 main 属性，如果您使用的是 VS Code，可能需要重新启动 VS Code。

"

Answer 5

You've probably worked this out by now but I was a bit confused by this myself when using parcel with an express app so here's an answer for anyone coming later.您现在可能已经解决了这个问题，但是当我将包裹与快递应用程序一起使用时，我自己对此有点困惑，所以这是以后任何人的答案。 The problem here is that the npm standard is clashing with parcel's opinionated expectations.这里的问题是 npm 标准与 parcel 的自以为是的期望相冲突。

main is required for npm modules . npm模块需要main 。 Fromthe npm docs :从npm 文档：

The main field is a module ID that is the primary entry point to your program.主要字段是模块 ID，它是程序的主要入口点。 That is, if your package is named foo, and a user installs it, and then does require("foo"), then your main module's exports object will be returned.也就是说，如果您的包名为 foo，并且用户安装了它，然后执行了 require("foo")，那么您的主模块的导出对象将被返回。

You are creating a standalone executable program, rather than a module, so main is irrelevant in this situation.您正在创建一个独立的可执行程序，而不是一个模块，因此main在这种情况下无关紧要。 Dick Larsson is therefore correct to say you should remove the main from your package.json , however that's only half an answer.因此，Dick Larsson 说您应该从package.json中删除main是正确的，但这只是答案的一半。 Ideally you should add a start value to your scripts:理想情况下，您应该为脚本添加一个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"
},

Now you can start your app with npm start after it is built, and parcel won't complain about the value in main .现在您可以在构建后使用npm start启动您的应用程序，并且 parcel 不会抱怨main中的值。

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

问题描述

4 个解决方案

解决方案1
6 2021-12-14 07:15:54

解决方案2
1 2022-05-18 05:43:40

解决方案3
0 2021-07-16 14:15:29

解决方案4
0 2022-01-20 12:33:31

解决方案5
0 2022-01-25 21:40:08

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

问题描述

4 个解决方案

解决方案1 6 2021-12-14 07:15:54

解决方案2 1 2022-05-18 05:43:40

解决方案3 0 2021-07-16 14:15:29

解决方案4 0 2022-01-20 12:33:31

解决方案5 0 2022-01-25 21:40:08

解决方案1
6 2021-12-14 07:15:54

解决方案2
1 2022-05-18 05:43:40

解决方案3
0 2021-07-16 14:15:29

解决方案4
0 2022-01-20 12:33:31

解决方案5
0 2022-01-25 21:40:08