javascript - Concatenate files using babel - Stack Overflow

admin管理员组

文章数量:1025489

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 pile time not the traditional includes from es2016/es2016. I want to have each file be babel piled 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 pile 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 mand and just by having 'include' directives at the top of the files.

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 pile time not the traditional includes from es2016/es2016. I want to have each file be babel piled 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 pile 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 mand and just by having 'include' directives at the top of the files.

• javascript
• node.js
• babeljs

Share Improve this question Follow asked Jul 14, 2016 at 18:28 AchsharAchshar 5,27388 gold badges4343 silver badges7373 bronze badges 4

• You should probably start with understanding how you can implement a plugin for Babel that will understand the include directive. – robertklep Commented Jul 14, 2016 at 18:40
• So such a setup is not possible with babel as it is? – Achshar Commented Jul 14, 2016 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 Commented Jul 14, 2016 at 18:45
• I don't mean to literally use an 'include' mand. 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 Commented Jul 14, 2016 at 18:46

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

It sounds like you could consider using Browserify, bined 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 mon Babel presets like es2015, and pass them as argument to babelify (see this):

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

(or use a .babelrc file)

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 pile time not the traditional includes from es2016/es2016. I want to have each file be babel piled 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 pile 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 mand and just by having 'include' directives at the top of the files.

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 pile time not the traditional includes from es2016/es2016. I want to have each file be babel piled 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 pile 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 mand and just by having 'include' directives at the top of the files.

• javascript
• node.js
• babeljs

Share Improve this question Follow asked Jul 14, 2016 at 18:28 AchsharAchshar 5,27388 gold badges4343 silver badges7373 bronze badges 4

• You should probably start with understanding how you can implement a plugin for Babel that will understand the include directive. – robertklep Commented Jul 14, 2016 at 18:40
• So such a setup is not possible with babel as it is? – Achshar Commented Jul 14, 2016 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 Commented Jul 14, 2016 at 18:45
• I don't mean to literally use an 'include' mand. 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 Commented Jul 14, 2016 at 18:46

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

It sounds like you could consider using Browserify, bined 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 mon Babel presets like es2015, and pass them as argument to babelify (see this):

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

(or use a .babelrc file)

本文标签： javascriptConcatenate files using babelStack Overflow