web-dev-qa-db-fra.com

Est-il possible d'écrire un fichier gulp dans es6?

Question: Comment puis-je écrire mon fichier gulp dans ES6 pour pouvoir utiliser import au lieu de require et utiliser la syntaxe => avec function()? 

Je peux utiliser io.js ou node avec n'importe quelle version.

gulpfile.js:

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

enter image description here

Les erreurs:

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

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

Dans le node_modules/gulp/bin/gulp.js, j'ai changé la première ligne en #!/usr/bin/env node --harmony comme demandé dans cette pile stack

javascriptnode.jsgulpecmascript-6
28
Matthew Harwood

Oui, vous pouvez utiliser babel .

Assurez-vous de disposer de la dernière version du gulp-cli.

npm install -g gulp-cli

Installez babel en tant que dépendance du projet.

npm install --save-dev babel

Renommez gulpfile.js en gulpfile.babel.js

Votre gulpfile pourrait ressembler à ceci: 

import gulp from 'gulp';

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

Mise à jour pour Babel 6.0+ Comme l'a bien souligné Eric Bronniman , quelques étapes supplémentaires sont nécessaires pour que cela fonctionne avec la dernière version de babel. Voici ces instructions: 

Encore une fois, assurez-vous d'avoir la dernière version de gulp-cli
npm install -g gulp-cli 

Puis installez gulp, babel core et les préréglages es2015
npm install --save-dev gulp babel-core babel-preset-es2015 

Ensuite, ajoutez les éléments suivants à un fichier .babelrc ou à votre package.json

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

Votre gulpfile.js devrait être nommé gulpfile.babel.js

44
brbcoding

Notez que vous pouvez maintenant utiliser beaucoup/la plupart des fonctionnalités ES6 dans Node.js v4.0.0 sans babel. Cependant, apparemment, "import" n'est toujours pas pris en charge. Voir: https://nodejs.org/en/docs/es6/

Edit: la plupart des fonctionnalités ES6 populaires (y compris la déstructuration et la propagation) sont prises en charge par défaut dans NodeJS 5.0 (voir le lien ci-dessus.) La seule fonctionnalité manquante semble être les modules ES6, à ma connaissance. 

6
thom_nic

J'utilise babel-node et gulp native.

  1. Installez babel et gulp en tant que devDependencies.
  2. Écrivez gulpfile.js avec la syntaxe ES6.
  3. Utilisez la commande ./node_modules/.bin/babel-node ./node_modules/.bin/gulp pour exécuter gulp
  4. Dans la section package.json scripts, vous pouvez ignorer la première partie ./node_modules/.bin/ - en tant que babel-node ./node_modules/.bin/gulp.

L'avantage de cette approche est qu'un jour, lorsque le fichier node.js prend en charge toutes les fonctionnalités de l'ES6, il vous suffit de désactiver le runtime babel pour remplacer babel-node par node. C'est tout.

2
Junle Li

Fondamentalement, ce que vous devez installer à l'aide de npm est gulp, gulp-babel et babel-resent-env, ajoutez "env" à votre tableau de presets .babelrc et utilisez un fichier gulpfile.babel.js.

npm install gulp-babel --save-dev

Certaines des réponses mentionnées babel-core, babel-preset-es2015, etc. Babel officiel GUIDE D'INSTALLATION avec Gulp n'utilise que gulp-babel, alors que gulp-babel possède des modules de dépendances comprenant babel-core; vous n'avez donc pas besoin de l'installer. séparément. 

À propos des préréglages, vous devez utiliser un préréglage pour obliger Babel à faire quelque chose, appelé ENV PRÉDÉFINI, qui détermine automatiquement les plug-ins Babel dont vous avez besoin en fonction des environnements pris en charge.

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

et dans le fichier .babelrc

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

Les étapes que j'ai suivies pour développer le code pour gulpfile dans es6:

  • npm install gulp && Sudo npm install gulp -g.
  • Veuillez vous assurer que vous utilisez la version mise à jour de Gulp . La version actuelle au moment de la rédaction de cette réponse était 3.9.1. Pour vérifier quelle version de gulp est installée, tapez gulp -v
  • npm install babel-core babel-preset-es2015-without-strict --save-dev
  • Tapez touch .babelrc dans le terminal

  • Dans le fichier .babelrc, ajoutez ce code 

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

  • Création du fichier de configuration gulp avec le nom gulpfile.babel.js

  • Voila !!! Vous pouvez maintenant écrire le code de configuration pour gulp dans ES6.

Source:Utiliser ES6 avec Gulp - Mark Goodyear

0
rash.tay

Si vous utilisez les versions les plus modernes de Gulp et de la CLI Gulp, il vous suffit de faire Gulpfile.babel.js pour comprendre et transcrire par défaut votre fichier gulp ES6 avec BabelJS.

Il est également important d’installer le transpiler BabelJS sous devDependencies comme Gulp:

npm install --save-dev babel

Notez également que pour exiger gulp dans ce contexte, vous n'avez pas à importer le index.js, vous pouvez simplement:

import gulp from 'gulp';
0
BTC