Вы должны подключаться к bower_components в производстве?

Я относительно новичок в использовании Bower, и я не могу сказать, должны ли вы ссылаться на bower_components в процессе производства. Должен ли я использовать задачу grunt для связывания или копирования файлов, которые мне нужны из bower_components, в отдельный каталог?

Я спрашиваю об этом, потому что я никогда не видел веб-сайта с каталогом "bower_components", поэтому я немного напуган. Все руководства для начинающих просто ссылаются на "bower_components/...", например, на учебник angular.

Ответы

Ответ 1

Вы используете Йоман?

В зависимости от вашего Gruntfile.js у вас должны быть разные задачи, одна из них - "bower-install": эта задача будет читать index.html, найдите следующий блок комментариев

<!-- bower:js -->
<!-- endbower -->

и введите внутри всех ваших зависимостей, указанных в вашем bower.json. Это означает, что задача будет записывать для всех ваших < script src "/bower_components/.." > блоки.

Вы никогда не замечали сайт с ссылками "bower_components", потому что ваш /app dir - это ваша среда разработки, ваш исходный проект. Из источника вы создадите производственное приложение, выполняющее задачу "build": эта задача состоит из разных подзадач, которые выполняют разные задания, одна из которых объединяет все сценарии, добавленные задачей bower_install, в один js файл.

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

Если вы используете Yeoman, у вас есть все эти задачи, уже настроенные в Gruntfile.js, просто откройте его и попытайтесь понять, что делает каждая задача.

На первый взгляд это может быть довольно сложно понять, например, задача сборки относится к 14 или 15 подзадачам, я предлагаю вам зарегистрировать пользовательские задачи, которые запускают только одну задачу, и посмотреть, что произойдет.

Приветствия

Ответ 2

Вы можете дать вашему каталогу установки bower лучшее имя, создав файл .bowerrc (рядом с вашим файлом bower.json) и установив для свойства directory что-то еще. Например, у меня есть следующее в .bowerrc:

{
  "directory": "public/vendor"
}

Тогда есть также близкий вопрос о том, следует ли вам проверять содержимое этого каталога на исходный элемент управления. Более подробное обсуждение этого вопроса см. здесь.

И, наконец, как уже отмечали другие, он рекомендовал вам объединить и минимизировать свои внешние интерфейсы.

Ответ 3

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

Задача grunt uglify может легко справиться с этими двумя вещами. Вам просто нужно предоставить массив файлов для присоединения.

// Project configuration.
grunt.initConfig({
  uglify: {
    my_target: {
      files: {
        'dest/output.min.js': ['src/input1.js', 'src/input2.js']
      }
    }
  }
});

Ответ 4

Это довольно обычное начало, просто используя bower_components. Вы можете увидеть это в angular -seed starter project script ссылках. Как только вы приступите к развертыванию производственного приложения, а время загрузки и производительность станут критическими, вы должны посмотреть на преобразование в решение для слияния и минимизации зависимостей.