Как создать конкретные JS-пакеты при использовании TypeScript?

Question

У нас есть приложение ASP.NET MVC, в котором много JavaScript-кода.

Чтобы сократить количество ненужных JS, загружаемых в браузер, мы используем файл BundleConfig.cs для генерации нескольких пакетов. Тогда в представлении у нас есть логика:

«Если пользователь может использовать функцию A, включите пакет A»

Таким образом, конечный пользователь не только получает только JS, который соответствует их требованиям, JS также существует только на тех страницах, где он имеет отношение. Это дает нам очень простой способ инициализации нашего кода при загрузке страницы:

$(featureA.init);

Миграция на TypeScript (текущая версия 3.3) ...

В Visual Studio 2017, на вкладке Project Type Build, я вижу флажок «Объединить вывод JavaScript в файл:», где можно указать имя файла (которое можно использовать для объединения).

• Это дает мне единый JS-пакет для всего сайта, который потребовал бы, чтобы я дал всем все.
• Событие on-page-load больше не является хорошим вариантом, потому что JS-файл доступен на не релевантных страницах, и поэтому селекторы jQuery, которые запускаются в функции 'init ()', конечно, теперь жалуются о том, что некоторые объекты в DOM не найдены, поскольку пользователь не просматривает соответствующую страницу.

Я что-то упустил? Может ли TypeScript в Visual Studion 2017 удовлетворить эти требования?

Answer 1

Используйте Webpack в качестве компоновщика зависимостей, и он должен делать то, что вы хотите: https://webpack.js.org/guides/typescript/

У него есть несколько классных плагинов, таких как CommonsChunkPlugin , которые могут получить нужные вам вещи - например, общие модули, чтобы облегчить работу в браузере. Кроме того, в Webpack есть несколько других плагинов, таких как ExtractTextWebpackPlugin и MiniCssExtractPlugin , которые позволят вам иметь только отдельные фрагменты из более крупного пакета, как вы этого хотите в своем проекте.

Answer 2

Я исследовал ответ, предоставленный Yash, и упомянутый веб-пакет, безусловно, выглядит очень полезным инструментом.Похоже, что с этим можно многое сделать, но у меня осталось ощущение, что Visual Studio должен сделать основы ... если я что-то упустил?

Я вернулся к своему решению и, с небольшим количествомя решил эту проблему без установки каких-либо дополнительных пакетов.

Сначала я снял флажок «Объединить вывод JavaScript в файл».Одно замечание: хотя я снял этот флажок, моя Visual Studio, похоже, запомнила это значение, и для очистки его памяти потребовалось перезапуск Visual Studio.

Во-вторых, я нашел результирующие файлы * .js.которые генерируются при компиляции файлов * .ts и включаются в мой проект Visual Studio.

В-третьих, я переопределил пакеты в файле BundleConfig.cs, чтобы использовать эти сгенерированные файлы JS, а затем сослался наих в соответствующих представлениях.

Затем, когда я опубликовал их, связки появились, как и ожидалось.

Я подозреваю , что то, что мне не хватало, включало их *.js-файлы в проекте Visual Studio.Я думаю, что если они не включены, то они не публикуются и поэтому не могут быть включены в процесс комплектации.