I am watching this video to learn about parcel.
In this video he uses, what I understand now, parcel v1.
When I tried to install it (package: parcel-bundler) I got huge list of warnings and errors, from which I have learned that parcel v2 is now available, and better to use, under the package name: parcel so I:
npm uninstall parcel-bundler
and then
npm install --save-dev -g parcel.
building the project
installed parcel number: parcel --version 2.4.0
My sample project is simple: index.html with script and css files.
I expected the output html to include the code within the js,css files.
But the result was that it looks like it only renamed the js,css files, and didn't inject the code to the html file.
My question is, am I right to expect the dist/index.html include the js and css code, as in the video (which is using parcel-bundler), or parcel works differently?
<style>
@import "./style.scss";
</style>
<script type="module">
import value from "./other.ts";
console.log(value);
</script>
但是，正如文档所建议的...
注意：很少使用此，因为大的内联脚本/样式可能不利于（感知的）负载速度。
If I understand your question correctly, you are asking why the output dist/index.html that parcel builds merely references the output css file (<link rel="stylesheet" href="/index.ef1c6e2b.css">) and the output js file (<script src="/index.a61d77df.js"></script>), rather than inlining the contents. Is that right? I'm assuming the app will run correctly, but please post additional details if that's not the case.
So, assuming I got that right, this is expected behavior probably desirable for most use cases.
If for some reason your use case requires that you have inline scripts and styles, you could do it like this (see docs):
<style>
@import "./style.scss";
</style>
<script type="module">
import value from "./other.ts";
console.log(value);
</script>
But, as the docs recommend...
Note: Use this sparingly, as big inline scripts/styles can be detrimental to the (perceived) load speed.
发布评论
评论（2）
如果我正确理解您的问题，您正在问为什么包裹构建的输出
dist/index.html仅仅是参考输出CSS文件（＆lt; link link; link rel = rel = rel = “ stylesheet” href =“/index.ef1c6e2b.css”＆gt;）和输出js file（＆lt; script src =“/index.a61d77df.js” /code>），而不是嵌入内容。那对吗？我假设该应用程序可以正确运行，但是如果不是这样，请发布其他详细信息。因此，假设我做到了，那么对于大多数用例，这可能是期望的。
如果出于某种原因，您的用例要求您具有内联脚本和样式，则可以这样做（请参阅 docs ）：
但是，正如文档所建议的...
If I understand your question correctly, you are asking why the output
dist/index.htmlthat parcel builds merely references the output css file (<link rel="stylesheet" href="/index.ef1c6e2b.css">) and the output js file (<script src="/index.a61d77df.js"></script>), rather than inlining the contents. Is that right? I'm assuming the app will run correctly, but please post additional details if that's not the case.So, assuming I got that right, this is expected behavior probably desirable for most use cases.
If for some reason your use case requires that you have inline scripts and styles, you could do it like this (see docs):
But, as the docs recommend...
您尚未将脚本命令添加到package.json文件中。在脚本中删除测试，然后添加 - public-url ./到您的build命令。
像这样;
You haven't added script commands to your package.json file. Delete test in scripts and add --public-url ./ to your build command.
Like this;