Usage with Webpack & Babel, for supporting IE11 / not ES6 browsers? about yall.js

[malchata]

Would you be willing to post your webpack and babel configs, @gremo? I've had no issues in projects I've slotted yall.js into, but I can also have some tunnel vision around why things don't work for other people. Bundlers are hard.

[gremo]

Thanks, sure. My .babelrc is quite simple:

{
  "presets": [
    "@babel/preset-env"
  ]
}

Webpack webpack.config.base.js (just a portion of the relevant):

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  stats: 'minimal',
  output: {
    filename: '[name]-[contenthash].js',
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      meta: {
        'viewport': 'width=device-width, initial-scale=1, shrink-to-fit=no'
      },
      template: './src/index.html',
    })
  ],
};

Entrypoint index.js:

import 'core-js/stable';
import 'regenerator-runtime/runtime';
import yall from 'yall-js';

document.addEventListener('DOMContentLoaded', yall);

[rkumorek]

Hey,

Everytime I've used yall.js with webpack I used this configuration for babel.

{
    test: /\.m?js$/,
    use: ["babel-loader"],
    include: path => {
        // Include src directory.
        if (/src/.test(path)) return true;

        // Include files that ends with `.mjs` extension.
        if (path.endsWith(".mjs")) return true;

        return false;
    }
}

Instead of straight excluding node_modules, we include all files from our src directory + .mjs files from either src or node_modules. This ensures babel is transpiling libraries like yall.js to es5.

I find include way more friendly than exclude. It seems to be one of best practices recommended by webpack team, see documentation.

 // these are matching conditions, each accepting a regular expression or string
 // test and include have the same behavior, both must be matched
 // exclude must not be matched (takes preferrence over test and include)
 // Best practices:
 // - Use RegExp only in test and for filename matching
 // - Use arrays of absolute paths in include and exclude
 // - Try to avoid exclude and prefer include

[gremo]

@rkumorek thanks for the explanation.

However, I'm just start learning Webpack, module loaders and so on... and there is something I can't understand. How can I know, without actually digging into the library code (in this case, the .mjs file) and looking for const or other keywords, if I need to transpile it or it's main or module file is "ready" for ES5 browsers (that is, adding it to the include)?

[rkumorek]

@gremo

It is a great question and I am not sure if I can answer it correctly but I try my best.
I'd like to apologise if anything is unclear, english is not my first language and I am not an expert in this matter. 🙈

Almost always you can find informations in library/package README if it does support ES5 or if it has to be transpiled.

Another thing to look at is presence of .mjs files. They are using ES6 syntax or newer therefore if library you use has this type of files it will most likely need to be transpiled to ES5 (example: idlize).

Yall.js supports IE11 and other ES5 browsers but we still might have issue with it when bundled with webpack.
When resolving imports webpack looks inside package.json for "main fields" with certain order. In case of yall.js it will find and load "./src/yall.mjs" which is a .mjs file, which we know is using ES6 (or newer) syntax.
This is why we do include all .mjs files for babel to transpile.
Include also gives us easier way to add more files for babel to transpile. If there is a .js file that is written in ES6 we can easily add new check if (/foo.js/.test(path)) return true and it will be transpiled by babel.

I really hope that my answer helps even a little. If anything is still unclear (or more 🙈) I hope someone with more knowlegde can provide more accurate answer.

[malchata]

For reference, here's the babel-loader part of my webpack config for my personal website. Note the exclude line, which excludes node_modules, but not package folders for yall-js, quicklink and dnstradamus:

module: {
  rules: [
    {
      test: /\.m?js$/i,
      exclude: /node_modules\/(?!(yall-js|quicklink|dnstradamus)\/)/i,
      use: {
        loader: "babel-loader",
        options: {
          envName: "client"
        }
      }
    },
    // ...
  ]
  // ..
}

Although the snippet that @rkumorek seems like it would work fine to me. I should give it a go, or consider using include instead of a convoluted regex pattern.

[gremo]

Thanks @rkumorek and @malchata. Very clean explanation. I agree that exclude is hardly understandable when a lot of modules has to be transpiled.

However, no luck with include:

{
    test: /\.m?js$/,
    exclude: /node_modules/,
    use: ['babel-loader'],
    include: [
        path.resolve(__dirname, 'node_modules/yall-js/src/yall.mjs'),
    ],
}

EDIT: neither the exclude: /node_modules\/(?!(yall-js)\/)/i works for me.

However, @malchata I think that dist/yall.min.js, as it seems ES5 compatible, should export something... in order to be used with Webpack without include or exclude.

[rkumorek]

@gremo
Even though in webpack docs include is an array like you did, I only ever used it as a function, seems more intuitive:

// outside webpack config so our source folder path is calculated once
const srcPath = path.resolve(__dirname, 'src');
...
{
    include: function (path) {
       // to include the module you have to return true
       // to exclude return false

        // Include our src directory - this is necessary 
        if (path.includes(srcPath) {
            return true;
        }

        // include yall-js
        if (path.includes('yall-js') {
            return true;
        }

        // exclude everything else
        return false;
    }
}

You can console.log(path) to see what is being passed there.

I'd also remove exclude: /node_modules/, as it won't be necessary when you will use include.