From b8a8f035028df5d9df584616c8a0e094985992ac Mon Sep 17 00:00:00 2001 From: Rob Larsen Date: Wed, 16 Apr 2025 15:20:29 +0000 Subject: [PATCH] Working implementation --- dist/index.html | 2 +- dist/package.json | 14 +++++++------ dist/{js => scripts}/app.js | 0 dist/scripts/app.ts | 6 ++++++ dist/tsconfig.json | 11 ++++++++++ dist/webpack.common.js | 21 +++++++++++++------ dist/webpack.config.prod.js | 1 - gulpfile.mjs | 2 +- package-lock.json | 9 ++++---- src/index.html | 2 +- src/js/vendor/.gitkeep | 0 src/package.json | 2 ++ src/{js => scripts}/app.js | 0 dist/js/vendor/.gitkeep => src/scripts/app.ts | 0 src/tsconfig.json | 11 ++++++++++ src/webpack.common.js | 21 +++++++++++++------ src/webpack.config.prod.js | 1 - 17 files changed, 76 insertions(+), 27 deletions(-) rename dist/{js => scripts}/app.js (100%) create mode 100644 dist/scripts/app.ts create mode 100644 dist/tsconfig.json delete mode 100644 src/js/vendor/.gitkeep rename src/{js => scripts}/app.js (100%) rename dist/js/vendor/.gitkeep => src/scripts/app.ts (100%) create mode 100644 src/tsconfig.json diff --git a/dist/index.html b/dist/index.html index f3add49d..d4418a12 100644 --- a/dist/index.html +++ b/dist/index.html @@ -26,7 +26,7 @@

Hello world! This is HTML5 Boilerplate.

