Задать вопрос

Алексей Алексеев

Ответы пользователя по тегу JavaScript

  • Как правильно сегодня собрать браузерный ES6?

    @angelpsy
    - babel следует подключать по возможности всегда, хотя бы для обработки es7-8 фишек, которые вам понравятся, но еще не успели внедрить во все браузеры.
    - webpack можно подключить через gulp. Вполне можно выполнять отдельные такси с помощью gulp, а что-то обрабатывать с помощью webpack`а. Так же можно, например, запускать отдельные npm скрипты для выполнения параллельной или последовательной работы gulp и webpack. Особо полезные фишки webpack (имхо): tree shaking, [name][hash].ext корректное именование файлов на выходе, динамический импорт файлов.
    - делать отдельные сборки для старых и вечнозеленых браузеров можно. Подключать можно используя 
    <script type="module" src="module.mjs"></script>
<script nomodule src="fallback.js"></script>

    Подобный хак. Сначала подключаем сборку для браузеров, поддерживающих модули, и почти наверняка, весь es6 (e7-8 не обязательно, поэтому может потребоваться babel для транспилинга es7-8 в es6), а потом в качестве фаллбека подключаем файл в котором весь код преобразован в es5 (или ниже, если необходимо и возможно).
    Ответ написан
    2 комментария
    2 комментария

  • В чем удобство Webpack, кроме подключения одного единственного файла?

    @angelpsy
    Webpack позволяет загрузить определенный код только если нужен на странице.
    Допустим у вас есть скрипт карусели, которая используется на отдельных страницах, но далеко не на всех и вы не хотите загружать этот код для всех 100 страниц. Webpack позволяет задать условие при котором скрипт будет загружен, а на остальных страницах он загружен не будет. См. require.ensure.
    Можно собрать общий файл, где будут только используемый на всех страницах код... или если он используется определенное количество раз. И отдельно файлы, которые будут подключаться только при необходимости.

    Дополнительно он может убирать неиспользуемый код. Т.е. вы написали какую-либо функцию, но она стала ненужной и ни разу не вызывается - Webpack позволяет проанализировать код и удалить неиспользуемое.
    Можно так же написать
    if (false) {...}
    И webpack удалит этот код, т.к. он никогда не будет исполнятся (допустим это можно использовать для дебага, а вместо false использовать if (isDebage) {}. isDebage задавать извне скрипта). См tree shaking.

    Так же Webpack позволяет обработать как скрипты (например, с помощью babel), так и стили (например, postCSS) и другие ресурсы. В том числе он позволяет в код подключения скрипта добавлять хэш скрипта, что позволяет сбросить кэш у посетителей при обновлении бандла.

    Также есть очень удобный сервер для разработки с горячей перезагрузкой модулей (а не только LR).

    Есть и другие плюшки.
    Ответ написан
    Комментировать
    Комментировать

  • Настройка окружения для front end?

    @angelpsy
    Попробуй TARS: хорошее описание, возможность разбивки на компоненты, выбор используемых технологий, модульность самой системы и возможность подстроить под себя. Для начинающих и, имхо, средних разработчиков фронта - вполне подходящая система. Разумеется имеются свои ограничения, но когда они станут актуальными - уже, имхо, нужно уметь собирать свою систему сборки.

    Ну и в качестве основы - методология БЭМ.
    Ответ написан
    Комментировать
    Комментировать

  • Как подружить Webpack + jQuery + jQuery plugins?

    @angelpsy
    Мне хватило подключить jQuery в plugin

    plugins: [
  new webpack.ProvidePlugin({
    $: "jquery/dist/jquery.min.js",
    jQuery: "jquery/dist/jquery.min.js",
    "window.jQuery": "jquery/dist/jquery.min.js"
  })
];

    (взял за основу рецепт отсюда)
    После чего в глобальной области видимости все три варианта вызова jquery будут работать, больше ничего подключать не надо.

    Сам jQuery я скачивал через bower, поэтому дополнительно подключил пути, где будут искаться модули 
    resolve: {
        root: ['./bower_components']
    }

    в вашем случае, предполагаю 'bower_components' можно заменить на 'vendor' (путь будет от корня проекта).

    require('../../vendors/jquery.js') внутри blocks\slider\index.js уже не нужен будет, достаточно будет просто подключить файл jquery.slider.js
    Ответ написан
    Комментировать
    Комментировать