Back to babel?

sage
1

Is there any way to go back to babel? Buble is great, but limiting on a couple projects.

1 Like
2

Sure. Installing babel and changing this line should get you there: https://github.com/roots/sage/blob/f3e794a09374d2f110742d15b9b975490fcddbee/resources/assets/build/webpack.config.js#L58

3

Thanks, I’ll try that out. For some reason I thought there was more to it then that.

Off topic: I know its been a couple year, but as someone who did understand gulp a lot better, what was the reason for switching to webpack in Sage? Sage doesn’t seem like the normal use case for webpack from what I can tell. In that it can’t really take advantage of also handling the markup output thus getting full optimizations, code splitting, etc. Maybe I’m missing how to properly use webpack in a sage/wordpress world, but it seems like both are just doing es6 -> es5 and sass -> css. It just seems like webpack adds a layer of complexity. What am I missing?

4

just doing es6 → es5 and sass → css

ignoring how reductive this is: you are missing the fact that first and foremost webpack is a module bundler. The web is way beyond “cat these 5 js files together in this order” like we used to do. Now not only is source code easier to follow because modules are explicitly imported and exported: you get to do cool stuff like code splitting Code Splitting | webpack

good reading: https://webpack.js.org/concepts/why-webpack
eventually webpack won’t be necessary and es modules will be native to the browser: https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/

5

Sorry, yes, it is super simple and reductive. My point is, even when I was using Sage 8, I was using es6, imports, exports, etc. Gulp has long supported both buble and babel.

But my comment wasn’t to bash webpack, its a genuine question on if I’m missing out on functionality when it comes to Sage/wordpress. Looking at the main.js bundled with Sage 9, there is nothing there I wasn’t doing with Gulp already. In fact, although I like the Routing component bundled with Sage, wouldn’t that be a perfect scenario for basic code-splitting? Or at least a basic multiple entry points setup?

My biggest scenario where I’d like to use webpack, but not sure if I can is when using ACF flexible content. Some of my content blocks require js to work. I’d love to be able to code split that and only load that JS if the section is used on a given page. This is where webpack makes sense to me if it were a static html website, because all assets are being run through webpack, so it could detect the sections that are needed on that page and create a bundle specifically for that. Is there anybody doing anything like this with Sage?

I know this is not a webpack support form, but I believe webpack combined with Sage is a unique setup. Seems like the community could benefit a ton from webpack, but need more complex examples then what is shipped with Sage 9.

6

It could be, but note that code splitting isn’t necessarily a win if you’re not loading a ton of unused code, so it doesn’t necessarily make sense to provide that up front. But adding it later becomes really easy. Entrypoints are split by using import('my-module'), which returns a promise which resolves when the module has been loaded. You can do this for the case you’re discussing, but you have to write the glue code yourself (e.g. check if something is needed, load the required code, do thing).

7

@mAAdhaTTah Ok, that makes sense why not to provide it upfront. But maybe a commented out example on best way to move forward as a project grows? Sage was one of my first real-world uses of Webpack, maybe that’s not the case for others.

I’ll have to test it out and see how easy it is to do. My scenario is like this:

    const latestNews = document.querySelector('.carousel-news');

    if(latestNews){
      const latestNewsFlickity = new Flickity( latestNews, {
        cellAlign: 'center',
        contain: true,
        pageDots: false,
      });      
    }

With this, I’ve also got a import Flickty from 'flickity' at the top of my file, because that’s the only way I’ve known to do it. Are you saying I could import inside my if statement here? And then flickity would never load unless there is a .carousel-news element on the page? And if that does work, would it stop the execution of Flickty or the download of that file?

Again, this is so off topic and for sure not a webpack support forum but thanks for chiming in anyway!

8

You’re on the right track. The idea is this:

    const latestNews = document.querySelector('.carousel-news');

    if(latestNews){
      const { default: Flickity } = await import('flickity');
      const latestNewsFlickity = new Flickity( latestNews, {
        cellAlign: 'center',
        contain: true,
        pageDots: false,
      });      
    }

Couple of things going on here:

  1. The function this is in would need to be async, in order to use await. import() returns a Promise, so you could use .then() as well if you’d prefer.
  2. The const { default: Flickty } bit is destructuring, if you’re not familiar with that.
  3. The reason I have the {default: Flickity} is because I’m not sure how CommonJS interop works with import(). You may have to console.log and play w/ it to figure out how to get what you’re looking for there.
9

Thanks! I’ll try this out. This code currently is inside of the stock Sage common.js route, so I don’t think that is setup to be async right now. Maybe I’ll create a component loader that that loads all these modules conditionally and use an async function from common.js.

Thanks for pointing me in the right direction here!

10

Hi, could you explain more? What commands launch to install Babel and in particular what/how lines need changing to implement it into Sage 9.0.9?

11

You can try out the webpack5-babel branch:

It uses webpack5 because with webpack3 there are always some strange errors.