Безболезненный переход с обычного 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 файлов). Если менять систему сборки, прийдется перелопатить весь проект.
|
Цитата:
Цитата:
Цитата:
Цитата:
|
Цитата:
|
Цитата:
FinoM, не пробовал собирать проект через webpack? |
Решил перейти с 6to5 на babel и проект пересал собираться. :(
Настроил как тут сказано https://babeljs.io/docs/using-babel/#webpack и все равно выпадает. Кто-то сталкивался с подобным? Они там что-то поменяли, после появления вот этого obj && obj.__esModule: return obj ? obj["default"] : obj; |
Цитата:
нужно делать импорт и экспорт в одном стиле - т.е. либо ES6, либо CJS |
Заинлайнил html :)
melky, слушай, у меня вопрос. Можно ли сделать так, чтобы во время сборки вместо текстовой переменной подставлялось читалось и подставлялось имя текущего файла (без расширения)? Сейчас приходится руками писать, не очень удобно https://yadi.sk/i/NMa01ZeteqKf8 Цитата:
Цитата:
|
Цитата:
тебе имя файла нужно? попробуй __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.
|
Цитата:
http://webpack.github.io/docs/list-o...tml#templating |
Цитата:
|
Походу кривой в Babel-e сборщик jsx. Он мне компонент собирает как элемент дом.
React.render(React.DOM(AvatarBlock, null) вместо: React.render(React.createElement(AvatarBlock |
Либо я в жизни чего-то не понимаю, либо Babel резко отсырел :( Нехоцица откатываться назад... :'(
|
Всё, терпение лопнуло, откат на 6to5 и полгода жду пока не исправят.
|
Цитата:
помог бы не только себе, но и остальным =) |
Цитата:
|
Цитата:
Разобрался в чём проблема. Нужно убрать комментарий /** @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'; |
Цитата:
|
Цитата:
|
Цитата:
Вопрос в том, нужна ли нативная подгрузка такого кол-ва файлов, которые несжаты, неоптимизированы и прочее я сегодня в аське на вопрос зачем нужна сборка ответил следующее Цитата:
|
nerv_, ну понятно, что для продакшна нужно клеить файлы. Просто мне непривычно запускать grunt watch при разработке, я привык работать вообще без вотчеров (за исключением компасса).
|
Цитата:
|
Цитата:
|
Цитата:
Цитата:
|
Цитата:
Цитата:
... а теперь допили 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 Пока не придумал, что с этим делать :( Цитата:
|
Блин, вы так нахваливаете веб-пак, что я уже просто обязан его посмотреть :) Но если вкратце: что он делает (помимо склейки файлов)?
|
Цитата:
|
Цитата:
1) Проект собирается babel + browserify 2) Библиотеки собираются через Monic (т.к. там можно удобно ставить зависимости и условия, для кастомной сборки библиотеки, например, https://github.com/kobezzza/Collecti...ster/builds.js) Как я понимаю, web-pack это именно сборщик проекта, а не библитеки (поправьте меня, если я не прав). Т.е. чем схема с web-pack лучше browserify ? |
Цитата:
|
Цитата:
это если совсем вкратце) |
Цитата:
|
Часовой пояс GMT +3, время: 20:25. |