如何在React将使用的npm包中使用babel

Question

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?

Answer 1

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"

Answer 2

This hack worked instead of the postinstall :

...
"preinstall": "npm install --ignore-scripts && babel src --out-dir lib",
...

Source: https://github.com/Financial-Times/structured-google-docs-client/commit/891180db742ed00cace0139b201850f79d337098

Also relevant: https://github.com/npm/npm/issues/10366

Answer 3

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