TypeScript, imports, Webpack

• Ressources pédagogiques pour apprendre le suédois
• Billet-signet : la France en électricité 100 % renouvelable décarbonnée ?

Si tu utilises ou comptes utiliser TypeScript dans un projet web, tu sais sans doute que les lignes d’imports (import X from 'superLib';) ne sont pas reconnues par les navigateurs, restés à ES5. Dans ce cas, il faut utiliser un module bundler qui va rendre notre code appelable depuis le navigateur.

Mais il y a une subtile nuance. En effet, en TypeScript, la syntaxe d’import n’est pas la même en fonction du type de module souhaité. Ainsi, si dans le tsconfig.json on décide que l’on veut les modules commonjs, alors la syntaxe est la suivante.

1
2
3
4
5
6

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5"
  }
}

1

import * as $ from 'jquery';

Au contraite, la syntaxe est différente si l’on souhaite utiliser les modules es6. On peut cette syntaxe.

1
2
3
4
5
6

{
  "compilerOptions": {
    "module": "es6",
    "target": "es5"
  }
}

1

import $ from 'jquery';

Je suis débutant dans le monde de la programmation front, j’espère ne pas trop m’être emmêlé les pinceaux.

• Ressources pédagogiques pour apprendre le suédois
• Billet-signet : la France en électricité 100 % renouvelable décarbonnée ?