如何将 babel 与将由 react 使用的 npm 包一起使用答案

【问题标题】：How to use babel with npm package that will be used by react如何将 babel 与将由 react 使用的 npm 包一起使用
【发布时间】：2018-04-28 01:07:04
【问题描述】：

尝试做我认为简单的事情。

我有一个使用高级 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。

为什么这么难？我做错了什么？

【问题讨论】：

标签： javascript node.js reactjs npm babeljs

【解决方案1】：

sh: 1: babel: not found 来自你的 shell，没有找到 babel 二进制文件（通常在 ./node_modules/.bin/babel 下）

您希望在发布到 npm 之前进行编译，因此安装您的包的任何人都拥有构建文件。但是，对于 Github，请尝试以下操作：

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

【讨论】：

如果我从 github 安装怎么办？
然后，您必须将构建（转译）的文件作为包的一部分推送到 github 上。或者你可以让你的 react 项目成为一个 es6 项目并使用 babel 来转换 react 代码和你的依赖代码..
查看更新，（注意 npX 中的 x）npx 在适当的上下文中运行 babel cmd。
@jake 还是不行：You have mistakenly installed the `babel` package, which is a no-op in Babel 6.
我不同意，你永远不应该推送你的构建代码。首先，您有正确的想法，这只是环境问题（sh: 1: babel: not found 来自您的外壳，没有找到 babel 二进制文件）

【解决方案2】：

这个 hack 代替了 postinstall:

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

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

【讨论】：

【解决方案3】：

我不确定我是否正确理解了这里的需求，但你能不能只在prepare 或prepublish 脚本中运行babel 调用？这样只有本地的npm install 电话才能接听。

查看更多关于 npm 脚本生命周期的信息：https://docs.npmjs.com/misc/scripts

【讨论】：