Building a compressed version of js files - require causes error

[sorenmalling]

In a project, we are optimizing the build process of the final JS assets, by taking all the libraries (Added to the Neos Site package as files) and will create a optimized build file. Today each file is included with a individual <script> tag.

This means, that a folder named Scripts have lines like this

import './Scripts/jquery';
import './Scripts/jquery-ui';
import './Scripts/jquery.easing';
import './Scripts/jquery.hoverDelay';
import './Scripts/jquery.nav';
import './Scripts/jquery.ui.map';
import './Scripts/popper.min';
import './Scripts/bootstrap.min';
import './Scripts/bootstrap-select.min';

As I run yarn watch I get errors about relative require parts

Waiting for file changes...
 > DistributionPackages/Vendor.Site/Resources/Private/Assets/Scripts/jquery.easing.js:15:28: error: Could not resolve "jquery" (use "./jquery" to reference the file "DistributionPackages/Vendor.Site/Resources/Private/Assets/Scripts/jquery.js")
    15 │     exports = factory(require('jquery'));
       ╵                               ~~~~~~~~

and a detailed description like this

    {
      detail: undefined,
      location: [Object],
      notes: [],
      pluginName: '',
      text: 'Could not resolve "jquery" (use "./jquery" to reference the file "DistributionPackages/Vendor.Site/Resources/Private/Assets/Scripts/jquery.js")'
    }

Can this be completed with a pipeline setting about relative paths and/or resolving of required modules?

[jonnitto]

Do you use the module version of jquery? I think it would be better if you would import the files from node_modules, so that the bundler can pick the correct version. It looks to me if you are using the AMD version, and if you are looking into the readme https://www.npmjs.com/package/jquery, you will see that it is recommended to import jQuery like that: import $ from "jquery";

[sorenmalling]

No bundles and no package.json of these files - this is a "legacy part", where the libraries has been downloaded and added to the package, and afterwards included with it's own <script> tag for each library. This works today, but I will love to create a compressed bundle file, to lower http requests and complete size.

Will you say that it's not possible to come across this error?

[jonnitto]

It would be possible, but you have to remove the AMD part of the file.