Возможно ли написать gulpfile в es6?

Вопрос: Как написать файл gulp в ES6, чтобы я мог использовать import вместо require и использовать синтаксис => поверх function()?

Я могу использовать io.js или node любую версию.

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 я изменил первую строку на #!/usr/bin/env node --harmony, как задано в stack

Ответы

Ответ 1

Да, вы можете использовать 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 + Как правильно указал Эрик Бронниман, есть несколько дополнительных шагов, связанных с тем, чтобы это работало с последней версией babel. Вот инструкции:

Опять же, убедитесь, что у вас есть последняя версия gulp -cli
npm install -g gulp-cli

Затем установите gulp, ядро ​​babel и пресеты es2015
npm install --save-dev gulp babel-core babel-preset-es2015

Затем добавьте следующее в файл .babelrc или в свой пакет package.json

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

Ваш gulpfile.js должен быть назван gulpfile.babel.js

Ответ 2

Обратите внимание, что теперь вы можете использовать множество/большинство функций ES6 в Node.js v4.0.0 без babel. Однако, видимо, "импорт" по-прежнему не поддерживается. См.: https://nodejs.org/en/docs/es6/

Изменить. Большинство популярных функций ES6 (включая деструктурирование и распространение) поддерживаются по умолчанию в NodeJS 5.0 (см. ссылку выше). Единственная основная недостающая функция - это модули ES6, насколько это возможно Я могу сказать.

Ответ 3

Я использую babel-node и native gulp.

  • Установите babel и gulp как devDependencies.
  • Напишите gulpfile.js с синтаксисом ES6.
  • Использовать команду ./node_modules/.bin/babel-node ./node_modules/.bin/gulp для запуска gulp
  • В разделе package.json scripts вы можете пропустить первую часть ./node_modules/.bin/ - как babel-node ./node_modules/.bin/gulp.

Преимущество этого приложения заключается в том, что в один прекрасный день, когда node.js поддерживает все функции ES6 в один прекрасный день, все, что вам нужно, чтобы отключить время загрузки babel, заключается в замене babel-node на node. Это все.

Ответ 4

В основном то, что вам нужно установить с помощью npm, это gulp, gulp-babel и babel-resent-env, добавить "env" в ваш массив пресетов .babelrc и использовать файл gulpfile.babel.js.

npm install gulp-babel --save-dev

Некоторые из ответов упомянуты babel-core, babel-preset-es2015 и т.д. Официальное руководство Babel руководство по настройке с Gulp следует использовать только gulp-babel, тогда как gulp-babel имеет модули зависимостей, включая babel-core, поэтому вам не нужно устанавливать его отдельно.

В предустановке вам нужно использовать пресет, чтобы заставить Babel на самом деле что-то сделать, что называется Preset Env, который автоматически определяет плагины Babel, которые вам нужны, на основе поддерживаемых сред.

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

и в .babelrc файле

{
  "presets": ["env"]
}

Ответ 5

Если вы используете самую современную версию Gulp и Gulp CLI, вы можете просто сделать Gulpfile.babel.js, и по умолчанию он будет понимать и пересылать ваш gulpfile ES6 с помощью BabelJS.

Также важно, чтобы транспилятор BabelJS был установлен под devDependencies, как есть Gulp:

npm install --save-dev babel

Также обратите внимание, что для использования Gulp в этом контексте вам не нужно импортировать index.js, вы можете просто:

import gulp from 'gulp';

Ответ 6

Шаги, которые я выполнил для разработки кода для gulpfile в es6:

  • 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"] }

  • Создал конфигурационный файл gulp с именем gulpfile.babel.js

  • Вуаля!!! Теперь вы можете написать код конфигурации для gulp в ES6.

Источник: Использование ES6 с gulp - Mark Goodyear