无法使用 babel CLI 找到相对于目录的预设“env”

Question

我正在努力使用 babel + presets 编译我的 jsx 文件。 我的项目结构有点不标准，因为 js/jsx 文件放在 config/build 文件的同级目录中：

.
├── frontend_config
│   ├── node_modules
│   │   ├── babel-cli
│   │   ├── babel-core
|   |   | ...
│   ├── package-lock.json
│   └── package.json
├── jsx
│   ├── foo
│   │   ├── Bar.jsx
...

通过尝试从终端运行 babel，在我运行的frontend_config目录中，我已将问题缩小到最小：

npx babel ../jsx/foo/Bar.jsx --presets=env,react
Couldn't find preset "env" relative to directory "../jsx/foo"

我已经安装了babel-preset-env和babel-preset-react但我不知道如何告诉 babel 它们放置在哪里。 我也试过使用.babelrc文件，但行为是一样的。

我的设置是：

$ npx babel --version
6.26.0 (babel-core 6.26.0)
$ node --version
v8.9.4

Answer 1

您已经在 frontend_config 文件夹中安装了 babel 依赖项，如 cli、presets、插件，并且您正在转换未放置在安装的同一个根 babel 中的 JSX 文件。 这就是为什么，它显示为找不到相对于目录的预设“env”

在您的 webpack/grunt/.babelrc 中执行以下操作：

use absolute paths 

或使用 require 如下：

var babelenv = require('babel-preset-env');
var babelreact = require('babel-preset-react');
var babelamd = require('babel-plugin-transform-es2015-modules-amd');

和presets: [ babelenv, babelreact],plugins : [ babelamd ]

希望它有帮助。

Answer 2

运行npm install @babel/preset-env --save-dev

更多信息@ https://babeljs.io/

Answer 3

对于遇到此问题的任何人，使用 Babel 6 并将node_modules放在与项目根目录不同的目录中时的解决方案是使用绝对路径。 因此 babel 调用看起来像：

npx babel ../jsx/foo/Bar.jsx --presets /Users/foo/bar/frontend_config/node_modules/babel-preset-env/,/Users/foo/bar/frontend_config/node_modules/babel-preset-react/

答案归功于 loganfsmyth

Answer 4

如果你愿意，你也可以把它放在你的 .babelrc 文件中

{
  "presets" : [ "/Users/foo/bar/frontend_config/node_modules/babel-preset-env" ]
}