- + diff --git a/dist/package.json b/dist/package.json index b7438a8d..d21573b3 100644 --- a/dist/package.json +++ b/dist/package.json @@ -14,11 +14,13 @@ "build": "webpack --config webpack.config.prod.js" }, "devDependencies": { - "copy-webpack-plugin": "^11.0.0", - "html-webpack-plugin": "^5.6.0", - "webpack": "^5.91.0", - "webpack-cli": "^5.1.4", - "webpack-dev-server": "^5.0.4", - "webpack-merge": "^5.10.0" + "copy-webpack-plugin": "^13.0.0", + "html-webpack-plugin": "^5.6.3", + "ts-loader": "^9.5.2", + "typescript": "^5.8.3", + "webpack": "^5.99.5", + "webpack-cli": "^6.0.1", + "webpack-dev-server": "^5.2.1", + "webpack-merge": "^6.0.1" } } diff --git a/dist/js/app.js b/dist/scripts/app.js similarity index 100% rename from dist/js/app.js rename to dist/scripts/app.js diff --git a/dist/scripts/app.ts b/dist/scripts/app.ts new file mode 100644 index 00000000..9f13f2f0 --- /dev/null +++ b/dist/scripts/app.ts @@ -0,0 +1,6 @@ +function foo(){ + console.log("typescript"); +} +foo(); + +function yes(){} \ No newline at end of file diff --git a/dist/tsconfig.json b/dist/tsconfig.json new file mode 100644 index 00000000..00cd0e84 --- /dev/null +++ b/dist/tsconfig.json @@ -0,0 +1,11 @@ +{ + "compilerOptions": { + "outDir": "./dist/", + "noImplicitAny": true, + "sourceMap": true, + "module": "es6", + "target": "es6", + "allowJs": true, + "moduleResolution": "node" + } + } \ No newline at end of file diff --git a/dist/webpack.common.js b/dist/webpack.common.js index b502ea95..00c9fe0e 100644 --- a/dist/webpack.common.js +++ b/dist/webpack.common.js @@ -1,12 +1,21 @@ -const path = require('path'); - module.exports = { + module: { + rules: [ + { + test: /\.tsx?$/, + use: 'ts-loader', + exclude: /node_modules/, + }, + ], + }, + devtool: 'inline-source-map', + resolve: { + extensions: ['.tsx', '.ts', '.js'], + }, entry: { - app: './js/app.js', + app: './scripts/app.ts', }, output: { - path: path.resolve(__dirname, 'dist'), - clean: true, - filename: './js/app.js', + filename: './scripts/app.js', }, }; diff --git a/dist/webpack.config.prod.js b/dist/webpack.config.prod.js index 76800e80..f653ec66 100644 --- a/dist/webpack.config.prod.js +++ b/dist/webpack.config.prod.js @@ -13,7 +13,6 @@ module.exports = merge(common, { patterns: [ { from: 'img', to: 'img' }, { from: 'css', to: 'css' }, - { from: 'js/vendor', to: 'js/vendor' }, { from: 'icon.svg', to: 'icon.svg' }, { from: 'favicon.ico', to: 'favicon.ico' }, { from: 'robots.txt', to: 'robots.txt' }, diff --git a/gulpfile.mjs b/gulpfile.mjs index c0139cce..0f7bfd05 100644 --- a/gulpfile.mjs +++ b/gulpfile.mjs @@ -120,7 +120,7 @@ gulp.task('copy:misc', () => gulp.task('lint:js', () => gulp - .src([`${dirs.src}/js/*.js`, `${dirs.src}/*.js`, `${dirs.test}/*.mjs`]) + .src([`${dirs.src}/scripts/*.ts`,`${dirs.src}/scripts/*.js`, `${dirs.src}/*.js`, `${dirs.test}/*.mjs`]) .pipe(gulpEslint()) .pipe(gulpEslint.failOnError()), ); diff --git a/package-lock.json b/package-lock.json index e44bfc24..b7594cfc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1171,9 +1171,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001566", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001566.tgz", - "integrity": "sha512-ggIhCsTxmITBAMmK8yZjEhCO5/47jKXPu6Dha/wuCS4JePVL+3uiDEBuhu2aIoT+bqTOR8L76Ip1ARL9xYsEJA==", + "version": "1.0.30001714", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001714.tgz", + "integrity": "sha512-mtgapdwDLSSBnCI3JokHM7oEQBLxiJKVRtg10AxM1AyeiKcM96f0Mkbqeq+1AbiCtvMcHRulAAEMu693JrSWqg==", "dev": true, "funding": [ { @@ -1188,7 +1188,8 @@ "type": "github", "url": "https://github.com/sponsors/ai" } - ] + ], + "license": "CC-BY-4.0" }, "node_modules/chalk": { "version": "2.4.2", diff --git a/src/index.html b/src/index.html index f3add49d..d4418a12 100644 --- a/src/index.html +++ b/src/index.html @@ -26,7 +26,7 @@

Hello world! This is HTML5 Boilerplate.

- + diff --git a/src/js/vendor/.gitkeep b/src/js/vendor/.gitkeep deleted file mode 100644 index e69de29b..00000000 diff --git a/src/package.json b/src/package.json index e686ac1e..d21573b3 100644 --- a/src/package.json +++ b/src/package.json @@ -16,6 +16,8 @@ "devDependencies": { "copy-webpack-plugin": "^13.0.0", "html-webpack-plugin": "^5.6.3", + "ts-loader": "^9.5.2", + "typescript": "^5.8.3", "webpack": "^5.99.5", "webpack-cli": "^6.0.1", "webpack-dev-server": "^5.2.1", diff --git a/src/js/app.js b/src/scripts/app.js similarity index 100% rename from src/js/app.js rename to src/scripts/app.js diff --git a/dist/js/vendor/.gitkeep b/src/scripts/app.ts similarity index 100% rename from dist/js/vendor/.gitkeep rename to src/scripts/app.ts diff --git a/src/tsconfig.json b/src/tsconfig.json new file mode 100644 index 00000000..00cd0e84 --- /dev/null +++ b/src/tsconfig.json @@ -0,0 +1,11 @@ +{ + "compilerOptions": { + "outDir": "./dist/", + "noImplicitAny": true, + "sourceMap": true, + "module": "es6", + "target": "es6", + "allowJs": true, + "moduleResolution": "node" + } + } \ No newline at end of file diff --git a/src/webpack.common.js b/src/webpack.common.js index b502ea95..00c9fe0e 100644 --- a/src/webpack.common.js +++ b/src/webpack.common.js @@ -1,12 +1,21 @@ -const path = require('path'); - module.exports = { + module: { + rules: [ + { + test: /\.tsx?$/, + use: 'ts-loader', + exclude: /node_modules/, + }, + ], + }, + devtool: 'inline-source-map', + resolve: { + extensions: ['.tsx', '.ts', '.js'], + }, entry: { - app: './js/app.js', + app: './scripts/app.ts', }, output: { - path: path.resolve(__dirname, 'dist'), - clean: true, - filename: './js/app.js', + filename: './scripts/app.js', }, }; diff --git a/src/webpack.config.prod.js b/src/webpack.config.prod.js index 76800e80..f653ec66 100644 --- a/src/webpack.config.prod.js +++ b/src/webpack.config.prod.js @@ -13,7 +13,6 @@ module.exports = merge(common, { patterns: [ { from: 'img', to: 'img' }, { from: 'css', to: 'css' }, - { from: 'js/vendor', to: 'js/vendor' }, { from: 'icon.svg', to: 'icon.svg' }, { from: 'favicon.ico', to: 'favicon.ico' }, { from: 'robots.txt', to: 'robots.txt' },