Equivalent Babel Plugin?

[tomatau]

This plugin looks great! However in an isomorphic app it's a no-go unless you're webpacking your node code. If there's an equivalent babel plugin, that would be great! I had a good look around but couldn't find one.

[shaketbaby]

I was building this plugin specifically for Webpack. Not very familiar with creating Babel plugins, but based on my understanding of what Babel does, it seems this is not really Babel's responsibility. Maybe what's needed is an equivalent thing for node.js?

[tomatau]

Often people use babel runtime compilation for server side renders of isomorphic apps (as they need to compile JSX) to keep the codebase all with the same language features. Especially if they can't use the latest node. In this case it's normal to use the babelrc configuration for the server side code.

A babel plugin is the obvious choice. There are some that already exist for the module.resolve webpack options:

e.g.

{
  "presets": ["es2015", "react", "stage-0"],
  "plugins": [
    "add-module-exports",
    ["module-resolver", {
      "root": ["./src"]
    }]
  ]
}

[shaketbaby]

I thought all Babel does is to transpile the given string in es2015 or any format supported to es5 JavaScript code. It doesn't really resolve the path itself, that part is done by Webpack, Browserify, Node.js, etc. My understanding is if Babel sees an import foo from "foo", it just transpiles that to var foo = require("foo"), and leave the actual path resolving to other tools. I need to learn more about Babel, but are you saying that Babel will try to resolve the path itself?

[tomatau]

You can use babel without Webpack and in that case it can handle resolving paths.

[shaketbaby]

Would you please be able to point me to some links/articles that explain how this works? When I use Babel on the server, it is Node.js that does the resolving. So if you could provide some info about that, that'd be great!

[shaketbaby]

Just had a look at the https://babeljs.io/docs/usage/babel-register/ and looks like my understanding is not correct, and there's an option resolveModuleSource which seems something can be used, will look into it.

[tomatau]

It might be worth having a look at how https://github.com/tleunen/babel-plugin-module-resolver achieves the resolution for babel. I'm guessing it would map import paths to require calls in compilation using absolute paths. I guess it would be much trickier as an alias is a straight swap whereas this functionality is more dynamic to the existence of files.

[mdluo]

+1

[IgnusG]

I found this plugin but it's not published on npm despite saying so

[tomatau]

Oh nice! Did you see it working @IgnusG ? Might be worth publishing it anyway

[mdluo]

@IgnusG

A month ago I was seeking for the equivalent babel plugin too and I was here to +1. But there's no such plugin really works

So I wrote the plugin myself and all tests passed. However it doesn't work with my webpack and babel config. I don't know where the problem is and it may cost me much more time to solve it rather than just adding few index.jss. So I unpublished the module from npm.

Besides, you can try to install it directly from GitHub:

npm install --save-dev https://github.com/mdluo/babel-plugin-directory-named-module.git

And PRs are welcomed 😎

Ref: mdluo/babel-plugin-directory-named-module#1

[shaketbaby]

If both Webpack and Babel are used, then probably just let Webpack does the resolving. And the Bebal plugin is perhaps only needed when Babel is used alone.

[shaketbaby]

Closing now given @mdluo has created a repo for this.

[gkiely]

For anyone looking for a solution to this: I moved from using babel-plugin-module-resolver for my aliases to alias in webpack and this plugin worked fine. Using webpack 3.10.0