Как получить один файл в качестве вывода angular cli

Я работаю над приложением ng2 и использую @angular/cli для его сборки. В качестве вывода он генерирует несколько js файлов, таких как .inline.js, .vendor.js и т.д.

Вопрос в том, как настроить angular- vendor.js inline.js в результате только одного файла, то есть связать vendor.js, inline.js и т.д. В один большой файл?

Я понимаю, что это можно сделать с помощью дополнительного упаковщика, но было бы неплохо сделать это с помощью ng-cli

PS Я не использую ленивую загрузку в этом приложении и определенно не буду.

PPS Просто конкатать файлы потом не вариант, потому что:

  • он не работает с хэшем в имени файла, также необходимо обновить HTML
  • он вводит дополнительный шаг сборки, который не является необходимым

На данный момент похоже, что переход на чистый веб-пакет будет самым простым и лучшим вариантом.

ОБНОВИТЬ

есть возможность избежать vendor.js установив --vendor-chunk в true но в результате я все равно получаю несколько файлов: inline.bundle.js main.bundle.js polyfills.bundle.js

Ответы

Ответ 1

Angular CLI изначально не поддерживает это.

Существуют и другие решения, в том числе дальнейшая обработка с использованием других инструментов после того, как Angular CLI завершит свою работу, но это будет препятствовать или устранять возможности отладки, которые Angular предоставляет "из коробки".

Поскольку команда ng eject также устарела, возможность перенастроить веб-пакет не так привлекательна, как раньше. Однако технически это все еще возможно.

Мое решение:

Лучшее решение, которое я нашел, - это плагин ngx-build-plus, который можно найти на https://github.com/manfredsteyer/ngx-build-plus или добавить в проект с помощью команды ng add ngx-build-plus Angular-CLI. После установки он предоставляет дополнительные параметры конфигурации для сборки, включая флаг --single-bundle true, который можно добавить к команде ng build или ng serve.

С этим флагом создаются файл main.js и файл main.js.map, на которые уже есть ссылки в HTML, и он будет так же корректно работать из коробки, с полным сопоставлением исходного кода и отладкой.

Ответ 2

Я не видел никакой функциональности в angular-cli, которая встроена в один пакет, однако это должно быть довольно легко сделать с помощью скрипта nodejs или с использованием одной из доступных библиотек concat, таких как concat-files https://www.npmjs.com/package/concat-files

установите concat файлы затем: добавьте файл concat.js в свой проект на том же уровне, что и папка dist

var concat = require('concat-files');
concat([
    './dist/inline.bundle.js',
    './dist/vendor.bundle.js',
    './dist/vendor.bundle.js'
], './dist/app.js', function(err) {
    if (err) throw err
    console.log('done');
});

в свой package.json под scripts добавьте новый скрипт build:

"scripts":{
    "build": "ng build && node concat.js"
}

затем запустите его npm run build, сначала он запустит угловую сборку cli, запустив скрипт concat.js, который объединит полученные пакеты

Ответ 3

1- использует ng build --prod --output-hashing=none, который создает файлы без кэшбастера (случайного хэша).

2- Используйте cat чтобы связать их в один файл

"build":"ng build --prod --output-hashing=none",
"package":" cat dist/angular-project/{polyfills,runtime,main}.js > ./package.js",
"bundle":"npm run build && npm run package"

И используйте это как:

npm run bundle

Ответ 4

Я решил это в своем проекте с помощью специального сценария, который я запускаю после ng build.

Сценарий выполняет следующие действия:

  • Сканирует файл dist/index.html для всех тегов <link> и <script>.
  • Объединяет все файлы, на которые ссылаются теги <link>/<script>, в свои соответствующие пакеты.
  • Удаляет все эти элементы из файла index.html и добавляет новый элемент, ссылающийся на пакеты.

Например, этот файл index.html...

<html>
    <head>
        <link rel="stylesheet" src="/dist/styles.css">
        <link rel="stylesheet" src="/dist/foo.css">
        <link rel="stylesheet" src="/dist/bar.css">
    </head>
    <body>
        <script src="/dist/main.js">
        <script src="/dist/inline.js">
        <script src="/dist/scripts.js">
        <script src="/dist/foo.js">
        <script src="/dist/bar.js">
    </body>
</html>

... превратится в это:

<html>
    <head>
        <link rel="stylesheet" src="/dist/bundle.css">
    </head>
    <body>
        <script src="/dist/bundle.js">
    </body>
</html>

Это очень хорошо работает для меня, используя Angular 8.