How to compile all included files into one using Babel?

Question

I am using Babel in my project. The thing is, I have this line of code in my server.js:

import schema from "./data/schema";

(data/schema.js is in ES2015 syntax).

And when I am trying to compile my server.js with babel, like this:

babel -o server_production.js --minified server.js

it produces a new file without errors and replaces import instruction with require. But the thing is, when I am trying to run my babel-compiled server.js with node, it complains about data/schema.js, because it wasn't transpiled into ES5, only required (the exact error is Unexpected token "import", because I am using some other imports in data/schema.js).

So, the question is: how can I compile my file and all the files it imports into one file? I tried babel -o server_production.js --minified data/schema.js server.js, but that didn't work either.

I don't think Babel does dependency analysis. You have to specify all the files you want to convert. — Felix Kling
– Felix Kling, Commented Sep 13, 2016 at 14:45

gnerkus · Accepted Answer · 2016-09-13 17:55:26Z

Babel doesn't bundle dependencies by default. You'll need to use a module bundler like rollup.

To do this, you'll need to define a rollup config similar to this one:

rollup.config.js

import babel from 'rollup-plugin-babel'; import babelrc from 'babelrc-rollup'; export default { entry: 'server.js', dest: 'server_production.js', plugins: [ babel(babelrc()) ] };

This works with the package.json file defined below:

{ "scripts": { "rollup": "./node_modules/.bin/rollup -c" }, "devDependencies": { "babel-cli": "6.14.0", "babel-plugin-external-helpers": "6.8.0", "babel-preset-es2015": "6.14.0", "babelrc-rollup": "3.0.0", "rollup": "0.35.10", "rollup-plugin-babel": "2.6.1" } }

You execute the command npm run rollup -c to bundle and compile the files.

You'll find an example here: https://ide.c9.io/ifeanyidev/babel-rollup-example

Anyone have updates to this process for Babel 7? Specifically, the rollup.config.js expects different attributes and babel-plugin-external-helpers is no longer compatible
So happy to finally find someone trying the same thing only to be disappointed with a 3 year old and possibly very outdated answer.

Grant Miller · Accepted Answer · 2018-08-28 01:49:33Z

-8

You can use the following solution to compile all included files into one using Babel:

npx babel src --out-file script-compiled.js

edited Aug 28, 2018 at 1:49

Grant Miller

29.2k16 gold badges158 silver badges171 bronze badges

answered Aug 28, 2018 at 1:27

Revanth Kumar

8121 gold badge13 silver badges18 bronze badges

1 Comment

Marco Faustinelli Over a year ago

This will either compile a single file to another single file, or compile all files in the same directory into a single file. You copied it from the @babel-cli site without understanding anything about the subject.

Collectives™ on Stack Overflow

How to compile all included files into one using Babel?

2 Answers 2

4 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Linked

Related