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
...

我通过尝试在我运行的frontend_config目录中运行来自终端的babel来缩小问题范围：

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文件夹中安装了cli，presets，plugins之类的babel依赖项，并且您正在转换未安装在同一根babel中的JSX文件。这就是原因，它表现得像无法找到预设＆＃34; env＆＃34;相对于目录

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

use absolute paths

或使用如下所示的要求：

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放在与项目根目录不同的目录中时的解决方案是使用绝对路径。因此，巴贝尔电话看起来像：

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

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

4 个答案: