Compiled file does not change the file extension from .es6 to .js

[nmehta6]

I have a few files that I am trying to compile with babel in my project. Since I don't want all .js files to be processed through the babel compiler, I have used .es6 extension for the ones that I do want to be compiled. However, the output file does not have the .js extension. It keeps the .es6 extension. Is this supported? Thanks.

[agantelin]

You can use other plugins for it. gulp-extname for example: https://www.npmjs.com/package/gulp-extname

[nmehta6]

Would this be considered as a feature? I think that it is very useful to only provide files with a specific extension (.es6 for instance) for projects that have some files that need to be compiled by babel. As for the compiled file, it is a norm for transpilers to produce a .js file.

[ericmdantas]

@nmehta6, I have a similar issue and I'm using gulp-babel to solve this.

Here's the issue and here's the solution.

[nmehta6]

@ericmdantas Thanks. I considered that approach. I was wondering if this renaming would be included in this project as a feature. For example, https://github.com/babel/babelify allows you to pass in an array of extensions and still compiles to .js.

[ericmdantas]

@nmehta6, yeah I thought babel had something related to renaming the extensions too, but I couldn't find anything. Maybe it's still out there.

For now, that approach will do just what the feature would do - so I'm sticking to it for now.

But maybe @sebmck could give us a hint.

[sebmck]

I'm not at all familiar with gulp so I'm not sure on best practices.

[ericmdantas]

Actually, it's not about gulp, it's about babel doing this "extension renaming" out of the box.

I couldn't find anything other than extension renaming for single files, like: "index.es6 to index.js".

If you have some folders, looks like there's no way to turn this:

├── lib0
│     ├── index0.es6
│     └── index1.es6
│
└── lib1
       ├── index3.es6
       └── index4.es6

Into this:

├── lib0
│     ├── index0.es6
│     ├── index1.es6
│     ├── index0.js
│     └── index1.js
│
└── lib1
       ├── index3.es6
       ├── index4.es6
       ├── index3.js
       └── index4.js

[ericmdantas]

@sindresorhus, Thanks!

Just a question, can we make this configurable?

Like, tomorrow we could be using .esWhatever.

[sindresorhus]

@ericmdantas It will convert any extension to .js. No need for it to be configurable.

[ericmdantas]

@sindresorhus, alright, thanks!

Gonna try it later today.

Edit: Just tried it, removing the gulp-rename dependency, and it's working as expected :+1:

[nmehta6]

Tested it and works great. Thanks!

[th0r]

@sindresorhus I have the opposite requirements - I don't want *.jsx files to be renamed to *.js. Can you make this feature optional?

[sindresorhus]

No, that's too much of an edge-case. Just use gulp-rename.

[th0r]

@sindresorhus Can't agree here. Every gulp plugin should do only one thing (I think it's your words 😉), so gulp-babel should transform code and gulp-rename - rename files. I was very surprised that my *.jsx files were renamed to *.js. Besides, I can't use gulp-rename after gulp-babel because some of my transformed files has js extension and some jsx and I just don't know, which of them were jsx before renaming.

[sindresorhus]

Why do you need this?

[th0r]

@sindresorhus In my isomorphic project (node/webpack) I use babel/register in dev and compilation step for prod. I use jsx extentions for react components cause it's more informative and it's not js really. So I have requires like require('./Button.jsx') in node scripts and this breaks after build step because it's Button.js now.

[th0r]

@sindresorhus So what do you think? IMHO it's much simpler and more obvious not to change extention in gulp-babel and use gulp-rename for this (one additional line of code) or make this behavior optional than change extention and try to change it back somehow. Something tells me that my use-case is not so rare ;)

[sindresorhus]

Babel compiles your JSX, right? So when it comes out of this plugin it's no longer JSX, but plain JS, hence the extension change.

Something tells me that my use-case is not so rare ;)

Fwiw, it has been like this for over a month without anyone complaining.

[th0r]

@sindresorhus Ok. For the others who'll face this problem, here is my solution:

function babelCompiler(src, renamer) {
    return gulp
        .src(src)
        .pipe(sourcemaps.init())
        .pipe(require('gulp-babel')())
        .pipe(renamer ? require('gulp-rename')(renamer) : require('gulp-util').noop())
        .pipe(sourcemaps.write());
}

gulp.task('babel', () => {
    return require('event-stream')
        .merge(
            babelCompiler('**/*.jsx', { extname: '.jsx' }),
            babelCompiler('**/*.js')
        )
        .pipe(gulp.dest('build'));
});

[sindresorhus]

@th0r I came up with a better solution for you. I made a gulp plugin that can revert to the previous path. So you can simplify it to:

gulp.task('babel', () => {
    return gulp
        .src('**/*.{js,jsx}')
        .pipe(sourcemaps.init())
        .pipe(require('gulp-babel')())
        .pipe(require('gulp-revert-path')())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('build'));
});

https://github.com/sindresorhus/gulp-revert-path

[jeffkole]

@th0r & @sindresorhus Thank you for the work on this. I ran into the same issue, and this solution saved me a huge hassle and headache.

[jeromecovington]

@sindresorhus the revert path is a great addition. I am getting Error: EMFILE, too many open files with the gulp approach vs. command line, but I do want my babel task in a proper build system.

[jeffkole]

@jeromecovington That error indicates that the Node process does not have permissions to open all of the files it wants to open at the same time, which is an operating system setting. On Linux or a Mac, you can typically run ulimit -n 2048 to increase the limit of open files to 2048. The default is often 256. Give that a shot and try again.

[egoist]

@th0r I think if you are using webpack you don't have to require('./button.jsx') but directly require('./button') by adding :

resolve: {
  extensions: ['', '.js', '.jsx']
}

to your webpack.config.js.

and for gulp-babel you just keep those .jsx files compiled to .js

on the server side, the same:

require('/path/to/button')

[th0r]

@egoist Thanks! That's exactly what I'm doing right now)

[sindresorhus]

Happy to add some tips to the readme if someone cares enough to do a PR ;)

[jeromecovington]

Does babel not rewrite the module ids without extensions anyway? At least by default? As option - keepModuleIdExtensions: false

[kuraga]

IMHO should be configurable: there is .mjs not only .js now... @hzoo would you accept a PR?