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
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\nRun Code Online (Sandbox Code Playgroud)\n我正在严格遵循引导文档。链接: https: //getbootstrap.com/docs/5.0/getting-started/parcel/
\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>\nRun Code Online (Sandbox Code Playgroud)\n索引.js
\nimport * as bootstrap from \'bootstrap\';\nalert(\'JAVA is LOADED\');\nconsole.log(\'Java is loaded another example\');\nRun Code Online (Sandbox Code Playgroud)\n自定义.scss
\n@import "../node_modules/bootstrap/scss/bootstrap";\nRun 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}\nRun 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.\nRun 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应用程序时走得太远包裹,我对此时能做什么完全茫然。
我将衷心感谢您的帮助!
\nfir*_*rst 10
这是因为您的应用程序中有 2 个用于生产(构建)的入口点
"main": "index.js","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