web-dev-qa-db-ja.com

es6でgulpfileを書くことは可能ですか？

質問：importの代わりにrequireを使用して=>を使用できるようにES6でgulpファイルを作成するにはどうすればよいですかfunction()上の構文？

io.jsを使用するか、任意のバージョンのノードを使用できます。

gulpfile.js：

import gulp from "./node_modules/gulp/index.js";
gulp.task('hello-world', =>{
    console.log('hello world');
});

enter image description here

エラー：

import gulp from "./node_modules/gulp/index.js";
^^^^^^
SyntaxError: Unexpected reserved Word

gulp.task('hello-world', =>{
                         ^^
SyntaxError: Unexpected token =>

node_modules/gulp/bin/gulp.jsの中では、この stack で尋ねられているように、最初の行を#!/usr/bin/env node --harmonyに変更しました

javascriptnode.jsgulpecmascript-6
31
Matthew Harwood

はい、 babel を使用してできます。

Gulp-cliの最新バージョンがあることを確認してください。

npm install -g gulp-cli

プロジェクトの依存関係としてbabelをインストールします。

npm install --save-dev babel

gulpfile.jsの名前をgulpfile.babel.jsに変更します

Gulpfileは次のようになります。

import gulp from 'gulp';

gulp.task('default', () => {
  // do something
});

Babel 6.0+のアップデートEric Bronniman が正しく指摘しているように、これを機能させるためにいくつかの追加手順があります最新バージョンのbabelで。これらの指示は次のとおりです。

繰り返しますが、最新バージョンのgulp-cliがあることを確認してください
npm install -g gulp-cli

次に、gulp、babel core、およびes2015プリセットをインストールします
npm install --save-dev gulp babel-core babel-preset-es2015

次に、以下を.babelrcファイルまたはpackage.jsonに追加します

"babel": {
  "presets": [
    "es2015"
  ]
}

gulpfile.jsはgulpfile.babel.jsという名前にする必要があります

49
brbcoding

Node.js v4.0.0で多くの/ほとんどのES6機能をbabelなしで使用できるようになりました。ただし、明らかに「インポート」はまだサポートされていません。参照： https://nodejs.org/en/docs/es6/

Edit：ほとんどの一般的なES6機能（構造化と拡散を含む）はNodeJS 5.0でデフォルトでサポートされています（上記のリンクを参照）。私の知る限り、ES6モジュールのようです。

6
thom_nic

babel-nodeとネイティブgulpを使用します。

  1. babelおよびgulpをdevDependenciesとしてインストールします。
  2. gulpfile.jsをES6構文で記述します。
  3. ./node_modules/.bin/babel-node ./node_modules/.bin/gulpコマンドを使用して、gulpを実行します
  4. Package.json scriptsセクションでは、最初の./node_modules/.bin/部分をbabel-node ./node_modules/.bin/gulpとしてスキップできます。

この方法の利点は、node.jsがいつかES6のすべての機能をサポートするときに、babelランタイムをオプトアウトするために必要なのは、babel-nodeをnodeに置き換えることだけです。以上です。

2
Junle Li

基本的に、npmを使用してインストールする必要があるのは、gulp、gulp-babel、およびbabel-resent-envです。.babelrcプリセット配列に「env」を追加し、使用しますgulpfile.babel.jsファイル。

npm install gulp-babel --save-dev

いくつかの答えはbabel-core、babel-preset-es2015などに言及しました。バベルの役人セットアップガイドとGulpはgulp-babelのみを使用しますが、gulp-babelにはbabel-coreを含む依存関係モジュールがあるため、個別にインストールする必要はありません。

プリセットについては、プリセットを使用してBabelに実際に何かをさせる必要があります。これはPreset Envと呼ばれます。サポートされている環境に基づいて必要なBabelプラグイン。

npm install babel-preset-env --save-dev

および.babelrcファイル

{
  "presets": ["env"]
}
1
zhe

Es6でgulpfileのコードを開発するための手順：

  • npm install gulp && Sudo npm install gulp -g。
  • 更新されたバージョンのGulpを使用していることを確認してください。この回答を書いている時点での現在のバージョンは3.9.1でした。インストールされているgulpのバージョンを確認するには、gulp -v
  • npm install babel-core babel-preset-es2015-without-strict --save-dev
  • タイプtouch .babelrcターミナルで

  • .babelrcファイルで、このコードを追加します

    { "presets": ["es2015-without-strict"] }

  • gulpfile.babel.jsという名前でgulp構成ファイルを作成しました

  • 出来上がり!!! ES6でgulpの構成コードを作成できるようになりました。

出典：GulpでES6を使用-マークグッドイヤー

0
rash.tay

Gulpの最新バージョンとGulp CLIを使用している場合は、Gulpfile.babel.jsを実行するだけで、デフォルトでBabelJSを使用してES6 gulpfileを理解および変換できます。

Gulpと同様に、devDependenciesの下にBabelJSトランスパイラーをインストールすることも重要です。

npm install --save-dev babel

また、このコンテキストでgulpを要求するために、index.jsをインポートする必要がないことに注意してください。

import gulp from 'gulp';
0
BTC