Какие инструменты мне нужны для использования импорта стиля ES6 для моего проекта с использованием Gulp?

Question

У меня есть проект, который использует Gulp для компиляции SASS и минимизации JS и т. Д. (На основе Drupal).

Я хотел бы использовать импорт стиля ES6, а также иметь возможность импортировать модули, которые расположены в node_modules без ссылки на полный путь (например, импортировать модуль lodash.debounce в

import throttle from 'lodash.throttle' 

Что я (кроме Gulp и NPM). Babel? Browserify? Lost со всеми инструментами.

Я бы хотел избежать webpack, так как это увеличило бы сложность моего проекта (и я не знаю, Я могу использовать его параллельно с тем, как Drupal 7 делает вещи)

Answer 1

Да, вы хотите babel. Документация по настройке в вашем файле gulp приведена здесь: http://babeljs.io/docs/setup/#installation

Чтобы включить синтаксис импорта, вы должны использовать предустановку es2015.

var gulp = require("gulp"); 
var babel = require("gulp-babel"); 

gulp.task("default", function() { 
    return gulp.src("src/app.js") 
    .pipe(babel({ 
     presets: ['es2015'] 
    })) 
    .pipe(gulp.dest("dist")); 
}); 

Answer 2

Для использования import вам нужен transpiler, например, Бабеля. Предполагая, что вы создаете код для браузера, тогда для использования import (transpiled to require) вам нужен веб-пакет или браузер, который также позволит вам импортировать из node_modules (есть и другие модули-сборщики, jspm и systemjs, однако я знаю следующее - Ничего о них). Для любого из них вам также потребуется что-то, что позволит использовать babel в процессе сборки. Я использую webpack с babel-loader.

Я нашел полезную ссылку here специально для использования модулей ES6 с webpack.