Структура проекта на Vue.JS. Обязательно ли использовать Babel, Webpack?

Question

[Артем]

Здравствуйте.

Пытаюсь разобраться с Vue.JS. Почитал документацию, вроде все понятно, все нравится. Не совсем понял, как лучше организовать структуру проекта, нашел статью, в которой описывается создание приложения на Vue.js с аутентификацией и передачей данных с помощью RestAPI. И тут я ничего не понял. Что за Babel, Webpack, зачем их использовать и обязательно ли это? Опыта в js немного, всегда писал код сразу на javascript, без использования дополнительных плюшек. Модули? Почему нельзя вручную создать директории и файлы?
Т.к. в Vue.js я новичок, меня это только запутывает - непонятно, где используются методы Vue, а где babel. Поделитесь опытом, пожалуйста. Что почитать по этой теме? Желательно на русском, но и английский понимаю (медленно но верно). Спасибо.

UPD: Вопрос по архитектуре проекта на Vue.JS остается открытым.

Answer 1

[Сергей Протько]

Что за Babel, Webpack, зачем их использовать и обязательно ли это?

babel - транслятор ES6+ (текущий стандарт JS + возможность добавлять драфты стандартов) в javascript (ES5). То есть возможность использовать фишки нового стандарта в старых браузерах. С одной стороны использовать его новичку было бы полезно, так как многие вещи из новых стандартов сильно упрощают код. С другой стороны есть риск по неопытности сделать плохо. Но этот риск как бы есть всегда.

webpack - бандлер. Он собирает модули в бандлы (то есть не только JS, но и картинки может в стили заинлайнить а те что сильно большие рядом положить ну и все такое). При этом может разрулить много чего и с ним реально проще жить.

Модули? Почему нельзя вручную создать директории и файлы?

Модули никакого отношения к структуре директорий не имеют. Это нужно для инкапсуляции и изоляции. Примите как аксиому что все глобальное это плохо и стоит избегать оного. Модули локализуют все в локальные области видимости. Ну и управлять зависимостями становится проще.

Гугл. Ищущему да воздастся. Все гуглить по отдельности. И что там в ES6 нового, и про babel, и про webpack (ну тут можно еще отдельно webpack + babel).

Comments

[Артем]

Большое спасибо за столь подробный ответ!
Небольшое уточнение - этот транслятор гарантированно делает рабочий код для старых браузеров? И насколько сильно при этом увеличивается вес файла?
Например, вот это:
import Vue from 'vue'

babel преобразует вот в это:
'use strict';
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _vue = require('vue');
var _vue2 = _interopRequireDefault(_vue);

[Сергей Протько]

Артем: пф... зачем вы переживаете за каждый килобайт? Нормально настроенный кэш браузера, gzip и аглификация - и это будут спички по сравнению со скоростью разработки и читабельностью кода.

по поводу "гарантированно" или нет - ну как, он гарантирует что те фичи которые оно может обрабатывать будут работать везде. Но это не полифилы, так что для совместимости конкретных API придется еще дополнительные штуки подключать. babel гарантирует только трансляцию синтаксиса.

Answer 2

[timfcsm]

babel - это транслятор из ES6 в ES5, если пишете на ES6, то да, он обязателен, тк поддержка его в браузерах далеко не полная
webpack - сборщик проектов, долго рассказывать что он может, вот посмотрите learn.javascript.ru/webpack-screencast

Модули? Почему нельзя вручную создать директории и файлы?

их вручную и создают... webpack их наоборот в один файл соберет

Comments

[Артем]

Спасибо за ответ! В итоге у меня получится на продакшн сверстанная страничка плюс один .js файл, тот самый "build.js", я правильно понял? И перед этим он будет преобразован в ES5?