initial

SammyVimes · Oct 5, 2021 · d25eb93 · d25eb93
commit d25eb93
Show file tree

Hide file tree

Showing 9 changed files with 7,927 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,7 @@
+.idea/
+node_modules/
+typings/
+dist/
+coverage/
+*.log
+*.lock
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,46 @@
+{
+    "name": "webpack-typescript-starter",
+    "version": "0.0.1",
+    "description": "A simple Webpack starter with TypeScript transpilation",
+    "scripts": {
+        "serve": "webpack-dev-server --progress --color",
+        "build": "webpack -w",
+        "build:prod": "cross-env NODE_ENV=production webpack",
+        "test": "karma start"
+    },
+    "keywords": [
+        "webpack",
+        "typescript"
+    ],
+    "author": "Semyon Danilov",
+    "license": "LGPL",
+    "devDependencies": {
+        "@types/node": "9.6.5",
+        "@types/jquery": "3.3.31",
+        "cross-env": "5.1.4",
+        "html-webpack-plugin": "3.2.0",
+        "source-map-loader": "0.2.3",
+        "ts-loader": "4.2.0",
+        "tslint": "5.9.1",
+        "tslint-loader": "3.6.0",
+        "typescript": "2.8.1",
+        "uglifyjs-webpack-plugin": "1.2.4",
+        "less": "3.10.3",
+        "less-loader": "5.0.0",
+        "expose-loader": "0.7.5",
+        "style-loader": "1.0.0",
+        "css-loader": "3.2.0",
+        "postcss-loader": "3.0.0",
+        "raw-loader": "3.1.0",
+        "autoprefixer": "9.6.1",
+        "webpack": "4.41.0",
+        "webpack-cli": "3.3.9",
+        "webpack-dev-server": "3.8.2",
+        "webpack-merge": "4.1.2"
+    },
+    "dependencies": {
+        "bootstrap": "4.3.1",
+        "popper.js": "1.14.7",
+        "jquery": "3.4.1"
+    }
+}
diff --git a/src/html/index.html b/src/html/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Calculator</title>
+</head>
+<body>
+    <div class="container">
+        <div id="header">
+            <h3>Typescript Calculator</h3>
+        </div>
+
+        <div id="calc" class="text-center">
+            <div id="display">
+                <div id="result"><p>0</p></div>
+                <div id="previous"><p>0</p></div>
+            </div>
+
+            <div id="keyboard">
+                <div class="row">
+                    <button class="btn btn-info" value="7">7</button>
+                    <button class="btn btn-info" value="8">8</button>
+                    <button class="btn btn-info" value="9">9</button>
+                    <button class="btn btn-danger" value="ac">AC</button>
+                    <button class="btn btn-danger" value="ce">CE</button>
+                </div>
+                <div class="row">
+                    <button class="btn btn-info" value="4">4</button>
+                    <button class="btn btn-info" value="5">5</button>
+                    <button class="btn btn-info" value="6">6</button>
+                    <button class="btn btn-warning" value="/">/</button>
+                    <button class="btn btn-warning" value="*">*</button>
+                </div>
+                <div class="row">
+                    <button class="btn btn-info" value="1">1</button>
+                    <button class="btn btn-info" value="2">2</button>
+                    <button class="btn btn-info" value="3">3</button>
+                    <button class="btn btn-warning" value="+">+</button>
+                    <button class="btn btn-warning" value="-">-</button>
+                </div>
+                <div class="row">
+                    <button class="btn btn-info btn-zero" value="0">0</button>
+                    <button class="btn btn-success btn-result" value="=">=</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/src/styles/calculator.less b/src/styles/calculator.less
@@ -0,0 +1,58 @@
+body {
+  background:antiquewhite;
+}
+
+#header {
+  text-align: center;
+  font-family: monospace;
+}
+
+#calc {
+  text-align: center;
+  width: 380px;
+  display: block;
+  border-radius:8px;
+  border: 1px solid #abc6c2;
+  padding:8px;
+  margin-top:20px;
+  margin-left:auto;
+  margin-right:auto;
+  background: #224662;
+}
+
+#display {
+  background: #bcbcbc;
+  padding: 8px;
+  margin:16px 12px 10px 16px;
+  text-align: center;
+  font-family: 'Share Tech Mono', monospace;
+  border-radius:8px;
+}
+
+#result p{
+  font-size:1.8em;
+}
+
+#result,
+#previous {
+  text-align: right;
+}
+
+#keyboard {
+  display: inline-block;
+  text-align: center;
+  margin-bottom:8px;
+}
+
+.row {
+  margin-top: 4px;
+}
+
+button {
+  width: 62px;
+  margin: 2px;
+}
+
+.btn-zero,.btn-result {
+  width: 161px;
+}
diff --git a/src/ts/app-thirdparty.ts b/src/ts/app-thirdparty.ts
@@ -0,0 +1,4 @@
+import 'expose-loader?$!jquery';
+
+import "bootstrap";
+import 'bootstrap/dist/css/bootstrap.min.css';
diff --git a/src/ts/main.ts b/src/ts/main.ts
@@ -0,0 +1,2 @@
+import "./app-thirdparty";
+import "../styles/calculator.less";
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,28 @@
+{
+    "compileOnSave": false,
+    "compilerOptions": {
+        "sourceMap": true,
+        "declaration": false,
+        "moduleResolution": "node",
+        "emitDecoratorMetadata": true,
+        "experimentalDecorators": true,
+        "target": "es5",
+        "module": "esnext",
+        "typeRoots": [
+            "./node_modules/@types"
+        ],
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true,
+        "lib": [
+            "es2017",
+            "es2015",
+            "dom"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "noUnusedParameters": true,
+        "forceConsistentCasingInFileNames": true,
+        "allowJs": true,
+        "strictNullChecks": false
+    }
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,111 @@
+const path = require('path');
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const merge = require('webpack-merge');
+const isProduction = process.env.NODE_ENV == 'production';
+
+const modes = {
+    [true]: 'production',
+    [false]: 'development'
+};
+
+const config = {
+    context: __dirname,
+
+    entry: './src/ts/main.ts',
+
+    output: {
+        filename: '[name].[hash].js',
+        chunkFilename: '[name].[chunkhash].chunk.js',
+        pathinfo: true
+    },
+
+    target: 'web',
+
+    mode: modes[isProduction],
+
+    resolve: {
+        extensions: ['.js', '.ts', '.less', '.css']
+    },
+
+    module: {
+        rules: [{
+            enforce: 'pre',
+            test: /\.js$/,
+            loader: 'source-map-loader'
+        }, {
+            enforce: 'pre',
+            test: /\.ts$/,
+            exclude: /node_modules/,
+            loader: 'tslint-loader'
+        }, {
+            test: /\.ts$/,
+            loader: 'ts-loader'
+        }, {
+            test: /\.css$/,
+            use: ['style-loader', 'css-loader']
+        }, {
+            test: /\.(less)$/,
+            use: [{
+                loader: 'style-loader', // inject CSS to page
+            }, {
+                loader: 'css-loader', // translates CSS into CommonJS modules
+            }, {
+                loader: 'postcss-loader', // Run postcss actions
+                options: {
+                    plugins: function () { // postcss plugins, can be exported to postcss.config.js
+                        return [
+                            require('autoprefixer')
+                        ];
+                    }
+                }
+            }, {
+                loader: 'less-loader' // compiles LESS to CSS
+            }]
+        }]
+    },
+
+    devtool: "source-map",
+
+    plugins: [
+        new HtmlWebpackPlugin({
+            template: './src/html/index.html'
+        })
+    ]
+};
+
+if (isProduction) {
+    const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+
+    module.exports = merge(config, {
+        optimization: {
+            minimize: true,
+
+            minimizer: [
+                new UglifyJsPlugin({
+                    parallel: require('os').cpus().length,
+
+                    uglifyOptions: {
+                        ie8: false,
+
+                        output: {
+                            ecma: 8,
+                            beautify: false,
+                            comments: false
+                        }
+                    }
+                })
+            ]
+        }
+    });
+} else {
+    module.exports = merge(config, {
+        devServer: {
+            port: 4200,
+            open: true,
+            watchContentBase: true,
+            historyApiFallback: true
+        }
+    });
+}
+
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		import "./app-thirdparty";
		import "../styles/calculator.less";