Мы хотим использовать bootstrap 4 (4.0.0-alpha.2) в нашем приложении, созданном с помощью angular -cli 1.0.0-beta.5 (w/node v6.1.0).
После загрузки бутстрапа и его зависимостей с npm наш первый подход заключался в добавлении их в angular-cli-build.js
:
'bootstrap/dist/**/*.min.+(js|css)',
'jquery/dist/jquery.min.+(js|map)',
'tether/dist/**/*.min.+(js|css)',
и импортируйте их в наш index.html
<script src="vendor/jquery/dist/jquery.min.js"></script>
<script src="vendor/tether/dist/js/tether.min.js"></script>
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css">
<script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>
Это отлично работало с ng serve
, но как только мы создали сборку с флагом -prod
, все эти зависимости исчезли из dist/vendor
(сюрприз!).
Как мы планируем обрабатывать такой сценарий (т.е. загружать сценарии начальной загрузки) в проекте, созданном с помощью angular -cli?
У нас были следующие мысли, но мы действительно не знаем, куда идти...
-
используйте CDN? но мы предпочитаем обслуживать эти файлы, чтобы гарантировать, что они будут доступны.
-
скопировать зависимости
dist/vendor
после нашегоng build -prod
? Но это похоже на что-то angular -cli должно обеспечить, поскольку оно "заботится" о части сборки? -
добавить jquery, bootstrap и tether в src/system-config.ts и каким-то образом вложить их в наш пакет в main.ts? Но это казалось неправильным, учитывая, что мы не будем явно использовать их в нашем коде приложения (в отличие от moment.js или что-то вроде lodash, например)