#shorts - tscofig.json różny target

Command Line

W związku z tym że 11 czerwca 2022 roku Internet Explorer przestanie być wspierany należy się jakoś na tą okoliczność przygotować 😉

Więc jak w projekcie typescript generować biblioteki z ustawionymi różnymi targetami - "target": "ES5" oraz "target": "ES6"
Z pomocą przychodzi nam parametr który zwie się extends

Musimy stworzyć trzy pliki tsconfig. Podstawowy tsconfig.json:

{
  "compilerOptions": {
    "module": "ESNext",
    "importHelpers": true,
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": false,
    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "sources/js/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

Jak widać w powyższym kodzie brak jest zmiennej target.

Teraz dwa pliki tsconfig.es5.json oraz tsconfig.es6.json, oczywiście nazwy mogą być inne.

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "target": "ES5",
  },
}

A drugi plik tsconfig.es6.json różni się jedynie tym, że target ustawiamy na ES6.

Teraz wystarczy że wywołamy tsc z odpowiednimi parametrami.
tsc -p tsconfig.es5.json oraz tsc -p tsconfig.es6.json
W powyższym pliku będziemy nadpisywać te pliki więc można dodać dodatkowy parametr w zależności od wersji --outDir es6

Rollup.config.js

Dobra a co jeśli używamy np. rollup do kompilacji bibliotek, na to również znajdzie się sposób.
Będziemy potrzebowali biblioteki import typescript from "@rollup/plugin-typescript";

Tworzę sobie funkcję do której przekazuję target.

const sharedPlugins = (target) => {
  return [
    // plugin 1
    // plugin 2
    typescript({ noEmitOnError: false, target }),
  ];
};

I teraz do każdego formatu dodaję funkcję. Powiedzmy mam format es

{
  input,
  watch: false,
  // tutaj nasza funkcja z parametrem sterującym
  plugins: [...sharedPlugins("es6")],
  output: {
    banner,
    file: "dist/zooom.es.min.js",
    format: "es",
    name: "Zooom",
    sourcemap: false,
    ...
  },
},

Pod tym linkiem można zobaczyć cały działający kod - zooom.js