将 Angular 元素捆绑到单个文件中

Question

我正在使用Angular Element （版本 13）构建一个 Web 组件，我有一个关于捆绑的问题。

是否可以以所有 js 包（main.js、runtime.js 和 polyfills.js）以及 /assets 文件夹中的 css 和 svg 图标都位于单个 js文件中的方式构建 Web 组件在最后？

我现在正在做的是 ng build --configuration element --output-hashing none && node build.js在 build.js 包含的地方运行：

const fs = require('fs-extra');
const concat = require('concat');

(async function build() {
  const files = [
    './dist/runtime.js',
    './dist/polyfills.js',
    './dist/main.js'
  ];

  await concat(files, './dist/webcomp-ecar-friendly-accommodations.min.js');
  await fs.remove('./dist/runtime.js')
  await fs.remove('./dist/polyfills.js')
  await fs.remove('./dist/main.js')
})();

有没有办法将 css 文件和 /assets 也捆绑在同一个 js 包中？我确实知道它是在其他应用程序中使用 Webpack 完成的，但我不确定如何使用 Angular CLI 来完成此操作。

任何意见将不胜感激！

Answer 1

我建议你调查一下这个问题。 ngx-build-plus https://www.npmjs.com/package/ngx-build-plus