geolba/GeotiefExplore
2
1
Fork 0
Code Issues 7 Pull Requests Projects 1 Releases Wiki Activity

- npm updates

Browse Source 
- remove NODE_ENV from .env file, use webpack mode parameter inside webpack.config.js
This commit is contained in:
Arno Kaimbacher 2022-09-07 13:37:27 +02:00
parent eb0721c681
commit 397788952b
7 changed files with 13198 additions and 12984 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
.env.example
View File

@ -1,2 +1,8 @@
NODE_ENV=
CONSTANT_VALUE=
CONSTANT_VALUE=1234567
SERVICE_URL=https://geusegdi01.geus.dk/meta3d/rpc/model_meta_all?modelid=
POINT_URL=https://geusegdi01.geus.dk/geom3d/data/nodes/
EDGE_URL=https://geusegdi01.geus.dk/geom3d/data/triangles/
APP_KEY=
MATOMO_TRACKER_URL=
MATOMO_SITE_ID=

5
GeotiefExplore.code-workspace
View File

@ -18,9 +18,8 @@
// "port": 9222,
"url": "http://localhost:8080?model_id=20",
"webRoot": "${workspaceFolder}",
"breakOnLoad": true,
"runtimeExecutable": "C:/ProgramData/scoop/apps/googlechrome/current/chrome.exe",
// "runtimeExecutable": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
// "runtimeExecutable": "C:/ProgramData/scoop/apps/googlechrome/current/chrome.exe",
"runtimeExecutable": "C:/Program Files/Google/Chrome/Application/chrome.exe",
// "sourceMapPathOverrides": {
// "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
// "webpack:///./*": "${workspaceFolder}/*",

2
index.html
View File

@ -224,7 +224,7 @@
</section>
<script src="dist/runtime.js"></script>
<script src="dist/vendors.js"></script>
<script src="dist/chunk-vendors.js"></script>
<script src="dist/main.js"></script>
</body>

1216
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

13
package.json
View File

