Utiliser Rollup pour fusionner vos fichiers javascript
Application d’origine sans bundle JS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bundler with Parcel</title>
</head>
<body>
<form action="#">
<label for="email">Email</label><br>
<input type="text" value="" id="email"><br>
<label for="password">Mot de passe</label><br>
<input type="text" value="" id="password"><br>
<input type="submit" id="btn" valu="Soumettre">
</form>
</body>
<script src="./script1.js"></script>
<script src="./script2.js"></script>
<script src="./script3.js"></script>
</html>
Les différents scripts JS
//script1.js
let email = document.querySelector('#email')
let password = document.querySelector('#password')
let btn = document.querySelector('#btn')
//script2.js
email.addEventListener('keyup', (event) => {
if (!isEmailValid(email.value)) {
console.log('Email is invalid')
} else {
console.log('Email is valid')
}
})
password.addEventListener('keyup', (event) => {
console.log('Password length ', password.value.length)
})
// Vérifie si l'email est correct
const isEmailValid = (email) => {
return email.toLowerCase()
.match(
/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
);
}
//script3.js
btn.addEventListener('click', (event) => {
event.preventDefault()
if (isEmailValid(email.value) && password.value.length > 8) {
alert("Form is valid")
} else {
alert("Form is invalid")
}
})
Si votre page HTML fait appel à l’inclusion de beaucoup de fichier JS, vous aurez envie de fusionner tous ces fichiers en un seul pour le rendre plus compact. je vous propose d’utiliser Rollup, qui est simple comparé à Webpack. On va installer Rollup
npm install rollup @rollup/plugin-node-resolve --save-dev
Ensuite créer un fichier de configuration
import resolve from '@rollup/plugin-node-resolve';
export default {
input: 'src/main.js',
output: {
file: 'dist/bundle.js',
format: 'iife'
},
plugins: [resolve()]
};
Dans le fichier main.js vous importez les fichier Javascript
import './script1.js'; import './script2.js'; import './script3.js'; // etc
Si vous avez un message du genre
Ajoutez une propriété dans package.json
{
"scripts": {
"build": "rollup -c"
},
"devDependencies": {
"@rollup/plugin-node-resolve": "^15.2.3",
"rollup": "^4.18.1"
},
"type": "module"
}
Désormais dans le fichier HTML l’inclusion du Js ressemble à ça
//index.html ... </body> <script src="./dist/bundle.js"></script> </html>
A quoi ressemble le bundle.js
(function () {
'use strict';
document.querySelector('#email');
document.querySelector('#password');
document.querySelector('#btn');
email.addEventListener('keyup', (event) => {
if (!isEmailValid$1(email.value)) {
console.log('Email is invalid');
} else {
console.log('Email is valid');
}
});
password.addEventListener('keyup', (event) => {
console.log('Password length ', password.value.length);
});
// Vérifie si l'email est correct
const isEmailValid$1 = (email) => {
return email.toLowerCase()
.match(
/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
);
};
btn.addEventListener('click', (event) => {
event.preventDefault();
if (isEmailValid(email.value) && password.value.length > 8) {
alert("Form is valid");
} else {
alert("Form is invalid");
}
});
})();
