From 1c93a31063464ad515632e8a19d5f263e8f398ba Mon Sep 17 00:00:00 2001
From: Thomas Delattre <thomas.delattre4.etu@univ-lille.fr>
Date: Tue, 1 Feb 2022 11:39:15 +0100
Subject: [PATCH] TP2 Partie C
---
.babelrc | 6 +-
dist/main.js | 14 ++++
index.html | 2 +-
package.json | 5 +-
src/Data.js | 25 +++++++
src/components/Component.js | 21 ++++++
src/components/Img.js | 7 ++
src/correction.js | 131 ------------------------------------
src/main.js | 63 ++---------------
webpack.config.js | 27 ++++++++
10 files changed, 108 insertions(+), 193 deletions(-)
create mode 100644 dist/main.js
create mode 100644 src/Data.js
create mode 100644 src/components/Component.js
create mode 100644 src/components/Img.js
delete mode 100644 src/correction.js
create mode 100644 webpack.config.js
diff --git a/.babelrc b/.babelrc
index dfb789c..2d68d5a 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,3 +1,5 @@
{
- "presets": ["@babel/env"]
-}
\ No newline at end of file
+ "presets": [
+ ["@babel/env", {"modules": false}]
+ ]
+}
diff --git a/dist/main.js b/dist/main.js
new file mode 100644
index 0000000..41de9bf
--- /dev/null
+++ b/dist/main.js
@@ -0,0 +1,14 @@
+/*
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+/******/ (() => { // webpackBootstrap
+/******/ "use strict";
+/******/
+/******/
+/******/ })()
+;
\ No newline at end of file
diff --git a/index.html b/index.html
index a3a7118..21d4d94 100644
--- a/index.html
+++ b/index.html
@@ -14,7 +14,7 @@
<link rel="stylesheet" href="css/pizzaList.css">
<link rel="stylesheet" href="css/footer.css">
- <script type="module" src="build/main.js" defer></script>
+ <script src="build/main.bundle.js" defer></script>
</head>
<body>
<header>
diff --git a/package.json b/package.json
index 9f66e36..44f30ea 100644
--- a/package.json
+++ b/package.json
@@ -5,8 +5,9 @@
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
- "build": "babel src -d build",
- "watch": "./node_modules/.bin/babel src -d build --verbose --watch --source-maps"
+ "build": "webpack --mode=production",
+ "watch": "webpack --mode=development --watch"
+
},
"author": "Thomas Fritsch <thomas.fritsch@univ-lille.fr> (https://gitlab.univ-lille.fr/thomas.fritsch)",
"homepage": "https://gitlab.univ-lille.fr/js",
diff --git a/src/Data.js b/src/Data.js
new file mode 100644
index 0000000..212471c
--- /dev/null
+++ b/src/Data.js
@@ -0,0 +1,25 @@
+const data = [
+ {
+ name: 'Regina',
+ base: 'tomate',
+ price_small: 6.5,
+ price_large: 9.95,
+ image: 'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300'
+ },
+ {
+ name: 'Napolitaine',
+ base: 'tomate',
+ price_small: 6.5,
+ price_large: 8.95,
+ image: 'https://images.unsplash.com/photo-1562707666-0ef112b353e0?&fit=crop&w=500&h=300'
+ },
+ {
+ name: 'Spicy',
+ base: 'crème',
+ price_small: 5.5,
+ price_large: 8,
+ image: 'https://images.unsplash.com/photo-1458642849426-cfb724f15ef7?fit=crop&w=500&h=300',
+ }
+];
+
+export default data;
\ No newline at end of file
diff --git a/src/components/Component.js b/src/components/Component.js
new file mode 100644
index 0000000..3992b1e
--- /dev/null
+++ b/src/components/Component.js
@@ -0,0 +1,21 @@
+export default class Component {
+ tagName;
+ attribute
+ children;
+ constructor(tagName, attribute, children) {
+ this.tagName = tagName;
+ this.attribute = attribute;
+ this.children = children;
+ }
+ render(){
+ if (this.children) {
+ return `<${this.tagName}> ${this.children} </${this.tagName}>`;
+ }
+ else {
+ return this.renderAttribute();
+ }
+ }
+ renderAttribute(){
+ return `<${this.tagName} ${this.attribute.name} = "${this.attribute.value}" />`;
+ }
+}
diff --git a/src/components/Img.js b/src/components/Img.js
new file mode 100644
index 0000000..157be24
--- /dev/null
+++ b/src/components/Img.js
@@ -0,0 +1,7 @@
+import Component from './Component.js';
+
+export default class Img extends Component {
+ constructor(url){
+ super('img', {name:'src', value: url});
+ }
+}
\ No newline at end of file
diff --git a/src/correction.js b/src/correction.js
deleted file mode 100644
index 9bc6f7a..0000000
--- a/src/correction.js
+++ /dev/null
@@ -1,131 +0,0 @@
-// D. Manipulation des chaînes
-
-// const name = 'Regina';
-// const url = `images/${name.toLowerCase()}.jpg`;
-// const html = `
-// <article class="pizzaThumbnail">
-// <a href="${url}">
-// <img src="${url}" />
-// <section>${name}</section>
-// </a>
-// </article>
-// `;
-// document.querySelector('.pageContent').innerHTML = html;
-
-// // E.1. Manipulation des tableaux
-// let data = [ 'Regina', 'Napolitaine', 'Spicy' ];
-// html = '';
-// // E.1. boucle for :
-// for (let i = 0; i < data.length; i++) {
-// const nom = data[i],
-// url = `images/${nom.toLowerCase()}.jpg`;
-// html += `<article class="pizzaThumbnail">
-// <a href="${url}">
-// <img src="${url}" />
-// <section>${nom}</section>
-// </a>
-// </article>`;
-// }
-// document.querySelector('.pageContent').innerHTML = html;
-
-// E.1. Array.forEach :
-// html = '';
-// data.forEach( nom => {
-// const url = `images/${nom.toLowerCase()}.jpg`;
-// html += `<a href="${url}">
-// <img src="${url}" />
-// <h4>${nom}</h4>
-// </a>`;
-// })
-// document.querySelector('.pageContent').innerHTML = html;
-
-// // E.1. Array.map + Array.join :
-// html = data.map( nom => `<a href="images/${nom.toLowerCase()}.jpg">
-// <img src="images/${nom.toLowerCase()}.jpg" />
-// <h4>${nom}</h4>
-// </a>`).join('');
-// document.querySelector('.pageContent').innerHTML = html;
-
-// // E.1. Array.reduce :
-// html = data.reduce( (str, nom) => str+`<a href="images/${nom.toLowerCase()}.jpg">
-// <img src="images/${nom.toLowerCase()}.jpg" />
-// <h4>${nom}</h4>
-// </a>`,'');
-// document.querySelector('.pageContent').innerHTML = html;
-
-// E.2. Les objets littéraux
-const data = [
- {
- name: 'Regina',
- base: 'tomate',
- price_small: 6.5,
- price_large: 9.95,
- image: 'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300'
- },
- {
- name: 'Napolitaine',
- base: 'tomate',
- price_small: 6.5,
- price_large: 8.95,
- image: 'https://images.unsplash.com/photo-1562707666-0ef112b353e0?&fit=crop&w=500&h=300'
- },
- {
- name: 'Spicy',
- base: 'crème',
- price_small: 5.5,
- price_large: 8,
- image: 'https://images.unsplash.com/photo-1458642849426-cfb724f15ef7?fit=crop&w=500&h=300',
- }
-];
-
-function render(pizzas) {
- const html = pizzas.reduce( (str, {image, name, price_small, price_large}) => str +
- `<article class="pizzaThumbnail">
- <a href="${image}">
- <img src="${image}" />
- <section>
- <h4>${name}</h4>
- <ul>
- <li>Prix petit format : ${price_small.toFixed(2)} €</li>
- <li>Prix grand format : ${price_large.toFixed(2)} €</li>
- </ul>
- </section>
- </a>
- </article>`, '');
- document.querySelector('.pageContent').innerHTML = html;
-}
-
-// G.1. Tri de tableaux
-function sortByName(a, b) {
- if ( a.name < b.name ) {
- return -1;
- } else if ( a.name > b.name ) {
- return 1;
- }
- return 0;
-}
-
-// tri par price_small croissant PUIS par price_large croissant
-function sortByPrice(a, b) {
- if ( a.price_small !== b.price_small ) {
- return a.price_small - b.price_small;
- }
- return a.price_large - b.price_large;
-}
-
-// // Attention : data.sort() modifie le tableau original
-render( data );
-// render( data.sort(sortByName) );
-// render( data.sort(sortByPrice) );
-
-// // G.2. Système de filtre
-// render( data.filter( pizza => pizza.base == 'tomate' ))
-// render( data.filter( pizza => pizza.price_small < 6 ))
-// // deux possibilités pour les pizzas avec deux fois la lettre "i"
-// render( data.filter( pizza => pizza.name.split('i').length == 3 ))
-// render( data.filter( pizza => pizza.name.match(/i/g).length == 2 ))
-
-// // G.3. Destructuring
-// render( data.filter( ({base}) => base == 'tomate' ))
-// render( data.filter( ({price_small}) => price_small < 6 ))
-// render( data.filter( ({name}) => name.match(/i/g).length === 2 ));
diff --git a/src/main.js b/src/main.js
index 62ac429..5786fdc 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,61 +1,10 @@
-const data = [
- {
- name: 'Regina',
- base: 'tomate',
- price_small: 6.5,
- price_large: 9.95,
- image: 'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300'
- },
- {
- name: 'Napolitaine',
- base: 'tomate',
- price_small: 6.5,
- price_large: 8.95,
- image: 'https://images.unsplash.com/photo-1562707666-0ef112b353e0?&fit=crop&w=500&h=300'
- },
- {
- name: 'Spicy',
- base: 'crème',
- price_small: 5.5,
- price_large: 8,
- image: 'https://images.unsplash.com/photo-1458642849426-cfb724f15ef7?fit=crop&w=500&h=300',
- }
-];
-
-class Component {
- tagName;
- attribute
- children;
- constructor(tagName, attribute, children) {
- this.tagName = tagName;
- this.attribute = attribute;
- this.children = children;
- }
- render(){
- if (this.children) {
- return `<${this.tagName}> ${this.children} </${this.tagName}>`;
- }
- else {
- return this.renderAttribute();
- }
- }
- renderAttribute(){
- return `<${this.tagName} ${this.attribute.name} = "${this.attribute.value}" />`;
- }
-}
-
-class Img extends Character {
- src;
- constructor(src){
- super('img', {name:'src', value: this.src});
- }
-}
-
+import data from './Data.js';
+import Component from './components/Component.js';
+import Img from './components/Img.js';
+console.log(data[0].image);
const title = new Component( 'h1', null, 'La carte' );
document.querySelector('.pageTitle').innerHTML = title.render();
-// const img = new Component( 'img', {name:'src', value:'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300'} );
-// document.querySelector( '.pageContent' ).innerHTML = img.render();
-
-const img = new Img('https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300');
+const img = new Img(data[0].image);
document.querySelector( '.pageContent' ).innerHTML = img.render();
+
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000..be06a1e
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,27 @@
+const path = require('path');
+
+module.exports = {
+ // Fichier d'entrée :
+ entry: './src/main.js',
+ // Fichier de sortie :
+ output: {
+ path: path.resolve(__dirname, './build'),
+ filename: 'main.bundle.js'
+ },
+ // compatibilité anciens navigateurs (si besoin du support de IE11 ou android 4.4)
+ target: ['web', 'es5'],
+ // connexion webpack <-> babel :
+ module: {
+ rules: [
+ {
+ test: /\.js$/, // tous les fichiers js ...
+ exclude: /node_modules/, // ... sauf le dossier node_modules ...
+ use: { // ... seront compilés par babel !
+ loader: 'babel-loader',
+ }
+ }
+ ]
+ },
+ devtool: 'cheap-source-map'
+}
+
--
GitLab