Безболезненный переход с обычного AMD на Babel + AMD?
 

Решил перевести большой проект на ES6, используя babel + AMD для модулей. Проект состоит из сотен файлов, которые затем собираются с помощью r.js и других инструментов в один цельный HTML. Поэтому я решил делать переход постепенно.

Проблема в том, что Бабел полностью ломает текущий код, заставляя менять всё сразу.

1. Добавляет вызов define. Такой код:

define(["x", "y"], function() { ... });

Превращается в такой:

define(["exports"], function (exports) {
  define(["x", "y"], function() { ... });
});

Кто знаком с AMD знает, что этот код не работает.

2. Скрипты сейчас запрашивают HTML темплейты с помощью requirejs плагина text. Как избежать лапши в коде и, в то же время, позволить r.js собирать проект (т. е. инлайнить HTML в JS для продакшна)?

С Бабелем можно использовать различные системы сборки.
Отчасти твой вопрос уже обсуждался здесь.
В данный момент я остановился на webpack. Кстати, сегодня залил пример использования babel+webpack на гитхаб.

Чуть больше месяца юзаю es6 - полет не просто нормальный, офигенный! :)
Как сказал kobezzza: "es5 забыть как страшный сон")))

Пока что я решил просто копировать .js файлы, a ES6 хранить в .es файлах. Вопрос актуален только для запроса HTML (и других не-js файлов). Если менять систему сборки, прийдется перелопатить весь проект.

А это
не одно и тоже?

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

изначально я думал об этом же. Только с расширением .es6

Не одно и то же. Я пытаюсь сохранить совместимость со старым кодом.

аналогично. хорошо, что эти парни сделали распознавание JSX. цены им нет за это :)

FinoM, не пробовал собирать проект через webpack?

Решил перейти с 6to5 на babel и проект пересал собираться. :(

Настроил как тут сказано https://babeljs.io/docs/using-babel/#webpack и все равно выпадает. Кто-то сталкивался с подобным?

Они там что-то поменяли, после появления вот этого obj && obj.__esModule: return obj ? obj["default"] : obj;

да, это модули ES6. тоже спотыкнулся на этом
нужно делать импорт и экспорт в одном стиле - т.е. либо ES6, либо CJS

Заинлайнил html :)

melky, слушай, у меня вопрос. Можно ли сделать так, чтобы во время сборки вместо текстовой переменной подставлялось читалось и подставлялось имя текущего файла (без расширения)?
Сейчас приходится руками писать, не очень удобно https://yadi.sk/i/NMa01ZeteqKf8

я как знал))) Пишу все в es6 стиле =)

webpack немножко инъекцирует фишки nodejs в файлы фронтенда.

тебе имя файла нужно? попробуй __filename
http://webpack.github.io/docs/configuration.html#node


это из-за именнованных импортов\экспортов, походу, такое сделали...

возвращает

/index.js

а у меня оно совсем другое :)

Ну и ладно. Все равно симпатично https://yadi.sk/i/-wOKWr2HeqLL4 =)

У меня в одном стиле.

На странице подключаю реакт. Собираю без реакт.

