Faire un script IIFE avec Rollup

Table des matières

Contexte
Création du nouveau projet
Rollup
Typescript
Les sources du projet
Conclusion

Contexte

Le terme IIFE (Immediately Invoked Function Expression) désigne une expression de fonction invoquée immédiatement.

Ce qui revient à faire:

(function() {
    let myVar = 1;

    console.log(myVar);
})();

Ce type de structure est intéressant pour "isoler" un périmètre de définitions et ne pas rentrer en conflit avec d'éventuels autres scripts.

Création du nouveau projet

Je vais donc essayer de résumer les étapes importantes dans la création d'un projet Rollup, qui compilera un script IIFE de ce type.

Je commence par créer le projet et par installer les dépendances dont j'aurais besoin.

mkdir hello-iife-rollup
cd hello-iife-rollup/
yarn init
yarn add -D rollup rollup-plugin-terser rollup-plugin-typescript2 tslib typescript

Puis je rajoute dans le package.json le point d'entrée principal main et le script build qui me servira à lancer simplement la compilation de mon code.

./package.json

{
    "name": "hello-iife-rollup",
    "version": "1.0.0",
    "main": "dist/index.js",
    "license": "MIT",
    "scripts": {
        "build": "rollup -c"
    },
    "devDependencies": {
        "rollup": "^2.56.3",
        "rollup-plugin-terser": "^7.0.2",
        "rollup-plugin-typescript2": "^0.30.0",
        "tslib": "^2.3.1",
        "typescript": "^4.4.3"
    }
}

Rollup

Pour que Rollup puisse fonctionner correctement, je dois créer un fichier de configuration rollup.config.js à la racine du projet.

./rollup.config.js

import typescript from 'rollup-plugin-typescript2';
import { terser } from 'rollup-plugin-terser';

export default {
    input: 'src/index.ts',
    output: {
        dir: './dist',
        format: 'iife'
    },
    plugins: [
        typescript(),
        terser()
    ]
};

Celui-ci est très simmple, il prend en entrée le fichier src/index.ts et le compile en iife dans le dossier dist.

Rollup possède un système de plugin. Ici, j'ai utilisé deux plugins:

typescript, qui se charge de la compilation des fichiers ts en js.
terser, qui s'occupe de la minification du fichier compilé après coup.

Typescript

Pour que le plugin typescript puisse fonctionner, il faut aussi que je lui fournisse un fichier de configuration tsconfig.json:

./tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "module": "es2015",
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "strict": true,
        "skipLibCheck": true
    },
    "include": [
        "src/**/*"
    ]
}

Je rajoute aussi un fichier .gitignore pour ne pas "encombrer" mon repository.

./.gitignore

node_modules
dist

Les sources du projet

Maintenant que l'installation est terminée, il me faut un fichier à compiler.

Je créer un dossier src à la racine du projet, puis j'y ajoute un fichier index.ts qui sera le point d'entrée de mon script.

./src/index.ts

console.log('Hello iife with rollup !');

Ce fichier ne fait rien de compliqué, mais sert juste à titre d'exemple.

Je peux ensuite exécuter la commande suivante pour compiler mon projet:

yarn build

Le fichier géneré devrait ressembler à cela:

./dist/index.js

!function(){"use strict";console.log("Hello iife with rollup !")}();

Conclusion

Ce que Rollup fait de très bien pendant le build, c'est de vérifier les zones de codes non utilisées et de les retirer dans la version compilée du script. Ce processus s'appelle le "tree-shacking". Le module "terser" de Rollup vient quant à lui minifier le code pour le rendre plus compact.

Ce fichier script peut ensuite être renommé hello-iife-rollup.min.js et être inclus dans une page web.