wake-up-neo.com

Kann man in es6 ein gulpfile schreiben?

Question: Wie kann ich meine Gulp-Datei in ES6 schreiben, damit ich import anstelle von require und =>-Syntax über function() verwenden kann? 

Ich kann io.js oder einen beliebigen Knoten verwenden.


gulpfile.js:

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

enter image description here

Fehler:

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

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

Innerhalb von node_modules/gulp/bin/gulp.js habe ich die erste Zeile in #!/usr/bin/env node --harmony geändert, wie in diesem stack gefragt

28
Matthew Harwood

Ja, Sie können mit babel .

Stellen Sie sicher, dass Sie die neueste Version des gulp-cli haben.

npm install -g gulp-cli

Installieren Sie babel als Abhängigkeit vom Projekt.

npm install --save-dev babel

Umbenennen von gulpfile.js in gulpfile.babel.js

Ihre Gulpfile könnte ungefähr so ​​aussehen: 

import gulp from 'gulp';

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

Update für Babel 6.0+ Wie von Eric Bronniman richtig hervorgehoben, sind einige zusätzliche Schritte erforderlich, um dies mit der neuesten Version von babel zu erreichen. Hier sind diese Anweisungen: 

Vergewissern Sie sich erneut, dass Sie die neueste Version von gulp-cli haben
npm install -g gulp-cli 

Installieren Sie dann gulp, babel core und die es2015-Voreinstellungen
npm install --save-dev gulp babel-core babel-preset-es2015 

Fügen Sie dann entweder einer .babelrc-Datei oder Ihrer package.json Folgendes hinzu:

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

Ihr gulpfile.js sollte gulpfile.babel.js heißen.

44
brbcoding

Hinweis: Sie können jetzt viele/die meisten ES6-Funktionen in Node.js v4.0.0 ohne Bezeichner verwenden. Anscheinend wird "Import" jedoch immer noch nicht unterstützt. Siehe: https://nodejs.org/de/docs/es6/

Edit: Die meisten der populären ES6-Funktionen (einschließlich Destructuring und Spread) werden standardmäßig in NodeJS 5.0 unterstützt (siehe Link oben). Das einzige fehlende Feature scheint, soweit ich das beurteilen kann, ES6-Module zu sein. 

6
thom_nic

Ich benutze babel-node und native gulp.

  1. Installieren Sie babel und gulp als devDependencies.
  2. Schreiben Sie gulpfile.js mit der ES6-Syntax.
  3. Verwenden Sie den Befehl ./node_modules/.bin/babel-node ./node_modules/.bin/gulp, um gulp auszuführen
  4. In package.json scripts können Sie den ersten ./node_modules/.bin/-Teil überspringen - als babel-node ./node_modules/.bin/gulp.

Der Vorteil dieses Ansatzes besteht darin, eines Tages, wenn die node.js eines Tages alle ES6-Funktionen unterstützt. Alles, was Sie zum Deaktivieren der Babel-Laufzeit benötigen, ist, babel-node durch node zu ersetzen. Das ist alles.

2
Junle Li

Grundsätzlich müssen Sie mit npmgulp, gulp-babel und babel-resent-env installieren. Fügen Sie dem .babelrc-Presets-Array "env" hinzu und verwenden Sie eine Datei gulpfile.babel.js.

npm install gulp-babel --save-dev

Einige der erwähnten Antworten babel-core, babel-preset-es2015 usw. Der offizielle - Setup-Leitfaden von Babel mit Gulp verwendet nur gulp-babel, während gulp-babel Abhängigkeiten-Module einschließlich babel-core enthält, sodass Sie sie nicht separat installieren müssen. 

Über Presets müssen Sie ein Preset verwenden, damit Babel tatsächlich etwas tut, das Preset Env genannt wird und automatisch die von Ihnen unterstützten Babel-Plugins auf der Grundlage Ihrer unterstützten Umgebungen ermittelt.

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

und in .babelrc-Datei

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

Schritte, die ich für die Entwicklung des Codes für gulpfile in es6 befolgt habe:

  • npm install gulp && Sudo npm install gulp -g.
  • Bitte stellen Sie sicher, dass Sie die aktualisierte Version von Gulp ..__ verwenden. Die aktuelle Version zum Zeitpunkt der Erstellung dieser Antwort war 3.9.1. Geben Sie gulp -v ein, um zu überprüfen, welche Version von gulp installiert ist.
  • npm install babel-core babel-preset-es2015-without-strict --save-dev
  • Geben Sie touch .babelrc in das Terminal ein
  • Fügen Sie in der .babelrc-Datei diesen Code hinzu 

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

  • Erstellt die gulp-Konfigurationsdatei mit dem Namen gulpfile.babel.js

  • Voila !!! Sie können jetzt den Konfigurationscode für gulp in ES6 schreiben.

Source:Verwenden von ES6 mit Gulp - Mark Goodyear

0
rash.tay

Wenn Sie die modernste Version von Gulp und die Gulp-CLI verwenden, können Sie einfach Gulpfile.babel.js ausführen, und Ihre ES6-Gulpfile wird standardmäßig mit BabelJS verstanden und transpiliert.

Es ist auch wichtig, dass der BabelJS-Transpiler wie auch Gulp unter devDependencies installiert ist:

npm install --save-dev babel

Beachten Sie auch, dass Sie in diesem Kontext nicht unbedingt den index.js importieren müssen, sondern nur Folgendes:

import gulp from 'gulp';
0
BTC