Javascript-форум (https://javascript.ru/forum/)
-   Оффтопик (https://javascript.ru/forum/offtopic/)
-   -   Безболезненный переход с обычного AMD на Babel + AMD? (https://javascript.ru/forum/offtopic/53878-bezboleznennyjj-perekhod-s-obychnogo-amd-na-babel-amd.html)

FINoM 22.02.2015 16:42

Безболезненный переход с обычного 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 для продакшна)?

nerv_ 22.02.2015 17:55

Цитата:

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

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

nerv_ 22.02.2015 18:04

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

FINoM 22.02.2015 18:36

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

nerv_ 22.02.2015 21:45

Цитата:

Сообщение от FINoM
Если менять систему сборки, прийдется перелопатить весь проект

А это
Цитата:

Сообщение от FINoM
Решил перевести большой проект на ES6

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

Цитата:

Сообщение от FINoM
т. е. инлайнить HTML в JS для продакшна

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

Цитата:

Сообщение от FINoM
a ES6 хранить в .es файлах

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

FINoM 22.02.2015 21:51

Цитата:

Сообщение от nerv_
не одно и тоже?

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

melky 22.02.2015 22:26

Цитата:

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

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

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

Gozar 22.02.2015 22:35

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

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

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

melky 22.02.2015 22:41

Цитата:

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

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

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

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

nerv_ 22.02.2015 22:49

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

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

Цитата:

Сообщение от Gozar
Решил перейти с 6to5 на babel и проект пересал собираться

Цитата:

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

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

melky 22.02.2015 22:52

Цитата:

Сообщение от nerv_ (Сообщение 357836)
Заинлайнил html :)

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

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

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


Цитата:

Сообщение от nerv_ (Сообщение 357836)
я как знал))) Пишу все в es6 стиле =)

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

nerv_ 22.02.2015 22:57

Цитата:

Сообщение от melky
тебе имя файла нужно? попробуй __filename

возвращает
/index.js

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

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

Gozar 22.02.2015 23:03

Цитата:

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

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

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

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

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

Gozar 22.02.2015 23:55

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

nerv_ 22.02.2015 23:59

Цитата:

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

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

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

Gozar 23.02.2015 00:00

Цитата:

Сообщение от nerv_
он и не должен

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

Gozar 23.02.2015 00:06

Походу кривой в Babel-e сборщик jsx. Он мне компонент собирает как элемент дом.
React.render(React.DOM(AvatarBlock, null)

вместо:

React.render(React.createElement(AvatarBlock

Gozar 23.02.2015 00:07

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

Gozar 23.02.2015 00:22

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

nerv_ 23.02.2015 09:41

Цитата:

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

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

melky 23.02.2015 11:39

Цитата:

Сообщение от Gozar (Сообщение 357852)
Упс. Бабель не трансформирует jsx.

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

Gozar 23.02.2015 11:49

Цитата:

Сообщение от nerv_
помог бы не только себе, но и остальным

Помочь всегда приятно :)
Разобрался в чём проблема. Нужно убрать комментарий
/** @jsx React.DOM */
в верху старницы.

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

melky 23.02.2015 12:12

Цитата:

Сообщение от Gozar (Сообщение 357919)
Помочь всегда приятно :)
Разобрался в чём проблема. Нужно убрать комментарий
/** @jsx React.DOM */
в верху старницы.

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

жжошь :)

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

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

Gozar 23.02.2015 12:43

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

FINoM 25.02.2015 19:49

Решил юзать такой вот говнокод для запрашивания не-яваскриптов.
import TEMPLATE from 'require/text!templates/message.html';

nerv_ 25.02.2015 21:58

Цитата:

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

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

FINoM 25.02.2015 22:00

Цитата:

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

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

nerv_ 25.02.2015 22:15

Цитата:

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

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

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

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

Цитата:

25.02.2015 15:16:09 nerv: вот почему нужна сборка:
модуль нобеля для цен https://yadi.sk/i/uCU3YRJOet5sN
инсайдер (еще будет расти) https://yadi.sk/i/wlVIW1g5et637

FINoM 25.02.2015 22:19

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

nerv_ 25.02.2015 22:22

Цитата:

Сообщение от FINoM
Просто мне непривычно запускать grunt watch при разработке, я привык работать вообще без вотчеров (за исключением компасса)

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

FINoM 25.02.2015 23:01

Цитата:

Сообщение от nerv_
ты в IDE пишешь?

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

Gozar 26.02.2015 01:55

Цитата:

Сообщение от FINoM
я привык работать вообще без вотчеров

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

Цитата:

Сообщение от FINoM
в редакторе Kate.

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

melky 26.02.2015 11:30

Цитата:

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

раньше и es6 не было, и модулей не знали ... и трава была зеленей :)
Цитата:

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

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

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

проникся! ухуху!

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

nerv_ 26.02.2015 11:56

Цитата:

Сообщение от melky
а теперь допили 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 Пока не придумал, что с этим делать :(

Цитата:

Сообщение от melky
раньше и es6 не было, и модулей не знали ... и трава была зеленей

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

kobezzza 26.02.2015 12:05

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

Gozar 26.02.2015 12:10

Цитата:

Сообщение от kobezzza
что он делает (помимо склейки файлов)?

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

kobezzza 26.02.2015 12:22

Цитата:

Сообщение от Gozar (Сообщение 358543)
Ну, он это делает хорошо :)

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

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

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

FINoM 26.02.2015 13:08

Цитата:

Сообщение от Gozar
как ты в ней проект собираешь?

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

melky 26.02.2015 16:21

Цитата:

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

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

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

kobezzza 26.02.2015 17:30

Цитата:

Сообщение от melky (Сообщение 358581)
http://javascript.ru/forum/offtopic/...tml#post352114

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

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


Часовой пояс GMT +3, время: 20:25.