test release of create-ts-web-app

VoloshchenkoAl · VoloshchenkoAl · commit 19d5e00626b3 · 2020-04-21T01:01:52.000+03:00
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/bin/index.js b/bin/index.js
@@ -0,0 +1,46 @@
+#!/usr/bin/env node
+const { program } = require('commander');
+const fs = require('fs-extra');
+const path = require('path');
+const { spawnSync } = require('child_process');
+
+const templatePackageJson = require('../template/package.json');
+const packageJson = require('../package.json');
+
+let projectName;
+
+program
+    .version(packageJson.version)
+    .arguments('<project-directory>')
+    .action(name => {
+        projectName = name;
+    })
+    .parse(process.arg);
+
+createApp({ name: projectName });
+
+
+function createApp({ name }) {
+    console.log('Installing...');
+
+    const root = path.resolve(name);
+    const templateDirPath = path.resolve(__dirname, '../', 'template');
+    fs.ensureDirSync(root);
+    fs.copySync(templateDirPath, root);
+    fs.writeFileSync(
+        path.join(root, 'package.json'),
+        updatePackageJson()
+    );
+    install({ cwd: root });
+}
+
+function updatePackageJson() {
+    const updateTemplatePackageJson = { ...templatePackageJson };
+    updateTemplatePackageJson.name = projectName;
+
+    return JSON.stringify(updateTemplatePackageJson, null, 2);
+}
+
+function install({ cwd }) {
+    spawnSync('npm', ['install'], { cwd });
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "create-ts-web-app",
+  "version": "0.0.1",
+  "description": "Create base template for ts web app",
+  "license": "MIT",
+  "bin": {
+    "create-ts-web-app": "./bin/index.js"
+  },
+  "author": "Aleksandr Voloshchenko <voloshchenkoal@gmail.com>",
+  "dependencies": {
+    "commander": "^5.0.0",
+    "fs-extra": "^9.0.0"
+  }
+}
diff --git a/template/.gitignore b/template/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+/build
diff --git a/template/package.json b/template/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "create-ts-web-app",
+  "version": "1.0.0",
+  "description": "",
+  "private": true,
+  "scripts": {
+    "build": "webpack --config webpack.prod.config.js",
+    "start": "webpack-dev-server --open"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "clean-webpack-plugin": "^3.0.0",
+    "css-loader": "^3.5.2",
+    "html-webpack-plugin": "^4.2.0",
+    "mini-css-extract-plugin": "^0.9.0",
+    "sass": "^1.26.3",
+    "sass-loader": "^8.0.2",
+    "style-loader": "^1.1.3",
+    "ts-loader": "^7.0.0",
+    "typescript": "^3.8.3",
+    "webpack": "^4.42.1",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.10.3"
+  }
+}
diff --git a/template/public/index.html b/template/public/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Create ts web app</title>
+</head>
+<body>
+
+</body>
+</html>
diff --git a/template/src/app.ts b/template/src/app.ts
@@ -0,0 +1,7 @@
+export const initApp = () => {
+    document.addEventListener('DOMContentLoaded', () => {
+        const h1 = document.createElement('h1');
+        h1.innerText = 'Hello world!';
+        document.body.appendChild(h1);
+    });
+}
diff --git a/template/src/index.scss b/template/src/index.scss
@@ -0,0 +1,15 @@
+html {
+    height: 100%;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    line-height: 1.6;
+    font-size: 16px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+}
diff --git a/template/src/index.ts b/template/src/index.ts
@@ -0,0 +1,4 @@
+import { initApp } from './app';
+import './index.scss';
+
+initApp();
diff --git a/template/tsconfig.json b/template/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "outDir": "./build/",
+    "sourceMap": true,
+    "noImplicitAny": true,
+    "module": "es6",
+    "target": "es5",
+    "allowJs": true,
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "exclude": [
+      "node_modules"
+  ]
+}
diff --git a/template/webpack.config.js b/template/webpack.config.js
@@ -0,0 +1,42 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+    mode: 'development',
+    entry: './src/index.ts',
+    output: {
+        filename: 'bundle.js',
+        path: path.join(__dirname, 'build'),
+    },
+    devtool: 'inline-source-map',
+    module: {
+        rules: [
+            {
+                test: /\.ts$/,
+                exclude: /node_modules/,
+                use: 'ts-loader',
+            },
+            {
+                test: /\.s[ac]ss$/,
+                use: [
+                    'style-loader',
+                    'css-loader',
+                    'sass-loader',
+                ]
+            }
+        ]
+    },
+    devServer: {
+        contentBase: path.join(__dirname, 'src'),
+        hot: true,
+    },
+    resolve: {
+        extensions: ['.ts', '.js', '.json'],
+        modules: ['node_modules']
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            template: path.join(__dirname, 'public', 'index.html')
+        }),
+    ]
+};
diff --git a/template/webpack.prod.config.js b/template/webpack.prod.config.js
@@ -0,0 +1,43 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+
+module.exports = {
+    mode: 'production',
+    entry: './src/index.ts',
+    output: {
+        filename: 'bundle.[hash].js',
+        path: path.join(__dirname, 'build'),
+    },
+    module: {
+        rules: [
+            {
+                test: /\.ts$/,
+                exclude: /node_modules/,
+                use: 'ts-loader',
+            },
+            {
+                test: /\.s[ac]ss$/,
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    'css-loader',
+                    'sass-loader',
+                ]
+            }
+        ]
+    },
+    resolve: {
+        extensions: ['.ts', '.js', '.json'],
+        modules: ['node_modules']
+    },
+    plugins: [
+        new CleanWebpackPlugin(),
+        new MiniCssExtractPlugin({
+            filename: '[name].[hash].css',
+        }),
+        new HtmlWebpackPlugin({
+            template: path.join(__dirname, 'public', 'index.html')
+        }),
+    ]
+};
