Search code examples
htmlnpmweb-applicationsbuildparceljs

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

I am new to Parcel and to web dev in general.

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.

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

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

After building the project with

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

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.

<!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>

the package.json is

{
  "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"
  }
}

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?

Solution

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