cloverfield-tools / universal-react-boilerplate

A simple boilerplate Node app.
MIT License
904 stars 97 forks source link

babel doesn't transform ES6 under node_modules #41

Closed zebulonj closed 8 years ago

zebulonj commented 9 years ago

This boilerplate uses a nested node_modules folder to make internal references cleaner (I like it). However, when the code under the folder is ported to ES6, it is no longer compiled by babel-node because it is assumed to be a module.

Options:

zebulonj commented 9 years ago

I'm not convinced that babel runtime will address this.

therealklanni commented 9 years ago

Modules should be doing their own 6to5 transpiling and providing the compiled "dist" version as the "main" in package.json. It's not this project's (or any other project's) responsibility to compile dependencies to ES5.

/2¢

nkbt commented 9 years ago

@therealklanni, node_modules is used internally for convenience (not for external modules). And node_modules gets ignored. This is a valid point.

therealklanni commented 9 years ago

Oh, I misread that as the main node_modules folder where npm dependencies are installed.

nkbt commented 9 years ago

I personally do not think using node_modules for convenience is a good idea.

zebulonj commented 9 years ago

@nkbt Fair critique. It's unconventional. I've been experimenting with it, and in my own project I've moved the structure to a src directory and am using babel src --out-dir app.

nkbt commented 9 years ago

Compiling code before running it for backend feels awkward, just need to whitelist internal node_modules for babel. Need to add it to .babelrc

zebulonj commented 9 years ago

@nkbt Is that all there is to it? I agree about the awkwardness.

nkbt commented 9 years ago

@zebulonj I am not 100% sure, of course, but looks like that should be it.

zebulonj commented 9 years ago

@nkbt It appears that the -w option refers to transformers, not files to compile. This is born out by a test I just attempted. See https://babeljs.io/docs/usage/cli/

ericelliott commented 9 years ago

Compiling code before running it for backend feels awkward, just need to whitelist internal node_modules for babel. Need to add it to .babelrc

If that's possible, it's the right solution.

Otherwise, I have no problem compiling the internal node_modules folder as demonstrated in this article.

Of course, we leave the vendor node_modules alone.

ericelliott commented 9 years ago

You may want to ask the babel team how to handle this before resorting to the pre-compile route.

adrian-seijo commented 9 years ago

Based on past experiences in a project with node modules where we run mocha through babel-node (and after expend a fair amount of time trying to figure out why it didnt transpile... :D) you just need to change the ignore property in the require call, by default is a regexp for /node_modules/, if you change it it will transpile fine: https://babeljs.io/docs/usage/require/

zebulonj commented 9 years ago

Thanks @kileras. This works:

babel-node --ignore ^\.\/node_modules app

What do you all think? Smell funny?

zebulonj commented 9 years ago

Now that we've identified a command-line option that works, it can alternatively be added to the package.json file or to a .babelrc.

nkbt commented 9 years ago

better to .babelrc

zebulonj commented 9 years ago

Ugh. In the .babelrc, ignores appear to add to the default behavior (ignoring node_modules) rather than replacing it.

nkbt commented 9 years ago

Then add to npm scripts if it does not work. And you can file a bug to babel as well...

gavriguy commented 9 years ago

Another solution for the same problem (requiring modules from the root) is to use a a custom babel plugin - https://github.com/gavriguy/babel-plugin-project-relative-require as discussed at http://stackoverflow.com/questions/31068698/importing-node-modules-from-root-directory-using-es6-and-babel-node/31069137#31069137

Basically you can use the ~ sign to require modules from the root e.g. import {a} from '~my-module'; will require my-module that is located at the root folder from anywhere in your code. This also solves the issue of using es6

ericelliott commented 9 years ago

@gavriguy I don't like the idea of littering the codebase with weird/uncommon babel preprocessors.

ericelliott commented 9 years ago

Then add to npm scripts if it does not work. And you can file a bug to babel as well...

:+1:

ericelliott commented 9 years ago

What's the status of this issue?

vasco3 commented 8 years ago

I got this working following this solution http://stackoverflow.com/questions/31822593/import-a-module-from-node-modules-with-babel-but-failed/31822668#31822668

babel-node --ignore '/node_modules/(?!my_module1|my_module2)' script.js

Since babel-node ignores node_modules by default, this regex will unignore just the module you want to transpile... Although this is not a pattern that the babeljs community wants to encourage, since all npm packages should be transpiled on pre-publish.

ericelliott commented 8 years ago

If anybody wants to take a crack at this, I'd appreciate it. It will probably be a couple weeks before I can get back to it.

ericelliott commented 8 years ago

Scrapped. See new docs.

Nedudi commented 7 years ago

you can use https://www.npmjs.com/package/babel-node-modules