• Webpack? Но зачем?

    @uniquenicknqame
    Вебпак должен умереть.
    Особенно на больших проектах.
    Вот только что от него отказался в пользу галпа, который хоть и говно, но не такое вонючее как вебпак.

    Для мелких, домашних проектов может и подойдет и вебпак, но он просто очень уж много на себя берет и очень уж много делает "предположений как его оно сделать лучше ибо тупой фронтендер сам не знает".

    Так что галп и ручное написание задач под него (памятуя о внезапной асинхронности, нодовских потоках итп, но с этим вы столкнетесь на нетривиальных проектах)
    Ответ написан
    4 комментария
  • Как из одной папки запустить два webpack сервера?

    @vvkovaliov
    в webpack.config.js
    switch (process.env.NODE_ENV) {
      case 'prod':
      case 'production':
        module.exports = require('./config/webpack.prod');
        break;
      case 'test':
      case 'testing':
        module.exports = require('./config/webpack.test');
        break;
      case 'dev':
      case 'development':
      default:
        module.exports = require('./config/webpack.dev');
    }


    и запускаешь с ключами.
    Ответ написан
    Комментировать
  • Как из одной папки запустить два webpack сервера?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Принцип такой:
    1) узнаете как запустить вебпак с необходимым конфигом
    подсказка:
    webpack --config './path/to/config'
    2) вписываете в package.json в секцию scripts, например:
    "server1": "webpack --config './path/to/config'"

    затем npm run server1

    p.s. в секцию scripts можно вписать любую команду, которую вы можете выполнить в терминале.
    Ответ написан
    Комментировать
  • Как в вебпаке раскидать файлы на выходе в разные папки?

    Выглядит конечно стремно, но работает.
    entry: {
      'dist/one/bundle': './src/one.js',
      'dist/two/bundle': './src/two.js'
    },
    output: {
      path: './',
      filename: '[name].js'
    }
    Ответ написан
    Комментировать
  • Как сделать чтобы webpack давал разный хэш?

    AMar4enko
    @AMar4enko
    Поставьте просто hash вместо chunkhash
    Ответ написан
    1 комментарий
  • Как добавить UMD только для одной точки входа?

    @blolg Автор вопроса
    Решением является multiple configurations
    Ответ написан
    Комментировать
  • Как передать backend переменную в модуль WebPack на frontend'e?

    Пишите переменную в json файл, а в скрипте подключайте.
    Ответ написан
    Комментировать
  • Как дождаться отработки WebPack?

    @vsuhachev
    import webpack from 'webpack'
    
    const webpackConfig = { ... }
    
    const webpackCompile = config => new Promise((resolve, reject) => {
      webpack(config, (err, stats) => err ? reject(err) : resolve(status))
    });
    
    webpackCompile(webpackConfig)
      .then((status) => {
        alert('OK')
      })
      .catch((err) => {
        alert('ERR')
      })
    Ответ написан
    Комментировать
  • Почему в системах событий по паттерну "Издатель-подписчик" используются строки для идентификации событий?

    k12th
    @k12th
    console.log(`You're pulling my leg, right?`);
    Потому что связь подписчиков с событием осуществляется путем помещения массива функций-обработчиков в хэш под ключом, который является именем события (или канала, если речь о pubsub). Это самый простой и очевидный механизм. С появлением Map из ES2015 ключом может служить любой объект, не только строка.

    Один из способов избавиться от т.н. «stringly typed» кода — использовать конструкции типа
    chrome.browserAction.onClicked.addListener(function callback)
    , как сделано в хромовских расширениях.

    Я полагаю, ваш подход имеет право на жизнь (и мне он нравится даже больше гуглохромовского). Но, боюсь, широкого распространения он не получит.
    Ответ написан
    1 комментарий
  • Что выбрать для SPA?

    liubko
    @liubko
    EDIT:
    сделал boilerplate
    ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ----

    React, Fluxxor, react-router, flowtype, webpack, babeljs, axios

    структура:
    --app/
    ----actions/
    ------index.js
    ------Article.js
    ----api/
    ------index.js
    ------Article.js
    ----stores/
    ------index.js
    ------Article.js
    ----pages/
    ------ArticlePage.js
    ------ArticlePage.less
    ----components/
    ------MyComponent.js
    ------MyComponent.less
    ----main.js
    ----router.js
    ----EventConstants.js


    pages/ArticlePage.js:
    var React = require("react/addons");
    var Fluxxor = require("fluxxor");
    
    require("./ArticlePage.less");
    
    var ArticlePage = React.createClass({
      // Компоненты подписываются на изменения в store
      mixins: [
        Fluxxor.FluxMixin(React),
        Fluxxor.StoreWatchMixin("article")
      ],
    
      getStateFromFlux() {
        // достаем данные из store
        return {
          articles: this.getFlux().store("article").getArticles()
        };
      },
    
      componentWillMount() {
        // вызываем action
        this.getFlux().article.fetch();
      },
    
      render() {
        // render articles
      }
    });
    
    module.exports = ArticlePage;


    action/Article.js:
    var EC = require("../EventConstants");
    var api = require("../api/");
    
    module.exports = {
      fetch() {
        // в api делаем сам запрос к серверу
        return api.article
          .fetch()
          .then(data => {
            this.dispatch(EC.SERVER.RECEIVE_ARTICLES, data.articles);
            return data.articles;
          });
      }
    };


    store/Article.js:
    var Fluxxor = require("fluxxor");
    var EC = require("../EventConstants");
    
    var ArticleStore = Fluxxor.createStore({
      initialize() {
        this._articles = [];
    
        this.bindActions(
          // подписываемся на событие
          EC.SERVER.RECEIVE_ARTICLES, this.handleReceive
        );
      },
    
      /*==========  Getters  ==========*/
      getArticles() {
        return JSON.parse(JSON.stringify(this._articles));
      },
    
      /*==========  handlers  ==========*/
      handleReceive(user) {
        this._articles = user.addresses;
        // Все компоненты которые подписаны на store будут уведомлены
        // в них также визовется getStateFromFlux
        this.emit("change"); 
      },
    });
    
    module.exports = ArticleStore;


    EventConstants.js:
    module.exports = {
      UI: {
        // тут ивенты которые не обращаются к серверу
      },
    
      SERVER: {
        RECEIVE_ARTICLES: "SERVER:RECEIVE_ARTICLES",
      }
    };
    Ответ написан
    Комментировать
  • Как правильно сделать размонтирование элемента (блока) в react.js?

    Laiff
    @Laiff
    Front-end developer
    LB777: Например это может выглядеть так
    var FluxCart = React.createClass({...})
    
    var App = React.createClass({
      render : function () {
        var component = this.state.conditionToRenderCart ? <FluxCart /> : null;
        return (
          <div>
           {component}
          </div>
        )
      }
    })


    В таком случае когда состояние изменится и компонент не будет отрендрен реакт вызовет событие componentWillUnmount
    Ответ написан
    Комментировать
  • Flux&&React вопросы по архитектуре?

    Laiff
    @Laiff
    Front-end developer
    Для начала хочется пару общих слов относительно Flux, все будет зависеть от реализации это архитектуры, то что предлагается непосредственно FB слишком многословно получается и, забегая вперед, возможно с этим ассоциируется многословность из пункта 4.
    В своих проектах на React я использую реализацию Refluxjs одна из самых популярных альтернатив к FB.
    Свои ответы построю как сравнение между реализацией FB и Reflux
    1. По классической схеме да нужно хранилище для этого флага, в Reflux диспетчера центрального нет и события получают только реально заинтересованные слушатели, поэтому такие вещи можно упростить и слушать просто выброс события типа
    mixins : [
      Reflux.listenTo(AActions.toggleOpen, 'onToggleOpen')
    ]

    в котором просто сделать setState с новыми параметрами, если компонентов которые должны будут слушать станет больше одного можно очень легко отрефакторить на хранилище, благодаря миксинам для хранилищ создание хранилища можно уместить в пять строчек кода.
    2. Идея вторая более правильная, и именно в таком виде ее можно реализовать в FB, для Reflux один стор может слушать изменения в другом и соответственно может при необходимости изменять свое внутреннее состояние с возбуждением события
    3. Не обязательно вьюха, просто код который инициализирующий сокеты, для классики это SERVER_EVENT, в Reflux можно прямо в качестве хэндлера события можно экшн навесить
    4. Все зависит от реализации ;) для меня связка React+Reflux+Immutable помноженное на чистые функции очень лаконична и читабельна
    Ответ написан
    4 комментария
  • Вёрстка блока с подписью к картинке неопределённой ширины

    PaulZi
    @PaulZi
    Задайте врапперу:
    .wrapper
    {
    display: table;
    width: 1px;
    }
    

    Тогда картинка и текст будут максимально сжиматься вплоть до размеров самого большого Inline-блока — картинки.
    Ответ написан
    6 комментариев
  • 100% width в фиксированом гриде

    MTonly
    @MTonly
    Веб-разработчик с 2002 года
    Нет, CSS в этом плане (как и во многих других) откровенно sucks.

    Обычно такая вёрстка делается горизотальными полосами со 100% шириной, внутри каждой из которых центрируется по горизонтали блок фиксированной ширины.
    Ответ написан
    Комментировать