Running JS files in the public folder through Babel

Ember CLI
1

I have several JS files placed in the public directory under public/assets/scripts. Is there a way for ember-cli to run those JS files through Babel? It doesn’t look like it does so by default.

ember-cli: 2.11.0 node: 8.1.3

2

The system under Ember CLI is Broccoli which is quite flexible. There are a few ways to go depending on exactly why you want them going through Babel (minification, module import, ES6)

There is also the addon system which has hooks into the pipeline

If you explain what you’re trying to do in more detail, I’ll help you figure something out

1 Like
3

My Ember app loads different JS scripts based on the root URL a visitor uses. These custom JS scripts are placed in public/assets/scripts and are fetched using jquery’s getJson() method. To be clear, Ember CLI already minifies these JS files by default but won’t transpile any ES6 syntax or module imports, which are both features I would like to use in my custom JS scripts.

4

@ousikaa I’ve used ember addons to transpile 3rd party code like this in the treeForAddon hook. In the example below I take the library redux saga and transpile it manually (explicitly telling ember-cli not to transpile as you can see on line 27)

5

There’s a bunch going on in the above example. If you’d like it explained then let us know

The summary is:

  1. L12 Find the path to the files to transpile
  2. L13 Use that path to make a Broccoli tree
  3. L15 Remove any non-js files from the tree
  4. L21 Find the ember-cli-babel addon (it is a safe assumption that this library is installed)
  5. L22 Transpile the tree with the addon
  6. L45 Merge the result with the reset of the application

Note that this example is in an addon but it should be possible to do this in ember-cli-build.js. You’ll want to not return app.toTree() right away, but merge the transpiled files in with this (step 6 above)