Partie C

ff3bc965 · Felicien Delannoy · 5d6745b3 · ff3bc965 · ff3bc965 · ff3bc965
Commit ff3bc965 authored Feb 1, 2021 by Felicien Delannoy
--- a/.babelrc
+++ b/.babelrc
 {
-	"presets": ["@babel/env"],
+	"presets": [
+		["@babel/env", {"modules": false}]
+	],
 	"plugins": ["@babel/plugin-proposal-class-properties"]
 }
--- 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 src="build/main.js" defer></script>
+	<script src="build/main.bundle.js" defer></script>
 </head>
 <body>
 	<header>

--- a/package-lock.json
+++ b/package-lock.json
--- 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",
@@ -16,6 +17,9 @@
    "@babel/core": "^7.12.10",
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@babel/preset-env": "^7.12.11",
-    "prettier": "^2.2.1"
+    "babel-loader": "^8.2.2",
+    "prettier": "^2.2.1",
+    "webpack": "^5.19.0",
+    "webpack-cli": "^4.4.0"
  }
 }
--- a/src/components/Component.js
+++ b/src/components/Component.js
+class Component {
+	tagName;
+	children;
+	attribute;
+	constructor(tagName, attribute, children) {
+		this.tagName = tagName;
+		this.children = children;
+		this.attribute = attribute;
+	}
+	render() {
+		if (this.children == null && this.attribute != null) {
+			return `<${this.tagName} ${this.renderAttribute()}/>`;
+		} else if (this.attribute == null && this.children != null) {
+			return `<${this.tagName}>${this.children}</${this.tagName}>`;
+		} else {
+			return `<${this.tagName} />`;
+		}
+	}
+	renderAttribute() {
+		if (this.attribute.name != null && this.attribute.value != null) {
+			return `${this.attribute.name}=${this.attribute.value}`;
+		}
+	}
+}
+export default Component;
--- a/src/components/Img.js
+++ b/src/components/Img.js
+import Component from './Component.js';
+class Img extends Component {
+	constructor(src) {
+		super('img', { name: 'src', value: src }, null);
+	}
+}
+export default Img;
--- a/src/main.js
+++ b/src/main.js
+import Img from './components/Img.js';
+import Component from './components/Component.js';
+
 const data = [
 	{
 		name: 'Regina',
@@ -39,36 +42,6 @@ class Character {
 const heisenberg = new Character('Walter', 'White');
 console.log(heisenberg.firstName, heisenberg.fullName());

-class Component {
-	tagName;
-	children;
-	attribute;
-	constructor(tagName, attribute, children) {
-		this.tagName = tagName;
-		this.children = children;
-		this.attribute = attribute;
-	}
-	render() {
-		if (this.children == null && this.attribute != null) {
-			return `<${this.tagName} ${this.renderAttribute()}/>`;
-		} else if (this.attribute == null && this.children != null) {
-			return `<${this.tagName}>${this.children}</${this.tagName}>`;
-		} else {
-			return `<${this.tagName} />`;
-		}
-	}
-	renderAttribute() {
-		if (this.attribute.name != null && this.attribute.value != null) {
-			return `${this.attribute.name}=${this.attribute.value}`;
-		}
-	}
-}
-class Img extends Component {
-	constructor(src) {
-		super('img', { name: 'src', value: src }, null);
-	}
-}
-
 const title = new Component('h1', null, 'La carte');
 document.querySelector('.pageTitle').innerHTML = title.render();
 /*const img = new Component('img', {

--- a/webpack.config.js
+++ b/webpack.config.js
+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: 'source-map',
+};