Transform two es6 modules into one file with babel

Question

I have files a.js and main.js:

a.js:

export default A = 7;

main.js:

import A from './a'
console.log(A);

I want somehow process that files to get one result file (let say result.js), which I can add into html page (via <script src="result.js"></script>), so that when I load this html page in browser, I see 7 in console. There should be no require() or import ... from ... directives in result.js.

I try compile file main.js with babel:

babel main.js --presets env --out-file result.js

But this gives me file result.js with require() directive and without code from a.js:

'use strict';
var _a = require('./a');
var _a2 = _interopRequireDefault(_a);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
console.log(_a2.default);

Also I try to compile both files a.js and main.js with babel:

babel a.js main.js --presets env --out-file result.js

This gives me file result.js with code from a.js but also with require() directive:

"use strict";
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = A = 7;
'use strict';
var _a = require('./a');
var _a2 = _interopRequireDefault(_a);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
console.log(_a2.default);

How can I process that files correctly to get result.js without require() or import ... from ... directives?

I don’t know if there’s a built-in Babel way. (It doesn’t look like it, but things change quickly.) Some things you can do, however, are: a) run it through Rollup first, then Babel; b) use Webpack with Babel preprocessing; c) use Browserify with babel preprocessing ([Babelify](https://github.com/babel/babelify)); d) use Webpack/Browserify after Babel. — Ry-, Sep 14 '17 at 21:53

Transform two es6 modules into one file with babel

0 Answers0