Падает в React.render(React. Реакт подкючен, а ошибка все равно Uncaught TypeError: object is not a function

При сборке ошибок нет, на странице падает. В клоне проекта 6to5 все ок. Хз что это такое..ю

Упс. Бабель не трансформирует jsx.

он и не должен (насколько я понимаю). Лоадер подключи https://github.com/petehunt/jsx-loader

http://webpack.github.io/docs/list-o...tml#templating

А это тогда что? https://babeljs.io/docs/usage/jsx/

Походу кривой в Babel-e сборщик jsx. Он мне компонент собирает как элемент дом.

React.render(React.DOM(AvatarBlock, null)

вместо:

React.render(React.createElement(AvatarBlock

Либо я в жизни чего-то не понимаю, либо Babel резко отсырел :( Нехоцица откатываться назад... :'(

Всё, терпение лопнуло, откат на 6to5 и полгода жду пока не исправят.

лучше бы issue написал https://github.com/babel/babel/issues
помог бы не только себе, но и остальным =)

у меня все нормально... очень странная ошибка

Помочь всегда приятно :)
Разобрался в чём проблема. Нужно убрать комментарий

/** @jsx React.DOM */

в верху старницы.

ЭЭ, пропустил я http://facebook.github.io/react/blog...pragma-is-gone что не нужно писать больше коммент. babel думает что все React.DOM и конвертит не так как нужно, не знаю почему, кто знает напишите. То, что компоненты с большой буквы его как-то не трогает.

жжошь :)

это было написано в блоге реакта по поводу обновления версии на 0.12... я помню тогда до утра сидел и проект поправлял, ска

а сейчас они выпустили 0.13, да. но мне лень опять все 300 компонентов поправлять :cray:

Когда что-то пишешь, привыкаешь, что совместимость обратная есть, а она НА тебе из-за угла подножку.

Решил юзать такой вот говнокод для запрашивания не-яваскриптов.

import TEMPLATE from 'require/text!templates/message.html';

Почему ты это называешь говно-кодом? Обычная загрузка модуля

Если я правильно понимаю, когда имплементируют модули в браузерах, такой код не будет работать без компилятора.

скорее всего ты понимаешь правильно. Помимо .html у меня еще для .json лоадеры настроены. Не исключаю, что в будущем еще-что-н-ть потребуется.

Вопрос в том, нужна ли нативная подгрузка такого кол-ва файлов, которые несжаты, неоптимизированы и прочее

я сегодня в аське на вопрос зачем нужна сборка ответил следующее

nerv_, ну понятно, что для продакшна нужно клеить файлы. Просто мне непривычно запускать grunt watch при разработке, я привык работать вообще без вотчеров (за исключением компасса).

ты в IDE пишешь? В [Php|Web]Storm встроено управление грантом.

Не, в редакторе Kate.

И без ноды и препроцессоров... ?

Это блокнот который? Катю очень удобно использовать как regexpEditor, как ты в ней проект собираешь?

раньше и es6 не было, и модулей не знали ... и трава была зеленей :)
проникся! ухуху!

... а теперь допили angular-module-loader (для webpack), чтобы он подхватывал зависимости из DI ангуляра и будет полнейшее счастье (гарантирую... на 90%)

Ты, как обычно, зришь в корень :) А плюсы на форуме, опять-таки, не работают)

Уже написаны лоадеры, я смотрел
https://github.com/teux/ng-cache-loader
https://github.com/WearyMonkey/ngtemplate-loader
но это не то)

И плагины написаны
https://github.com/olov/ng-annotate
https://github.com/stackfull/angular-webpack-plugin
При быстром знакомстве, первый не подходит)

На данный момент печалит, что все модули для ангуляра приходится заворачивать в функции по причине DI ангуляра. В результате чего импорт выглядит через ж*пу) https://yadi.sk/i/wlIvWRzOeu3TE Пока не придумал, что с этим делать :(

По мне так она только начала зеленеть с приходом es6 и веб-пака =)

Блин, вы так нахваливаете веб-пак, что я уже просто обязан его посмотреть :) Но если вкратце: что он делает (помимо склейки файлов)?

Ну, он это делает хорошо :)

Ну это понятно, но вот как у меня сейчас:

1) Проект собирается babel + browserify
2) Библиотеки собираются через Monic (т.к. там можно удобно ставить зависимости и условия, для кастомной сборки библиотеки, например, https://github.com/kobezzza/Collecti...ster/builds.js)

Как я понимаю, web-pack это именно сборщик проекта, а не библитеки (поправьте меня, если я не прав). Т.е. чем схема с web-pack лучше browserify ?

В ней - никак. Собираю через консоль.

http://javascript.ru/forum/offtopic/...tml#post352114

это если совсем вкратце)

Я так и не понял, зачем мне вебпак :)