Using Parceljs, How to prevent jquery and bootstrap minimization on web extension packaging

Question

I am using the @parcel/transformer-webextension transformer and having good success with it. I have one issue I'm trying to resolve. Firefox is not happy.

I reference jquery and bootstrap from the index page of my pop-up and options pages. I reference them both from npm, e.g.:

Parceljs is processing them into minimized (again) files with generated names. It all works properly in other browsers, but Firefox does not like this, because

1. It doesn't realize this is jquery because the generated file's hash doesn't match; and
2. It uses innerHtml to set values in the DOM.

If I can pass through the minimized jquery file intact, it will accept it because it will apply the hash correctly. See:

JQuery not supported anymore?

How can I configure Parceljs to leave the jquery.min.js file intact, deliver it to dist directory, and update the reference in HTML?

Thanks in advance - jlo

Answer 1

There are two ways to solve this problem.

1. You can have your <script> tags import from a cdn, like this:

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.8/jquery.min.js"></script>
   

   Parcel will leave anything that begins with "http(s)" untouched (see documentation). You'll have to set up your manifest.json so that the browser will permit an external resource to be loaded. I'm not an expert here, but I think this is a solvable problem (see, for example this question).

2. You can set up a named pipeline that bypasses js transformer and optimizers for assets in that pipeline. For example, your .parcelrc file might look like this:

   {
     "extends": "@parcel/config-default",
     "transformers": {
       "manifest.json": ["@parcel/transformer-webextension"],
       "raw:*": ["@parcel/transformer-raw"]
     },
     "optimizers": {
       "raw:*": []
     },
     "packagers": {
       "manifest.json": "@parcel/packager-raw-url",
       "raw:*": "@parcel/packager-raw"
     }
   }
   
   

   Then, you could import jquery and bootstrap like this:

   <script src="raw:../../node_modules/jquery/dist/jquery.min.js"></script>
   <script src="raw:../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
   

   Note that the script imports do not have type: "module" set. In my tests, this is important, because if parcel sees type="module", it will try to scope-hoist, leading to errors. I think this is also correct from the browser's perspective since these are not module bundles.

   In my tests, the above configuration will give you two files (bootstrap.bundle.min.[hash].js and jquery.min.[hash].js in your dist directory. The files have identical contents with the corresponding ones in node_modules. I don't think Firefox will complain about parcel adds a [hash] to their name, as long as the contents are the same (see here).