├── .babelrc
├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── src
    └── index.ts
├── tsconfig.json
└── webpack.config.js


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     "@babel/env",
 4 |     "@babel/typescript"
 5 |   ],
 6 |   "plugins": [
 7 |     "@babel/proposal-class-properties",
 8 |     "@babel/proposal-object-rest-spread"
 9 |   ]
10 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Webpack-TypeScript-Babel
 2 | 
 3 | > This is sample repository demonstrates how to use Webpack, TypeScript and Babel
 4 | 
 5 | ## Building the repo
 6 | 
 7 | ```shell
 8 | npm run build
 9 | ```
10 | 
11 | ## Building only types
12 | 
13 | ```shell
14 | npm run build:types
15 | ```
16 | 
17 | ## Type-Checking the repo
18 | 
19 | ```shell
20 | npm run type-check
21 | ```
22 | 
23 | And to run in --watch mode:
24 | 
25 | ```shell
26 | npm run type-check:watch
27 | ```


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "webpack-typescript-babel",
 3 |   "version": "1.0.0",
 4 |   "description": "A sample setup using Webpack and Babel to build TypeScript code, and using TypeScript for type-checking.",
 5 |   "scripts": {
 6 |     "type-check": "tsc --noEmit",
 7 |     "type-check:watch": "npm run type-check -- --watch",
 8 |     "build:types": "tsc --emitDeclarationOnly",
 9 |     "build:js": "webpack --mode=production",
10 |     "build": "npm run build:types && npm run build:js"
11 |   },
12 |   "author": {
13 |     "name": "Oleksandr T.",
14 |     "email": "oleksandr.tarasiuk@outlook.com"
15 |   },
16 |   "main": "dist/bundle.js",
17 |   "types": "dist/types/index.d.ts",
18 |   "license": "MIT",
19 |   "devDependencies": {
20 |     "@babel/core": "7.21.4",
21 |     "@babel/plugin-proposal-class-properties": "7.18.6",
22 |     "@babel/plugin-proposal-object-rest-spread": "7.20.7",
23 |     "@babel/preset-env": "7.21.4",
24 |     "@babel/preset-typescript": "7.21.4",
25 |     "@types/node": "18.16.0",
26 |     "babel-loader": "9.1.2",
27 |     "fork-ts-checker-webpack-plugin": "8.0.0",
28 |     "typescript": "5.0.4",
29 |     "webpack": "5.80.0",
30 |     "webpack-cli": "5.0.2"
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
 1 | export interface Props {
 2 |   x: number;
 3 |   y: number;
 4 | }
 5 | 
 6 | export class Value {
 7 |   private value = 10
 8 |   private props: Props = { x: 0, y: 0 };
 9 | 
10 |   getValue(): number {
11 |     return this.value;
12 |   }
13 | 
14 |   setValue(value: number): void {
15 |     this.value = value;
16 |   }
17 | 
18 |   setProps(props: Props) {
19 |     this.props = props;
20 |   }
21 | 
22 |   getProps(): Props {
23 |     return this.props;
24 |   }
25 | }
26 | 
27 | const value = new Value();
28 | value.setValue(1000);
29 | value.getValue();
30 | 
31 | const value1 = new Value()
32 | value1.setProps({ x: 1000, y: 1000 });
33 | value1.getProps();
34 | 
35 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "allowSyntheticDefaultImports": true,
 4 |     "noFallthroughCasesInSwitch": true,
 5 |     "noUnusedParameters": true,
 6 |     "noImplicitReturns": true,
 7 |     "esModuleInterop": true,
 8 |     "noUnusedLocals": true,
 9 |     "noImplicitAny": true,
10 |     "declarationDir": "dist/types",
11 |     "declaration": true,
12 |     "target": "es2015",
13 |     "module": "es2015",
14 |     "strict": true
15 |   },
16 |   "include": [
17 |     "src/**/*"
18 |   ],
19 |   "exclude": [
20 |     "node_modules",
21 |     "dist"
22 |   ]
23 | }


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 3 | 
 4 | module.exports = {
 5 |   entry: path.resolve(__dirname, 'src'),
 6 | 
 7 |   output: {
 8 |     filename: 'bundle.js',
 9 |     path: path.resolve(__dirname, 'dist'),
10 |   },
11 | 
12 |   resolve: {
13 |     extensions: ['.ts', '.tsx', '.js', '.json']
14 |   },
15 | 
16 |   module: {
17 |     rules: [{ test: /\.(ts|js)x?$/, loader: 'babel-loader', exclude: /node_modules/ }],
18 |   },
19 | 
20 |   plugins: [
21 |     new ForkTsCheckerWebpackPlugin(),
22 |   ]
23 | };
24 | 


--------------------------------------------------------------------------------