@ -6,11 +6,11 @@
"dependencies": {
"@fontsource/open-sans": "^4.5.11",
"@fortawesome/fontawesome-free": "^6.1.2",
"@types/three": "^0.143.2",
"@types/three": "^0.144.0",
"bulma": "^0.9.2",
"lodash": "^4.17.21",
"proj4": "^2.6.3",
"three": "^0.143.0"
"three": "^0.144.0"
},
"author": "Arno Kaimbacher",
"license": "MIT",
@ -37,15 +37,16 @@
"url-loader": "^4.1.1",
"webpack": "^5.7.0",
"webpack-cli": "^4.2.0",
"webpack-merge": "^5.4.0"
"webpack-manifest-plugin": "^5.0.0",
"webpack-merge": "^5.4.0",
"webpack-nano": "^1.1.1"
},
"scripts": {
"babel": "babel --presets es2015 js/main.js -o build/main.bundle.js",
"serve": "http-server",
"prod": "rm -rf dist && webpack --progress --mode=production",
"prod_serve": "concurrently \"npm run serve\" \"npx webpack --progress --mode=production --watch\" ",
"dev_serve": "concurrently \"npm run serve\" \"npx webpack --progress --mode=development --watch\" ",
"dev": "rm -rf dist && npx webpack --progress --mode=development --watch"
"prod_serve": "rm -rf dist && concurrently \"npm run serve\" \"npx webpack --progress --mode=production\" ",
"dev": "rm -rf dist && concurrently \"npm run serve\" \"npx webpack --progress --mode=development --watch\" "
},
"keywords": [
"3D",

34
src/js/controls/BoreholePopup.ts
View File

@ -3,6 +3,7 @@ import * as util from '../core/utilities';
import * as domEvent from '../core/domEvent';
import * as dom from '../core/domUtil';
import { BarChart } from '../core/BarChart';
import { Map } from "../core/Map";
import './BoreholePopup.css';
@ -19,7 +20,7 @@ export class BoreholePopup extends Control {
position: 'topleft',
width: '300px',
height: '100%',
parentDiv: null
parentDiv: undefined
};
_source;
@ -41,7 +42,7 @@ export class BoreholePopup extends Control {
}
// happens after added to map
onAdd(map) {
onAdd(map: Map) {
if (!map) {
// this.destroy();
//logger.warning('HomeButton::map required', true);
@ -108,13 +109,13 @@ export class BoreholePopup extends Control {
}
}
show() {
show(): void {
//this._clearContent();
this._toggleVisibility(true);
//this._animate(true);
}
hide() {
hide(): void {
//var test = this._isShowing;
if (this._isShowing) {
(this._toggleVisibility(false));
@ -124,7 +125,7 @@ export class BoreholePopup extends Control {
//}
}
setContent(innerHTML) {
setContent(innerHTML): void {
if (innerHTML instanceof HTMLElement) {
this._contentPane.innerHTML = "";
this._contentPane.appendChild(innerHTML);
@ -135,7 +136,7 @@ export class BoreholePopup extends Control {
this._contentPane.style.display = "block";
}
setChartContent(data) {
setChartContent(data): void {
this._contentPane.innerHTML = "";
let valTextColor = "ffffff";
@ -149,17 +150,17 @@ export class BoreholePopup extends Control {
this._contentPane.appendChild(table);
}
close() {
close(): void {
this._clearContent();
this._toggleVisibility(false);
this.emit("closed");
}
private _clearContent() {
private _clearContent(): void {
this._contentPane.innerHTML = '';
}
private _toggleVisibility(visible) {
private _toggleVisibility(visible: boolean): void {
this._setVisibility(visible);
this._isShowing = visible;
@ -171,19 +172,22 @@ export class BoreholePopup extends Control {
// let analysisTabContent = document.querySelector('.tab-pane.content-file');
// if it's not the analysis tab, make it active
if (analysisTabButton !== activeTabButton) {
activeTabButton.classList.remove('is-active');
analysisTabButton.classList.add('is-active');
activeTabButton?.classList.remove('is-active');
analysisTabButton?.classList.add('is-active');
document.querySelector(activeTabButton.getAttribute('name')).classList.remove('active');
document.querySelector(analysisTabButton.getAttribute('name')).classList.add('active');
let activeNameAttribute = activeTabButton?.getAttribute('name');
(activeNameAttribute) && document.querySelector(activeNameAttribute)?.classList.remove('active');
let analysisNameAttribute = analysisTabButton?.getAttribute('name');
(analysisNameAttribute) && document.querySelector(analysisNameAttribute)?.classList.add('active');
}
}
private _setVisibility(addOrRemove) {
private _setVisibility(addOrRemove: boolean) :void {
this._menu.style.visibility = addOrRemove ? "visible" : "hidden";
}
onRemove() {
onRemove(): void {
//this.cleanup();
this._isShowing && this.hide();
//for (var i = 0; i < this._eventConnections.length; i ++)

202
webpack.config.js
View File

@ -1,31 +1,40 @@
require('dotenv').config();
const path = require('path');
const webpack = require('webpack'); //e.g. for iusing DefinePlugin
require("dotenv").config();
const path = require("path");
const webpack = require("webpack"); //e.g. for iusing DefinePlugin
// const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const TerserPlugin = require("terser-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
// const { VueLoaderPlugin } = require('vue-loader');
/**
* flag Used to check if the environment is production or not
*/
const isProduction = (process.env.NODE_ENV === 'production');
const devMode = (process.env.NODE_ENV !== 'production');
// const isProduction = (process.env.NODE_ENV === 'production');
// const devMode = (process.env.NODE_ENV !== 'production');
/**
* Include hash to filenames for cache busting - only at production
*/
const fileNamePrefix = isProduction ? '[chunkhash].' : '';
// const fileNamePrefix = isProduction ? "[chunkhash]." : "";
module.exports = {
mode: process.env.NODE_ENV,
let isProduction, devMode;
module.exports = (env, argv) => {
isProduction = argv.mode === "production";
devMode = argv.mode !== "production";
// const fileNamePrefix = isProduction ? "[chunkhash]." : "";
console.log(`This is the Webpack 5 'mode': ${argv.mode}`);
return {
// mode: process.env.NODE_ENV,
context: __dirname,
entry: './src/js/main.js',
entry: "./src/js/main.js",
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
//filename: fileNamePrefix + '[name].js',
publicPath: '/dist/',
path: path.resolve(__dirname, "dist"),
filename: "[name].js",
// filename: fileNamePrefix + '[name].js',
publicPath: "/dist/",
},
// resolve: {
// alias: {
@ -73,18 +82,21 @@ module.exports = {
test: /\.(js|jsx|tsx|ts)$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
loader: "babel-loader",
// options: {
// presets: ['@babel/preset-env']
// }
}
},
},
{
test: /\.(scss|css)$/,
use: [
{
loader: (isProduction === true) ? MiniCssExtractPlugin.loader : 'style-loader',
loader:
isProduction === true
? MiniCssExtractPlugin.loader
: "style-loader",
// loader: 'style-loader',
// loader: MiniCssExtractPlugin.loader,
// options: {
@ -101,8 +113,8 @@ module.exports = {
{
loader: "css-loader",
options: {
sourceMap: true
}
sourceMap: true,
},
},
// {
// loader: 'resolve-url-loader',
@ -111,52 +123,40 @@ module.exports = {
{
loader: "sass-loader",
options: {
sourceMap: true
}
}
]
sourceMap: true,
},
]
},
],
},
],
},
resolve: {
extensions: ['*', '.js', '.jsx', '.tsx', '.ts'],
extensions: ["*", ".js", ".jsx", ".tsx", ".ts"],
},
stats: {
colors: true
colors: true,
},
devtool: (isProduction === true) ? 'hidden-source-map' : 'inline-source-map',
// devtool: (isProduction === true) ? 'hidden-source-map' : 'inline-source-map',
devtool: (isProduction === true) ? 'hidden-source-map' : 'eval',
optimization: {
minimize: isProduction,
minimizer: [
new TerserPlugin({
// cache: true,
parallel: true,
// sourceMap: true, // Must be set to true if using source-maps in production
extractComments: true,
terserOptions: {
compress: {
directives: false,
// drop_console: true,
// drop_debugger: true,
// keep_classnames: false,
// keep_fnames: false,
},
mangle: true, // Note `mangle.properties` is `false` by default.
keep_classnames: false,
keep_fnames: false,
}
})
],
runtimeChunk: 'single',
runtimeChunk: "single",
splitChunks: {
cacheGroups: {
vendor: {
defaultVendors: {
test: /[\\\/]node_modules[\\\/]/,
name: 'vendors',
chunks: 'all'
name: "chunk-vendors",
// chunks: 'all',
priority: -10,
chunks: "initial",
},
common: {
name: "chunk-common",
minChunks: 2,
priority: -20,
chunks: "initial",
reuseExistingChunk: true,
},
// styles: {
// name: 'styles',
@ -164,14 +164,61 @@ module.exports = {
// chunks: 'all',
// enforce: true
// }
}
},
},
minimizer: [
new TerserPlugin({
// cache: true,
parallel: true,
// sourceMap: true, // Must be set to true if using source-maps in production
extractComments: true,
terserOptions: {
// compress: {
// directives: false,
// // drop_console: true,
// // drop_debugger: true,
// // keep_classnames: false,
// // keep_fnames: false,
// },
compress: {
directives: false,
arrows: true,
collapse_vars: true,
comparisons: true,
computed_props: true,
hoist_funs: true,
hoist_props: true,
hoist_vars: true,
inline: true,
loops: true,
negate_iife: true,
properties: true,
reduce_funcs: true,
reduce_vars: true,
switches: true,
toplevel: true,
typeofs: true,
booleans: true,
if_return: true,
sequences: true,
unused: true,
conditionals: true,
dead_code: false,
evaluate: true,
},
mangle: true, // Note `mangle.properties` is `false` by default.
keep_classnames: false,
keep_fnames: false,
},
}),
],
},
plugins: [
// new VueLoaderPlugin(),
new webpack.DefinePlugin({ // Remove this plugin if you don't plan to define any global constants
new webpack.DefinePlugin({
// Remove this plugin if you don't plan to define any global constants
ENVIRONMENT: JSON.stringify(process.env.NODE_ENV),
CONSTANT_VALUE: JSON.stringify(process.env.CONSTANT_VALUE),
MATOMO_SITE_ID: JSON.stringify(process.env.MATOMO_SITE_ID),
@ -180,17 +227,18 @@ module.exports = {
POINT_URL: JSON.stringify(process.env.POINT_URL),
EDGE_URL: JSON.stringify(process.env.EDGE_URL),
CUSTOM_VAR: JSON.stringify('value5 goes here'), // no quotes needed, string value
CUSTOM_VAR: JSON.stringify("value5 goes here"), // no quotes needed, string value
}),
// extractLess,
new MiniCssExtractPlugin({ // Make sure MiniCssExtractPlugin instance is included in array before the PurifyCSSPlugin
new MiniCssExtractPlugin({
// Make sure MiniCssExtractPlugin instance is included in array before the PurifyCSSPlugin
// Options similar to the same options in webpackOptions.output
// both options are optional
// filename: '[name].css',
// chunkFilename: '[id].css',
filename: '[name].css',
chunkFilename: '[id].css',
filename: "[name].css",
chunkFilename: "[id].css",
}),
// new PurifyCSSPlugin({
@ -198,33 +246,13 @@ module.exports = {
// minimize: true,
// }),
// new webpack.HotModuleReplacementPlugin(),
],
(isProduction) && new WebpackManifestPlugin({
fileName: 'manifest.json'
}),
//auto updating on webpack dev server
(devMode) && new webpack.HotModuleReplacementPlugin() // HMR plugin will cause problems with [chunkhash]
].filter(Boolean),
};
};
/**
* Production only plugins
*/
if (isProduction === true) {
module.exports.plugins.push(
// module.exports.optimization.minimizer.push(
// new UglifyJsPlugin({ sourceMap: true })
// );
// function () { // Create a manifest.json file that contain the hashed file names of generated static resources
// this.plugin("done", function (status) {
// require("fs").writeFileSync(
// __dirname + "/dist/manifest.json",
// JSON.stringify(status.toJson().assetsByChunkName)
// );
// });
// },
);
//development
} else {
module.exports.plugins.push(
//auto updating on dev server
new webpack.HotModuleReplacementPlugin()// HMR plugin will cause problems with [chunkhash]
);
}