Zenn
😋

Nx Angular でESBuild pluginを使ってチャンクにbannerを追加する

2025/04/08に公開
Angular
esbuild
Nx
tech

@denwaya34です。
Nx Angularのチャンクにbannerを追加する方法の説明です。

やり方

1. project.jsonのexecutorを@nx/angular:applicationへ変更する

project.json
{
  ...
  "targets": {
    "build": {
      "executor": "@nx/angular:application",
      "options": {
        ...
        "plugins": ["plugins/banner-plugin.mjs"],
      }
    },
    ...
  }
}

2. esbuild-plugin-licenseをインストールする

npm i -D esbuild-plugin-license
 or 
pnpm i -D esbuild-plugin-license

3. plugins/banner-plugin.mjs を作成する

plugins/banner-plugin.mjs
import esbuildPluginLicense from 'esbuild-plugin-license';

/** @type {import('esbuild').Plugin} */
const licensePlugin = esbuildPluginLicense({
  banner: `/*
# Copyright (c) 2025 Taro Tanaka
#
# This software is released under the MIT License.
# https://opensource.org/licenses/MIT
*/`,
});

export default licensePlugin;

結果

dist/{project名}/main-xxxxx.js に以下のようにbannerが追加されます。

/*
# Copyright (c) 2025 Taro Tanaka
#
# This software is released under the MIT License.
# https://opensource.org/licenses/MIT
*/
var Jf=Object~~~

コード

github:nx-angular-plugin-demo

Discussion