Ajout nodejs et wepback + CI/CD

.github/workflows/build.yml

+name: Build & Deploy
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [ 'lts/*' ]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Setup Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm ci --ignore-scripts
+      - name: Build
+        run: npm run build -- --config webpack.production.js
+      - name: Setup Pages
+        uses: actions/configure-pages@v2
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          # Upload entire repository
+          path: 'dist/'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1
\ No newline at end of file

.gitignore

+# Created by https://www.toptal.com/developers/gitignore/api/intellij+all,node
+# Edit at https://www.toptal.com/developers/gitignore?templates=intellij+all,node
+
+### Intellij+all ###
+# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio, WebStorm and Rider
+# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
+
+# User-specific stuff
+.idea/**/workspace.xml
+.idea/**/tasks.xml
+.idea/**/usage.statistics.xml
+.idea/**/dictionaries
+.idea/**/shelf
+
+# AWS User-specific
+.idea/**/aws.xml
+
+# Generated files
+.idea/**/contentModel.xml
+
+# Sensitive or high-churn files
+.idea/**/dataSources/
+.idea/**/dataSources.ids
+.idea/**/dataSources.local.xml
+.idea/**/sqlDataSources.xml
+.idea/**/dynamic.xml
+.idea/**/uiDesigner.xml
+.idea/**/dbnavigator.xml
+
+# Gradle
+.idea/**/gradle.xml
+.idea/**/libraries
+
+# Gradle and Maven with auto-import
+# When using Gradle or Maven with auto-import, you should exclude module files,
+# since they will be recreated, and may cause churn.  Uncomment if using
+# auto-import.
+# .idea/artifacts
+# .idea/compiler.xml
+# .idea/jarRepositories.xml
+# .idea/modules.xml
+# .idea/*.iml
+# .idea/modules
+# *.iml
+# *.ipr
+
+# CMake
+cmake-build-*/
+
+# Mongo Explorer plugin
+.idea/**/mongoSettings.xml
+
+# File-based project format
+*.iws
+
+# IntelliJ
+out/
+
+# mpeltonen/sbt-idea plugin
+.idea_modules/
+
+# JIRA plugin
+atlassian-ide-plugin.xml
+
+# Cursive Clojure plugin
+.idea/replstate.xml
+
+# SonarLint plugin
+.idea/sonarlint/
+
+# Crashlytics plugin (for Android Studio and IntelliJ)
+com_crashlytics_export_strings.xml
+crashlytics.properties
+crashlytics-build.properties
+fabric.properties
+
+# Editor-based Rest Client
+.idea/httpRequests
+
+# Android studio 3.1+ serialized cache file
+.idea/caches/build_file_checksums.ser
+
+### Intellij+all Patch ###
+# Ignore everything but code style settings and run configurations
+# that are supposed to be shared within teams.
+
+.idea/*
+
+!.idea/codeStyles
+!.idea/runConfigurations
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+### Node Patch ###
+# Serverless Webpack directories
+.webpack/
+
+# Optional stylelint cache
+
+# SvelteKit build / generate output
+.svelte-kit
+
+# End of https://www.toptal.com/developers/gitignore/api/intellij+all,node
+
+
+dist/*
\ No newline at end of file

docs/index.html → index.html

@@ -3,14 +3,13 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Blob Analyze Lab Demo</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
+    <title><%= htmlWebpackPlugin.options.title %></title>
 </head>
 <body>
 <div class="container-fluid vh-100">
     <nav class="row navbar bg-light">
         <div class="container-fluid">
-            <span class="navbar-brand mb-0 h1">Blob Lab Demo</span>
+            <span class="navbar-brand mb-0 h1"><%= htmlWebpackPlugin.options.title %></span>
         </div>
     </nav>
 
@@ -59,8 +58,6 @@
     <!--</div>-->
 
 </div>
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
-<script src="js/paper-full.js"></script>
 <script>
 
     function Ruler(raster) {

package.json

+{
+  "name": "@verdi8/blob-analyzis-lab-demo",
+  "version": "1.0.0",
+  "description": "Un projet temporaire qick'n'dirty de démo d'analyse de photos de blobs",
+  "private": true,
+  "scripts": {
+    "serve": "webpack serve --open --config webpack.staging.js",
+    "build": "webpack"
+  },
+  "keywords": [],
+  "author": "Verdi8",
+  "license": "(c) Laurent Knoll",
+  "dependencies": {
+    "bootstrap": "^5.2.0",
+    "jquery": "3.6.0",
+    "paper": "0.12.15"
+  },
+  "devDependencies": {
+    "@types/jquery": "^3.5.8",
+    "css-loader": "^5.2.4",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.4.0",
+    "raw-loader": "^4.0.2",
+    "style-loader": "^2.0.0",
+    "svg-inline-loader": "^0.8.2",
+    "ts-loader": "^9.2.6",
+    "ts-node": "^10.7.0",
+    "typescript": "^4.4.4",
+    "webpack": "^5.4.0",
+    "webpack-cli": "^4.7.0",
+    "webpack-dev-server": "^4.3.1",
+    "webpack-merge": "^5.8.0"
+  }
+}

src/index.ts

+
+import 'bootstrap';
+import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
+
+import '../node_modules/paper/dist/paper-core';
+import * as paper from "paper";
+
+// Create an empty project and a view for the canvas:
+paper.install(window);
+
+
+/**
+ * Le lab
+ */
+class Lab {
+
+}
\ No newline at end of file

tsconfig.json

+{
+  "compilerOptions": {
+    "noImplicitAny": true,
+    "target": "ES6",
+    "module": "ES6"
+  }
+}
\ No newline at end of file

webpack.common.js.js

+const path = require('path');
+const webpackCommonJs = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+    entry: './src/index.ts',
+    module: {
+        rules: [
+            {
+                test: /\.tsx?/,
+                use: 'ts-loader',
+                exclude: /node_modules/,
+            },
+            {
+                test: /\.css$/,
+                use: ['style-loader', 'css-loader'],
+                // exclude: /node_modules/
+            },
+            {
+                test: /\.svg$/,
+                use: 'svg-inline-loader?classPrefix=true'
+            }
+        ]
+    },
+    resolve: {
+        extensions: ['.css', '.js', '.ts']
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            title: 'Blob Analysis Lab Demo',
+            template: 'index.html',
+            scriptLoading: 'blocking',
+        }),
+        new webpackCommonJs.DefinePlugin({
+            VERSION: JSON.stringify(require("./package.json").version),
+        })
+    ],
+    output: {
+        filename: 'blob-analysis-lab-demo.js',
+        path: path.resolve(__dirname, 'dist'),
+        clean: true
+    },
+    target: ['web', 'es5']
+};

webpack.production.js

+// Voir https://webpack.js.org/guides/production/ pour la séparation des configurations
+const { merge } = require('webpack-merge');
+const webpack = require('webpack');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+    mode: 'production',
+    plugins: [
+        new webpack.DefinePlugin({
+
+        })
+    ],
+});

webpack.staging.js

+// Voir https://webpack.js.org/guides/production/ pour la séparation des configurations
+const { merge } = require('webpack-merge');
+const webpack = require('webpack');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+    mode: 'development',
+    devtool: 'nosources-source-map',
+    devServer: {
+        static: './dist',
+    },
+    plugins: [
+        new webpack.DefinePlugin({
+
+        })
+    ],
+    output: {
+        publicPath: '/', // Chemin dans le serveur de dev
+    }
+});
\ No newline at end of file