Webpack setup example about conditioner

[rikschennink]

@daviddelusenet Will see if I can set something up this week.

[rikschennink]

Hi @daviddelusenet, I'll see if I can setup an example somewhere in the coming week.

[daviddelusenet]

@rikschennink Thanks for your help! I got it working for now, but that is because my old colleague Pascal Strijbos made a custom version of the conditioner.js. If I use that version, my setup just works. If I use the latest version you made, I get the following error:

Uncaught Error: Cannot find module 'views/ImageUpload'.

This is how my folder structure looks:

• javascript
  • conditioner
    • conditioner.js
    • utils
    • monitors
  • views
    • ImageUpload.js
  • app.js

In app.js I've the following code:

'use strict';

document.addEventListener('DOMContentLoaded', function () {

  conditioner.init();

}, false);

Then I have a Image.twig file where you can find the following line:

<div class="form-component" data-module="views/ImageUpload" data-options='{"url": "http://httpbin.org/post"}'>

And last but not least, this is the code in the ImageUpload.js file:

'use strict';

module.exports = function (element, options) {

  this.el = element;
  this.options = options;
  this.init();

};

module.exports.prototype = {

  init: function () {}

  // More functions here

};

Am I right assuming the data-module path should be a relative path from app.js? And maybe you see the mistake(s) I'm making based on my code.. Thanks in advance.

[rikschennink]

In my experience this is correct. app.js is the starting point and other modules are loaded relative to the location of that file. But that's based on my experience with SystemJS and RequireJS so I'm not sure that holds true for WebPack.

[daviddelusenet]

I think the problem has to do with the minification of my app.js. App.js gets compiled to app.min.js with webpack and placed in /static/js/app.min.js.

Including it like this require('./views/ImageUpload') and compiling with webpack adds the code to app.min.js but I still get the same error as before.

When I try to point the the module like this

  Conditioner.init({
    'modules':{
      './views/ImageUpload':'ImageUpload'
    }
  });

I get the following error: conditioner.js:2410 Uncaught ReferenceError: requirejs is not defined.

How do I require my ImageUpload.js in this app.min.js so that Conditioner can find it?

[rikschennink]

Sorry for the delay in my responses, I'm super busy at the moment, situation should improve in the coming weeks.

I think you're on the right track with the modules bit (adding shortcuts). But I would try to define these in WebPack. By default conditioner loads modules using RequireJS so when passing these modules settings it passes the configuration along to requirejs.config().

It's possible to change the interaction with the module loader using the loader property in the setOptions (or init) method object. http://conditionerjs.com/docs/#conditioner-setoptions

[daviddelusenet]

@rikschennink thanks for your response. I figured out why Conditioner doesn't work for me: my modules are written using the CommonJS syntax!

Are there any plans in the near future for adding CommonJS support?

[rikschennink]

To be loaded I in this case think they need to be converted to AMD based modules. Conditioner uses the load() method and passes the value of the data-module attribute (by default it then checks if RequireJS is available to load the module using the module path).

So you can either expose the modules on the global scope or use the attribute value in some other way to get to your modules. They need to be available somehow.

[daviddelusenet]

@rikschennink I've converted my modules to AMD based modules but still can't get it working. There's no example to find anywhere how to use requirejs in combination with webpack. Also there's no example of how to include these AMD modules to webpack that conditioner can find them.

Can you please make an example which uses webpack and conditioner?

[daviddelusenet]

Cool, thanks in advance!

[rikschennink]

Would like to support anything but so I'm looking into setting things up differently but not sure yet how.

Compiling the modules to AMD should work though.

On 19 Oct 2016, 13:29 +0200, David de Lusenet [email protected], wrote:

@rikschennink (https://github.com/rikschennink) thanks for your response. I figured out why Conditioner doesn't work for me: my modules are written using the CommonJS syntax!

Are there any plans in the near future for adding CommonJS support?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub (#98 (comment)), or mute the thread (https://github.com/notifications/unsubscribe-auth/ABFIH0tX8YcPqp7zqEhO9YHT21tzVzDGks5q1f8ugaJpZM4KQ_UI).

[rikschennink]

@daviddelusenet I've setup this repo, I'm no Webpack expert but it seems to function correctly.
https://github.com/rikschennink/conditioner-boilerplate-webpack

[R4YM3]

I also love to see webpack support, i've checked out your boilerplate and played around with it. It works when loading modules on the fly. Only i'm getting errors when using a media condition. I've opened a ticket in your conditioner-boilerplate-webpack repo -> rikschennink/conditioner-boilerplate-webpack#1

[rikschennink]

I've updated the WebPack example repo to fix the monitor loading errors.

[rebelrebel82]

Hi Rik,

I just checked out your boilerplate example. It works with webpack version 1.13.3 but fails with webpack 2.4.1. Could you please update the example so it works with the latest webpack release?

Thanks!

[rikschennink]

Will look into it as soon as possible.

[rikschennink]

Conditioner 2 webpack example can be found here:
https://github.com/rikschennink/conditioner-boilerplate-webpack

Note that the API has completely changed so it's not compatible with Conditioner v1.