it-swarm.com.ru

Можно ли написать gulpfile в es6?

Вопрос: Как я могу написать свой файл gulp в ES6, чтобы я мог использовать import вместо require и использовать синтаксис => над 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 я изменил первую строку на #!/usr/bin/env node --harmony, как было задано в этом стек

28
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+ Как правильно заметил Эрик Бронниман , есть несколько дополнительных шагов, чтобы заставить это работать с последней версией 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

44
brbcoding

Обратите внимание, что теперь вы можете использовать многие/большинство функций ES6 в Node.js v4.0.0 без использования 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, добавить «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"]
}
1
zhe

Шаги, которые я выполнил для разработки кода для 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 - Марк Гудиер

0
rash.tay

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

Также важно иметь транспортер BabelJS, установленный в devDependencies, как это делает Gulp:

npm install --save-dev babel

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

import gulp from 'gulp';
0
BTC