4

Here's my file structure

/base.js
    /foo/main.js
        /foo/bar/main.js
    /baz/main.js

I want 4 files in total. One for each leaf node of the tree with all the content of it's 'included' files. Here are file's contents.

base.js

//anything really

/foo/main.js

include 'base.js'

/foo/bar/main.js

include 'base.js'
include '/foo/main.js'

/baz/main.js

include 'base.js'

These 'includes' are like php includes in that they are concatenated at babel's compile time not the traditional includes from es2016/es2016. I want to have each file be babel compiled for past versions of ES and have all the contents of it's include hierarchy before I put them up for serving. They will not be on a node server. This will be traditional php/apache hosting. Babel is just for transpiring purposes.

I know I can compile all my js in a single file with the --out-file option and I can import and export modules but how can I make babel concatenate different files without having to write and maintain cli command and just by having 'include' directives at the top of the files.

Achshar
  • 5,153
  • 8
  • 40
  • 70
  • You should probably start with understanding how you can implement a plugin for Babel that will understand the `include` directive. – robertklep Jul 14 '16 at 18:40
  • So such a setup is not possible with babel as it is? – Achshar Jul 14 '16 at 18:42
  • Not if you want to "just have 'include' directives at the top of the files", no. You may be able to use something like Gulp to concatenate the files, but that would still require some maintainance and won't work around the fact that `include` isn't a JS directive. – robertklep Jul 14 '16 at 18:45
  • I don't mean to literally use an 'include' command. I am new to node/babel so I don't really know if anything like this is possible. I will look into gulp though, thanks! – Achshar Jul 14 '16 at 18:46

1 Answers1

2

It sounds like you could consider using Browserify, combined with babelify to transpile the files to ES5.

Basically, to bundle all "main.js" files in your tree, you could run the following (assuming a Unix-like OS):

for file in */**/main.js
do
  browserify -t [ babelify ] $file > $(dirname $file)/bundle.js
done

(you can put that in a shell script quite easily)

This will create a file called bundle.js next to the main.js, which will include the transpiled contents of main.js, and any of its dependencies (which you load using require() or import).

To get babelify to transpile ES6 to ES5, you need to install some common Babel presets like es2015, and pass them as argument to babelify (see this):

browserify -t [ babelify --presets [ es2015 ] ] $file

(or use a .babelrc file)

robertklep
  • 198,204
  • 35
  • 394
  • 381
  • This sounds like something I can use. But I am also reading about webpack. How does that compare to using browserify? – Achshar Jul 14 '16 at 19:13
  • @Achshar webpack is more flexible, but I'm not sure if it can be easily used for your situation (it generally works better for entire projects, where you have a single configuration for all the files in the project). – robertklep Jul 14 '16 at 21:00
  • Cool, this is what I am going with then. Thanks! – Achshar Jul 14 '16 at 21:03