Lazysizes: What is the correct require() pattern for the plugins ?

[lunelson]

I notice there's a -umd version of the script; however I can't find any reference to the exact pattern for bundling that script with plugins, using require().

The following typical <script> order also works as an order for concatenation;

<script src="../plugins/parent-fit/ls.parent-fit.min.js"></script>
<script src="../plugins/object-fit/ls.object-fit.min.js"></script>
<script src="../plugins/respimg/ls.respimg.min.js"></script>
<script src="../lazysizes.min.js" async=""></script>

but what is it right for require()? Do I need to make a global assignment, and if so, how to bring in the plugins correctly?

// e.g. browserify
global.lazysizes = require("../lazysizes-umd.min.js");
require("../plugins/parent-fit/ls.parent-fit.min.js");
require("../plugins/object-fit/ls.object-fit.min.js");
require("../plugins/respimg/ls.respimg.min.js");

[aFarkas]

You can do this how you want. You also don't need a global assignment.

[lunelson]

So you mean, the pattern I listed above, without the global assignment, is correct? i.e. that the lazySizes global variable is created automatically, and the plugins are added correctly, if I do as follows? If so, I will make a PR on the documentation to indicate this.

// e.g. browserify
require("../lazysizes-umd.min.js");
require("../plugins/parent-fit/ls.parent-fit.min.js");
require("../plugins/object-fit/ls.object-fit.min.js");
require("../plugins/respimg/ls.respimg.min.js");

[aFarkas]

Yes, but if you use browserify or webpack you can reference the module itself.

require('lazysizes');
require('lazysizes/plugins/optimumx/ls.optimumx');
require('lazysizes/plugins/parent-fit/ls.parent-fit');

[rdunk]

I'm trying to use the unveilhooks plugin with webpack using the following.

require('lazysizes');
require('lazysizes/plugins/unveilhooks/ls.unveilhooks');

But keep getting this error:

WARNING in ./~/lazysizes/plugins/unveilhooks/ls.unveilhooks.js
Critical dependencies:
73:6-20 the request of a dependency is an expression
@ ./~/lazysizes/plugins/unveilhooks/ls.unveilhooks.js 73:6-20

Am I missing something?

[AurelioDeRosa]

I get this error as well with ls.unveilhooks.js. This should be a related issue: https://github.com/webpack/webpack-dev-server/issues/212.

[hilja]

I also get the warning from webpack when including ls.unveilhooks.js:

WARNING in ./~/lazysizes/plugins/unveilhooks/ls.unveilhooks.js
Critical dependencies:
73:6-20 the request of a dependency is an expression
@ ./~/lazysizes/plugins/unveilhooks/ls.unveilhooks.js 73:6-20

It goes away if I remove this require call:

// handle data-require
tmp = e.target.getAttribute('data-require');
if(tmp){
    if(window.require){
       // This causes the warning 
       require([tmp]);
    }
}

[aFarkas]

@hilja
Thanks for the information.

Do you guys know wether and how it is possible to use requirejs in a browserify/webpack enviroment?

[xsynaptic]

I just struck upon the same issue with both unveilhooks/include. The problem is that Webpack requires statically analyzable require calls to be able to build bundles in advance. This is mentioned in the docs (along with a workaround that appears too clunky at first glance for me to want to mess with). Not sure if a fix is feasible after toying around with it for about half an hour.

[aFarkas]

I think I will remove the require calls in both scripts. And add a default loadScript hook, that can be configured by developers to use require if needed.

[aFarkas]

I just removed the inline require calls. And released a new version "3.0.0-rc1". Please test if you have time.