無法使用 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" ]
}