parcel 没有向结果 html 注入 js 和 css 代码

Question

我是 Parcel 的新手，也是 web 开发的新手。

我正在观看 this video 以了解包裹。在这段视频中，他使用了我现在理解的 parcel v1。当我尝试安装它时 (package: parcel-bundler)，我收到了大量的警告和错误列表，从中我了解到 parcel v2 现在可用，并且更好用，在 package name: parcel 下所以我：

npm uninstall parcel-bundler

然后

npm install --save-dev -g parcel.

构建项目

已安装包裹编号：parcel --version 2.4.0

我的示例项目很简单： index.html 脚本和 css 个文件。

<script src="js/main.js"></script>

<link rel="stylesheet" href="scss/main.scss">

使用

构建项目后

parcel build client/index.html --no-optimize --no-cache

我希望输出 html 包含 js css 文件中的代码。但是结果是貌似只重命名了js，css文件，并没有把代码注入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</title>
    <link rel="stylesheet" href="/index.ef1c6e2b.css">
</head>
<body>
    <h1 id="idh1">main header</h1>
    <script src="/index.a61d77df.js"></script>
</body>
</html>

package.json 是

{
  "name": "webappsetup",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/google-apps-script": "^1.0.45",
    "parcel-plugin-inliner": "^1.0.16"
  },
  "devDependencies": {
    "@parcel/transformer-sass": "^2.4.0"
  }
}

我的问题是，我期望 dist/index.html 包含 js 和 css 代码是否正确，如视频（使用 parcel-bundler )，或者 parcel 的工作方式不同？

Answer 1

您还没有在 package.json 文件中添加脚本命令。删除脚本中的测试并将 --public-url ./ 添加到您的构建命令中。像这样；

"scripts": {
    "dev": "parcel src/*.html --open",
    "build": "parcel build client/index.html --no-optimize --no-cache --public-url ./"
  },

Answer 2

如果我对你的问题的理解正确，你是在问为什么 parcel 构建的输出 dist/index.html 仅仅 references 输出 css 文件（<link rel="stylesheet" href="/index.ef1c6e2b.css">) 和输出 js 文件 (<script src="/index.a61d77df.js"></script>)，而不是内联内容。那正确吗？我假设该应用运行正确，但如果不是这样，请 post 提供更多详细信息。

因此，假设我没看错，这是大多数用例可能需要的预期行为。

如果出于某种原因您的用例需要内联脚本和样式，您可以这样做（参见 docs）：

<style>
   @import "./style.scss";
 </style>
 <script type="module">
   import value from "./other.ts";
   console.log(value);
 </script>

但是，正如文档所建议的那样...

Note: Use this sparingly, as big inline scripts/styles can be detrimental to the (perceived) load speed.

parcel 没有向结果 html 注入 js 和 css 代码

parcel did not inject js and css code to the resulted html

html

web-applications

build

npm

parceljs