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

Question

嘗試做我認為很簡單的事情。

我有一個使用高級js語法的節點包。 我想在React項目中依靠它。

所以我通過--save-dev安裝了babel軟件包，並添加了.babelrc ：

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

那還不夠，所以我在install下添加了一個npm腳本來觸發編譯。 然后，我必須通過main將編譯后的目標lib/index.js為我的入口點。 所以最后我的package.json看起來像這樣：

{
  "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"
  }
}

當我在此項目上本地運行npm install ，它會正確構建。 但是，當react腳本構建此腳本時（dep來自github），我得到一個錯誤： sh: 1: babel: not found 。

為什么這么難？ 我究竟做錯了什么？

Answer 1

sh: 1: babel: not found是從您的shell中找不到babel二進制文件（通常在./node_modules/.bin/babel下）

在發布到npm之前，您需要進行編譯，因此安裝軟件包的任何人都具有內置文件。 但是，對於Github，請嘗試以下操作：

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

Answer 2

這個hack代替了postinstall ：

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

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

也相關： https : //github.com/npm/npm/issues/10366

Answer 3

我不確定我是否正確理解了這里的需求，但是您能否僅在prepare或prepublish腳本中運行babel調用？ 這樣，只有本地npm install調用才能接聽。

查看有關npm腳本生命周期的更多信息： https ://docs.npmjs.com/misc/scripts