# Running JS files in the public folder through Babel

**URL:** <https://discuss.emberjs.com/t/running-js-files-in-the-public-folder-through-babel/13753>\
**Category:** Ember CLI\
**Created:** [October 11, 2017, 6:02pm UTC](https://discuss.emberjs.com/t/running-js-files-in-the-public-folder-through-babel/13753 "2017-10-11T18:02:31Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ousikaa](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ousikaa/32/13054_2.png) [@ousikaa](https://discuss.emberjs.com/u/ousikaa)\
**Post date:** [October 11, 2017, 6:02pm UTC](https://discuss.emberjs.com/t/running-js-files-in-the-public-folder-through-babel/13753/1 "2017-10-11T18:02:31Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![martletandco](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/martletandco/32/13089_2.png) [@martletandco](https://discuss.emberjs.com/u/martletandco)\
**Post date:** [October 22, 2017, 9:01pm UTC](https://discuss.emberjs.com/t/running-js-files-in-the-public-folder-through-babel/13753/2 "2017-10-22T21:01:31Z")

</div>

The system under Ember CLI is [Broccoli](http://broccolijs.com) 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

---

<div class="post-metadata">

**Author:** ![ousikaa](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ousikaa/32/13054_2.png) [@ousikaa](https://discuss.emberjs.com/u/ousikaa)\
**Post date:** [October 22, 2017, 9:39pm UTC](https://discuss.emberjs.com/t/running-js-files-in-the-public-folder-through-babel/13753/3 "2017-10-22T21:39:17Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![toranb](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/toranb/32/16579_2.png) [@toranb](https://discuss.emberjs.com/u/toranb)\
**Post date:** [October 23, 2017, 1:18am UTC](https://discuss.emberjs.com/t/running-js-files-in-the-public-folder-through-babel/13753/4 "2017-10-23T01:18:45Z")

</div>

@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)

> <https://github.com/ember-redux/ember-redux-saga-shim/blob/master/index.js#L22>

---

<div class="post-metadata">

**Author:** ![martletandco](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/martletandco/32/13089_2.png) [@martletandco](https://discuss.emberjs.com/u/martletandco)\
**Post date:** [October 26, 2017, 12:56am UTC](https://discuss.emberjs.com/t/running-js-files-in-the-public-folder-through-babel/13753/5 "2017-10-26T00:56:10Z")

</div>

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)
