But I really do need to transpile node_modules

I do understand that this is not best practice.

• It could break code that someone else has written
• It slows down transpilation

However as I’m writing code that has to run in IE11, please don’t ask why, and be served from SharePoint, again really don’t ask, I needed to use a third party library, in this case easy-template-x, to provide functionality.

Unfortunately this library uses a few things IE11 doesn’t support:

• extending classes
• templated strings

So the ‘easy’ way to get this working would be to use babel to transpile the ES2015 code to ES5 code so IE11 can run it.

All worked beautifully for files in my src folder, they transpiled to ES5, but the files in the node_modules folder were left untouched.

It turns out that there are multiple ways of configuring babel.

• .babelrc, excludes node_modules no matter what the calling configuration is
• babel.config.json, respects the calling configuration.

However what caught me off guard was that the include, exclude configuration is not in the babel configuration but in the calling configuration, in my case webpack. So the fix needs to be to set up webpack to include the node_modules folders but use the correct babel configuration format, i.e. babel.config.json.

For reference here’s the relevant modules section from my webpack configuration:

module: {
  rules: [
    {
      test: /\.(js|ts)$/,
      include: [
        path.resolve("src"),
        path.resolve("node_modules", "easy-template-x"),
        path.resolve("node_modules", "jszip"),
        path.resolve("node_modules", "xmldom"),
      ],
      exclude: [],
      loader: "babel-loader",
    },
  ],
},

Thanks to

• Gina Holden, for working out the use of babel.config.json as opposed to .babelrc
• Paul Matthews, for helping with the webpack.config.js to cater for SharePoint ‘oddities’
• alonrbar, for writing easy-template-x