How to make babel transpile modules linked using "npm link"

Question

I have a lot of code in my currently project(my-project) that will be needed in a new one. This code has been written in ES6 and transpiled after with babel.

I've created a module called "my-module" with this shared code and linked it to "my-project" using npm link

The problem is that when I start the project, the code from "my-module" is not beening tranpiled and throws an error right at the import statement.

The code inside my-module will be edited a lot. How to make it works?

package.json

  "scripts": {
    "start": "nodemon bin/dev",
    "clean": "rm -rf dist",
    "build": "yarn run clean && mkdir dist && babel src -s -d dist",
    "production": "yarn run build && node bin/production"
  },

.babelrc

{
  "presets": ["es2015", "stage-2"]
}

Answer 1

The linked project will not find your .babelrc file. You have a few options:

1. Place a .babelrc in my-project or a higher level directory. This will require the babel plugins to be installed in that module though (or globally)
2. If you're using a build tool (i.e. webpack, browserify, etc.) you can declare the babel config there.

This comment helped me out: https://github.com/babel/gulp-babel/issues/93#issuecomment-249172581

My project uses browserify, so declaring the same plugins in the build script that are in .babelrc and invoking require.resolve caused the npm linked project to be transpiled correctly.

return browserify.transform('babelify', {
    sourceMaps: true, 
    global:true, 
    plugins: ['babel-preset-es2015'].map(require.resolve)
})