question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Transpiling to ES5

See original GitHub issue

Hi,

It would be nice if this library would be transpiled to ES5 (in a folder like /dist) using something like babel before getting pushed to git/NPM.
It’s not standard to require the user to transpile stuff installed to node_modules, and without transpiling, it could raise some errors when trying to use this code with specific webpack/grunt/gulp plugins.

My use-case I’m using this together with vue-electron and webpack. When webpack is building the app for production use, it uglifies everything inside node_modules. Sadly, it doesn’t have support for ES6, so your library will raise an error and the build fails. I could add exclude the library, but I guess it would be better to fix it at the root.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:19 (5 by maintainers)

github_iconTop GitHub Comments

2reactions
McPocommented, Nov 7, 2016

try

Option 1:

{
      test: [/node_modules[\\\/](?:electron-settings|key-path-helpers)[\\\/]lib[\\\/](?:.+).js/],
      loaders: ['babel-loader']
},

Option 2:

If that fails to work, change electron-settings in your package.json to

"electron-settings": "McPo/electron-settings#release-dist"

This is my fork which includes electron-settings pre-transpiled and a patch to one of its dependencies. (It also has encryption, although if you don’t set a key, it won’t affect you). Its also a bit older than master (I think its missing the ability to set the Settings filename path, which is what the latest electron-settings allows you to do).

More info on the key-path-helpers issue here https://github.com/atom/key-path-helpers/pull/2#pullrequestreview-7343221

Option 3

Use the latest electron-settings but my patched key-path-helpers. (In package.json)

"electron-settings": "2.2.2",
"key-path-helpers": "McPo/key-path-helpers#splitKeyPath-fix"
2reactions
McPocommented, Nov 6, 2016

In the end I came across a few other projects that hadn’t been transpiled before publishing, and their maintainers were less than helpful (Were adamant they shouldn’t have to transpile before publishing, despite it being recommended by npm)

So I needn’t to come up with a solution to sort all the projects at once.

Within webpack.base.config you’ll notice that Babel is stated to ignore this node_modules folder. What you want is to add another loader which specifies specific projects within node_modules that also need transpiled.

Something like this.

{
                test: [/node_modules[\\\/](?:boom|hawk|hoek|cryptiles|sntp|enfs(?:.+))[\\\/]lib[\\\/](?:.+).js/],
                loaders: ['babel-loader']
            },
            {
                test: /\.jsx?$/,
                loaders: ['babel-loader'],
                exclude: /node_modules/
            },

You’ll notice in the top loader a list of projects separated by |, you’ll need to modify the list to match your own project. Start by removing all other name and adding electron-settings to the list.

On mobile, so if nothing’s clear let me know and I’ll clarify when I’m near my laptop again.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to Convert ES6 into ES5 using Babel | by Sunny Beatteay
Babel is a transpiler (translates code in one language to another computer language at the same abstraction level) that can turn our ES6 ......
Read more >
BabelJS - Transpile ES6 Modules to ES5 - Tutorialspoint
In this chapter, we will see how to transpile ES6 modules to ES5 using Babel. Modules. Consider a scenario where parts of JavaScript...
Read more >
Convert JavaScript ES6+ to ES5 using Babel - Code by Amir
Babel is an open-source Javascript library that is used to convert (or transpile) JavaScript ES6+ code to ES5 for browser compatibility.
Read more >
Transpiling ES6 modules to ES5 using Babel - DotNetCurry.com
We can use Babel directly or with a task manager like Gulp to transpile ES6 modules into ES5. This uses Babel to transpile...
Read more >
The compiler for next generation JavaScript - Babel
The compiler for next generation JavaScript.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found