1

美好的一天，伙计们！我在网上寻找解决方案，但找不到解决方案，所以我向您寻求帮助。当我完整描述情况时，请耐心等待。

我是一个初学者，在开发引导网络项目时遇到了包裹问题。 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 重新创建问题

索引.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');

自定义.scss

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

包.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":**value替换为，"../dist/index.js,"但它也不起作用。当我尝试消除整"main":行时，构建了 webapp，但没有加载 java。如果我这样做npm run dev，webapp 会执行 javascript（我在 dev 模式下维护“main”：“index.js”），我可以在控制台中看到警报消息和日志消息，但它在构建应用程序时不起作用。当我在包裹中开发我的 web 应用程序时走得太远，我对此时可以做什么完全一无所知。

我将衷心感谢您的帮助！

4

3 回答 3

2

从 package.json 中删除 main 属性

于 2021-12-14T07:15:54.673 回答
0

你的 package.json 说

主 = “index.js”

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

所以你需要改变

main="index.html" （可以使用但不推荐）

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

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

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

于 2021-07-16T14:15:29.123 回答
0

您现在可能已经解决了这个问题，但是当我将包裹与快递应用程序一起使用时，我自己对此有点困惑，所以这是以后任何人的答案。这里的问题是 npm 标准与 parcel 的自以为是的期望相冲突。

mainnpm模块需要。从npm 文档：

主要字段是模块 ID，它是程序的主要入口点。也就是说，如果您的包名为 foo，并且用户安装了它，然后执行了 require("foo")，那么您的主模块的导出对象将被返回。

您正在创建一个独立的可执行程序，而不是一个模块，因此main在这种情况下无关紧要。因此，Dick Larsson 说您应该main从中删除 是正确的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在构建应用程序后启动您的应用程序，并且 parcel 不会抱怨main.

于 2022-01-25T21:40:08.170 回答