CodeKit ignores babel.config.js, making transpiling of node_modules impossible

[ArianeNubee]

Quick, short summary:
Since Babel 7, you're supposed to be able to ask Babel to also transpile imported node_modules, by using a babel.config.js file. It doesn't work with the old .babelrc files. CodeKit only checks for .babelrc. It doesn't check for babel.config.js files at all.

Expected results:
Normally, by mentioning empty array "exclude" and "ignore" settings in babel.config.js, you should be able to tell Babel to transpile and polyfill node_modules code, which is by default ignored by the process.

References:
babel/babel-loader#171
https://babeljs.io/docs/en/configuration#babelconfigjs

Actual results:
CodeKit ignores babel.config.js. It only takes .babelrc, where empty exclude and import parameters do NOT affect node_modules. So it's impossible to transpile node_modules right now.

Exact steps to reproduce:

1. Install and import a module that has an ES6 function you want to transpile. In my case, the ES Module version of Vanilla Lazyload by verlok. (yarn add vanilla-lazyload)
2. In project settings, tell CodeKit to use Babel -custom config files.
3. Create the following .babelrc file. (Normally, this would be a babel.config.js file, but CodeKit ignores that. Let's check that the rest of the process works properly by using .babelrc.) This is the standard Babel polyfilling process.
   { "presets": [ [ "@babel/preset-env", { "useBuiltIns": "usage", "targets": { "browsers": ">0.2%, last 2 versions, Firefox ESR, not dead, IE >= 11", }, "include": [], "corejs": 3, } ] ], "exclude": [], "ignore": [] }
4. Install, but do not import, the prerequisite modules. They have tons of dependencies. It'll take a while. It's normal.
   yarn add corejs@3
yarn add @babel/core
yarn add @babel/preset-env
5. Compile your file. You'll notice that Babel will have transpiled the arrow functions in YOUR code, but will have left those from vanilla-lazyload.
6. Rename your .babelrc file into babel.config.js. Compile your JS again. You'll notice that now, Babel won't polyfill your arrow functions at all anymore, because CodeKit ignores this file.

A link to download a simplified project or file that shows the issue:
https://drive.google.com/open?id=1rncU8HFxluLP3rsDzrQ7CNl-LA6fnqI1

Your configuration (any details about your system that you think might be relevant)
I don't know what would be relevant, but if I missed something, just ask.

[bdkjones]

Where are you placing the babel.config.js file? It must be in your project root, right next to the project's package.json file.

The current version of CodeKit (3.8.2) should pick up a properly named, properly located babel.config.js file, as long as you've set the project to use only .babelrc files in Project Settings > Tools > Babel.

[bdkjones]

See https://babeljs.io/docs/en/configuration for details.

[ArianeNubee]

It's at the project root, at the same place where package.json, config.codekit3 and node_modules are.
I'm using CodeKit 3.8.2. Project settings are set to "I'll Provide Settings In A Babel Config File".

[ArianeNubee]

New info: Either I was blind or the Babel docs aren't very clear (or both).

babel.config.js is NOT identical to .babelrc. The structure is completely different. See the Babel docs :
https://babeljs.io/docs/en/configuration#babelconfigjs

Now, even with the right syntax, CodeKit still ignores the babel.config.js file. But it's good to know that simply renaming .babelrc does not provide a valid babel.config.js.

[bdkjones]

Okay, so I think the easiest way to handle this will be to expand the UI options to allow this configuration. I'm doing that now, but I do not see a corejs option documented on babel-preset-env. What is that corejs: 3 entry doing?

[bdkjones]

Okay, I think I've resolved this so that custom config files will be honored as long as you put Babel into "I'll manage settings myself" mode in Project Settings, but I can't download your test project to verify because you didn't give me access.

[ArianeNubee]

Okay, so I think the easiest way to handle this will be to expand the UI options to allow this configuration. I'm doing that now, but I do not see a corejs option documented on babel-preset-env. What is that corejs: 3 entry doing?

It specifies which version of Core JS to use for the polyfills that Babel adds automatically with "usage" mode for preset-env.

However I cannot for the life of me remember where I saw that, but I think it was something about it using Core JS version 2 by default, and version 3 being preferable for some reason. I'm sorry, I can neither remember nor find what it was exactly.

Maybe I got confused with this corejs option which is not for the same component at all.

Okay, I think I've resolved this so that custom config files will be honored as long as you put Babel into "I'll manage settings myself" mode in Project Settings, but I can't download your test project to verify because you didn't give me access.

I'm sorry. I didn't realize the file wasn't public. It should be now.

[bdkjones]

Okay, so I've verified that this is fixed in the next release. All you'll need to do is set the I'll provide a Babel Configuration File option in Project Settings > Babel and the only option CodeKit will then pass to Babel is a command telling it to walk up the disk until it finds a babel.config.js file or error out if one of those files isn't found.

[bdkjones]

I've also added the necessary options to do this without a config file:

Note: You DO get a lot of "circular dependency" warnings when you compile the project and let babel transpile ALL of node_modules. This is described pretty well in several questions about the usage builtIns option on Babel's repo. You'll likely want to narrow down the exclusion list so that Babel isn't trying to compile EVERYTHING in node_modules, but just the items you need it to compile.

[bdkjones]

I was able to eliminate the circular dependency warnings by setting the "excluded items" textField to:

'bower_components/**', /\/core-js\//

See rollup/rollup-plugin-babel#254

[ArianeNubee]

You have gone above and beyond! Those in-app options look great. Do they also allow me to use CodeKit's browser list string directly with preset-env?

Does CodeKit even gasp directly include preset-env and friends now?

PS: God, I read those threads in Babel and that guy sure is stubborn about compiling distributed modules being a terrible practice 🤔 I mean, I don't MAKE the packages. It's my problem if I need to support an antiquated browser.

[ArianeNubee]

Ah, another question. Is it possible to only use CodeKit's in-app settings for the global Babel settings, but still read the various possible .babelrc files in each sub-folder?

[bdkjones]

Yes. Check the “.babelrc” files in Project Settings to allow babelrc. CodeKit has always used its target browsers string in preset-env.

…

Sent from my iPhone

On Jun 29, 2019, at 04:40, ArianeNubee ***@***.***> wrote: Ah, another question. Is it possible to only use CodeKit's in-app settings for the global Babel settings, but still read the various possible .babelrc files in each sub-folder? — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub, or mute the thread.