Gulp-babelを使用しようとすると、次のエラーが表示されます。
エラー:ディレクトリ「/ Users/username」に関連するプリセット「es2015」が見つかりませんでした
Es2015プリセットをグローバルおよびローカルにインストールしているため、これが問題になる理由がわかりません。
以下は、gulpのセットアップとpackage.jsonです。
var babel = require('gulp-babel');
var es2015 = require('babel-preset-es2015');
gulp.task('babel', function() {
return gulp.src('./app/main.js')
.pipe(babel({
presets: [es2015]
}))
.pipe(gulp.dest('dist'));
});
Package.json
"devDependencies": {
"babel-preset-es2015": "^6.3.13",
"babel-preset-es2015-node5": "^1.1.1",
"browser-sync": "^2.11.0",
"gulp": "^3.9.0",
"gulp-babel": "^6.1.1",
"gulp-stylus": "^2.2.0"
}
ノードv5.1.0とbabel v6.4.0を使用しています
ここに端末出力があります
babel-preset-es2015
をインストールするだけです:
CLIの使用例:
npm install babel-cli babel-preset-es2015
以下の「es2015」
.pipe(babel({
presets: ['es2015']
}))
実際にはパスです-/ Users/username/es2015ディレクトリにプリセットがない場合は、たとえば次のように正確に指定する必要があります。
.pipe(babel({
presets: ['../../gulp/node_modules/babel-preset-es2015']
}))
それは私のために働いた
この問題を修正するには、「/ Users/username」ディレクトリから.babelrc(非表示)ファイルを削除する必要があります。
この正確なgulpfile.jsを使用しました
var babel = require('gulp-babel');
var es2015 = require('babel-preset-es2015');
var gulp = require('gulp');
gulp.task('babel', function() {
return gulp.src('./app/main.js')
.pipe(babel({
presets: [es2015]
}))
.pipe(gulp.dest('dist'));
});
そしてそれは私のために働いた。 babel
、babel-preset-es2015
、およびgulp-babel
のみをインストールしました。
プロジェクトのルートフォルダに.babelrcファイルがあるかどうかを確認します。 .babelrcファイルを作成していない場合は、次を追加します。
{
"presets": ["es2015"]
}
問題を修正しました。
同じ問題が発生したのは、ディレクトリのルートに.babelrc
ファイルがあったためです。
これを修正するには、babelオプション内にbabelrc: false
を追加します。
var babel = require('gulp-babel');
gulp.task('babel', function() {
return gulp.src('./app/main.js')
.pipe(babel({
babelrc: false,
presets: ['babel-preset-es2015']
}))
.pipe(gulp.dest('dist'));
});
私は同じ問題を抱えていたので、この2番目の提案は私の問題に気づくのに役立ちました。
私はnpm install gulp-babel-es2015
をgulpfileに含めませんでした。
この場合、babel({presets: ['es2015']})
オプションは、ここの例に示すように単なる文字列です https://www.npmjs.com/package/gulp-babel .
ここに私のgulpfileがあります。
var gulp = require('gulp'),
babel = require('gulp-babel');
gulp.task('babelify', () => {
gulp.src('js/*.js')
.pipe(babel({
presets: ['es2015']
}))
.pipe(gulp.dest('alljs'));
});
gulp.task('default', ['babelify']);
また、ここのこの問題から、 https://github.com/laravel/elixir/issues/354
ノードをバージョン5.x.xに、npmを3.x.xに更新することをお勧めします。
docs から、他のpreset
言及の代わりに@babel/preset-env
を使用する必要があります
「env」プリセットは1年以上前にリリースされており、以前に持っていた/提案したプリセットの一部を完全に置き換えます。
- babel-preset-es2015
- babel-preset-es2016
- babel-preset-es2017
- babel-preset-latest
- 上記の組み合わせ^
yarn add @babel/preset-env
または
npm install @babel/preset-env
es2015
とstage-2
をインストールしてみてください
npm i babel-preset-es2015 --save
npm i babel-preset-stage-2 --save
私の問題は、他のプログラムがコンパイルプロセスに関係するファイル(おそらく.babelrc)を使用していたことです。いくつかのアプリを閉じることで問題が解決しました。
私にとっては、DropboxまたはeqFTP拡張機能を備えたBrackets Editorでした。
あいさつ
この問題が発生する状況は、ファイルをxxx
からxxx/server
に移動したことです。そして、xxx/server
の下にError: Couldn't find preset "es2015" relative to directory "/Users/username/xxx"
エラーが表示されます。本当の理由は、その.babelrc
ファイルをxxx
の下に移動するのを忘れたことです。そして、その.babelrc
をxxx/server
に移動すると、エラーはなくなります。
私は本当に奇妙なものを持っていました。 1つの大きな長いnpm install
コマンドですべてのbabelツールをインストールしましたが、すべてがエラーなしでインストールされました。ただし、実行時にこのスレッドに記録されたエラーがスローされました。
Package.jsonファイルのバージョンが0.0.0であることに気づいたので、再度npm install --save-dev babel-preset-es2015
を実行し、動作してpackage.jsonファイルにSECONDキーを配置しました。
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-core": "^6.24.1",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2015": "0.0.0",
"babel-preset-stage-2": "^6.24.1",
"eslint": "^3.19.0"
}
失敗したエントリを削除したところ、このrelative to directory
エラーが解消されました。