How to use babel with npm package that will be used by react

user_378594 0
Viewed 1406

Trying to do what I thought was a simple thing.

I have a node package that uses advanced js syntax. I want to depend on it in a react project.

So I installed babel packages via --save-dev, and added a .babelrc:

{
  "presets": ["env"],
  "plugins": ["transform-object-rest-spread"]
}

That was not enough so I added an npm script under install to trigger the compilation. Then I had to include the compiled target lib/index.js as my entry point via main. So in the end my package.json looks something like this:

{
  "name": "bla",
  "version": "1.0.0",
  "scripts": {
    "postinstall": "babel src --out-dir lib"
  },  
  "main": "lib/index.js",
  "dependencies": {},  
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react-native": "^4.0.0"
  }
}

When I run npm install locally on this project, it builds properly. However when react scripts build this (the dep is from github), I get an error: sh: 1: babel: not found.

Why is this so difficult? What am I doing wrong?

babeljs npm reactjs node.js javascript
3 Answers

sh: 1: babel: not found is from your shell not finding the babel binary file (normally under ./node_modules/.bin/babel)

You'd want to compile before you publish to npm, so anyone who installs your package has the built files. But, for Github try something like:

"postinstall": "npx babel src --out-dir lib"

user_60916850
user_3785940

I am not sure I understand the need here correctly, but could you not just run the babel call in prepare or prepublish scripts? That way only local npm install calls would pick that up.

See more about npm scripts lifecycle: https://docs.npmjs.com/misc/scripts

user_6084540
Related