Sage 9 Request for babel added to Webpack

sage
1

I’ve been updating Webpack to work with Typescript on my local machine here with the newest version of Sage 9 and I noticed I needed to add Babel to transform Es6 to Es5. I was thinking it might be best to just add it in by default…

Anyone else run into this issue when using Es6 or typescript?

1 Like
2

We removed Babel in favor of Bublé. Obviously Babel can do more, but Bublé itself is more performant and its output is much more readable. (I know nothing about Bublé vs Babel output performance, to be clear. The difference is probably negligible.)

3

Ok I see that makes sense. I guess my question now is when I changed webpack to look at a TS file instead of a JS file, it didn’t transform it to es5? I had to add another loader to target the ts files.
Should I have done this another way? I’m new to webpack so still learning, but just happy I got it working :slight_smile:

Here is my new jsLoader

const jsLoader = {
      test: /\.ts$/,
      exclude: [/(node_modules|bower_components)(?![/|\\](bootstrap|foundation-sites))/],
      use: [{
    loader: 'buble',
    options: { objectAssign: 'Object.assign' },
      }],
    };

and then I added this into the rules array:

{ test: /\.ts?$/, loaders: ['babel', 'ts-loader'] },

4

Yes, that’s normal, but the jsLoader should still only be looking at /\.js$/, not .ts because, as far as I know, buble can’t read TypeScript.

I’ve never messed with TypeScript, but I think it should look something like this:

const jsLoader = {
  test: /\.js$/,
  exclude: [/(node_modules|bower_components)(?![/|\\](bootstrap|foundation-sites))/],
  use: [{
    loader: 'buble',
    options: { objectAssign: 'Object.assign' },
  }],
};
const tsLoader = {
  test: /\.ts$/,
  use: ['babel', 'ts-loader'],
};

if (config.enabled.watcher) {
  jsLoader.use.unshift('monkey-hot?sourceType=module');
  tsLoader.use.unshift('monkey-hot?sourceType=module'); // I'm not entirely sure if this will work, but give it a try
}

// then on webpackConfig ...

  module: {
    rules: [
      jsLoader,
      tsLoader,
5

If I get some time later, I’ll test it all out myself

6

Ah well that would make sense ha. I guess the proper way would be to implement a separate TS loader. Thx for looking at that :slight_smile:

7

Foundation 6 requires Babel:

https://foundation.zurb.com/sites/docs/javascript.html#babel-required

I only mention this because we’ve just burned 12 hrs or so troubleshooting why Foundation 6 responsive menu don’t render correctly after yarn run start but do render after yarn build. It took is a while figure out the build was working correctly and then we found we weren’t the first Sage 9 users to encounter this.

I’m unclear if Foundation 6 can use Bublé.