├── src ├── assets │ ├── fonts │ │ └── .gitkeep │ ├── images │ │ └── .gitkeep │ ├── vendor │ │ └── .gitkeep │ └── stylesheets │ │ ├── .gitkeep │ │ └── app.scss ├── index.html ├── App.ts ├── components │ └── Hello.tsx └── Main.tsx ├── .gitignore ├── .browserslistrc ├── LICENSE.md ├── package.json ├── env.config.js ├── webpack.config.development.js ├── webpack.config.production.js ├── README.md └── tsconfig.json /src/assets/fonts/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/images/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/vendor/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist -------------------------------------------------------------------------------- /src/assets/stylesheets/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | # Browsers that we support 2 | # Configure how you require 3 | # https://github.com/browserslist/browserslist 4 | 5 | last 2 versions 6 | > 1% 7 | IE 11 -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | App 9 | 10 | 11 | 12 |

13 | 14 | 15 | -------------------------------------------------------------------------------- /src/App.ts: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Main } from "./Main"; 3 | import { createRoot } from "react-dom/client"; 4 | 5 | export class App 6 | { 7 | constructor() 8 | { 9 | this.render(); 10 | } 11 | 12 | private render(): void 13 | { 14 | const root = createRoot(document.getElementById("app") || document.createElement("div")); 15 | root.render(React.createElement(Main, { app: this }, null)); 16 | } 17 | } 18 | 19 | new App(); -------------------------------------------------------------------------------- /src/components/Hello.tsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | export interface HelloProps 4 | { 5 | message: string; 6 | children: any; 7 | } 8 | 9 | interface HelloState 10 | { 11 | 12 | } 13 | 14 | export class Hello extends Component 15 | { 16 | public render(): JSX.Element 17 | { 18 | return ( 19 |

20 |

{this.props.message}

21 |

22 | {this.props.children} 23 |

24 |

25 | ); 26 | } 27 | } -------------------------------------------------------------------------------- /src/Main.tsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { App } from "./App"; 3 | import { Hello } from "./components/Hello"; 4 | 5 | export interface MainProps 6 | { 7 | app: App; 8 | } 9 | 10 | interface MainState 11 | { 12 | } 13 | 14 | export class Main extends Component 15 | { 16 | constructor(props: MainProps) 17 | { 18 | super(props); 19 | } 20 | 21 | public render(): JSX.Element 22 | { 23 | return ( 24 | 25 |

26 |

Webpack 5 + HMR

27 |

TypeScript + React

28 |

SCSS + Autoprefixing

29 |

30 | 31 | ); 32 | } 33 | } -------------------------------------------------------------------------------- /src/assets/stylesheets/app.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap'); 2 | 3 | :root 4 | { 5 | --color-example: #fff; 6 | } 7 | 8 | html,body 9 | { 10 | font-family: "Roboto", sans-serif; 11 | display: flex; 12 | flex-grow: 1; 13 | width: 100%; 14 | height: 100%; 15 | min-height: 100vh; 16 | font-size: 16px; 17 | text-align: center; 18 | color: var(--color-example); 19 | margin: 0; 20 | } 21 | 22 | #app 23 | { 24 | background-color: #4158D0; 25 | background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%); 26 | color: var(--color-example); 27 | display: flex; 28 | align-items: center; 29 | justify-content: center; 30 | flex-grow: 1; 31 | font-size: 2rem; 32 | } 33 | 34 | 35 | .features 36 | { 37 | font-size: 1.7rem; 38 | 39 | & div 40 | { 41 | padding: 0.5rem; 42 | } 43 | } -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | ### MIT License 2 | 3 | Copyright (c) 2019 Grant Bartlett 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-typescript-webpack-starter", 3 | "version": "3.0.0", 4 | "description": "A starter project for using React, TypeScript, SCSS and Webpack", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack serve --mode development --progress --hot --config ./webpack.config.development.js", 8 | "build": "webpack --mode production --config ./webpack.config.production.js" 9 | }, 10 | "keywords": [ 11 | "react", 12 | "typescript", 13 | "webpack", 14 | "scss" 15 | ], 16 | "author": "Grant Bartlett", 17 | "license": "MIT", 18 | "dependencies": { 19 | "react": "^18.2.0", 20 | "react-dom": "^18.2.0" 21 | }, 22 | "devDependencies": { 23 | "@types/react": "^18.0.15", 24 | "@types/react-dom": "^18.0.6", 25 | "clean-webpack-plugin": "^4.0.0", 26 | "copy-webpack-plugin": "^11.0.0", 27 | "css-loader": "^6.7.1", 28 | "file-loader": "^6.2.0", 29 | "html-webpack-plugin": "^5.5.0", 30 | "mini-css-extract-plugin": "^2.6.1", 31 | "postcss": "^8.4.14", 32 | "postcss-loader": "^7.0.1", 33 | "postcss-preset-env": "^7.7.2", 34 | "sass": "^1.53.0", 35 | "sass-loader": "^13.0.2", 36 | "style-loader": "^3.3.1", 37 | "terser-webpack-plugin": "^5.3.3", 38 | "ts-loader": "^9.3.1", 39 | "typescript": "^4.7.4", 40 | "webpack": "^5.73.0", 41 | "webpack-cli": "^4.10.0", 42 | "webpack-dev-server": "^4.9.3" 43 | } 44 | } -------------------------------------------------------------------------------- /env.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | const outputConfig = { 4 | destPath: "./dist" 5 | }; 6 | 7 | // Entry points 8 | // https://webpack.js.org/concepts/entry-points/ 9 | const entryConfig = [ 10 | "./src/App.ts", 11 | "./src/assets/stylesheets/app.scss", 12 | ]; 13 | 14 | 15 | // Copy files from src to dist 16 | // https://webpack.js.org/plugins/copy-webpack-plugin/ 17 | const copyPluginPatterns = { 18 | patterns: [ 19 | { from: "./src/assets/images", to: "images" }, 20 | { from: "./src/assets/fonts", to: "fonts" }, 21 | { from: "./src/assets/vendor", to: "js" }, 22 | ] 23 | }; 24 | 25 | 26 | // Dev server setup 27 | // https://webpack.js.org/configuration/dev-server/ 28 | const devServer = { 29 | static: { 30 | directory: path.join(__dirname, outputConfig.destPath), 31 | }, 32 | // https: true, 33 | // port: "8080", 34 | // host: "0.0.0.0", 35 | // disableHostCheck: true 36 | }; 37 | 38 | 39 | // SCSS compile 40 | const scssConfig = { 41 | destFileName: "css/app.min.css" 42 | }; 43 | 44 | 45 | // Production terser config options 46 | // https://webpack.js.org/plugins/terser-webpack-plugin/#terseroptions 47 | const terserPluginConfig = { 48 | extractComments: false, 49 | terserOptions: { 50 | compress: { 51 | drop_console: true, 52 | }, 53 | } 54 | }; 55 | 56 | module.exports.copyPluginPatterns = copyPluginPatterns; 57 | module.exports.entryConfig = entryConfig; 58 | module.exports.scssConfig = scssConfig; 59 | module.exports.devServer = devServer; 60 | module.exports.terserPluginConfig = terserPluginConfig; 61 | module.exports.outputConfig = outputConfig; -------------------------------------------------------------------------------- /webpack.config.development.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 | const CopyPlugin = require('copy-webpack-plugin'); 4 | const { outputConfig, copyPluginPatterns, entryConfig, devServer } = require("./env.config"); 5 | 6 | module.exports = (env, options) => 7 | { 8 | return { 9 | mode: options.mode, 10 | entry: entryConfig, 11 | devServer, 12 | // Dev only 13 | // Target must be set to web for hmr to work with .browserlist 14 | // https://github.com/webpack/webpack-dev-server/issues/2758#issuecomment-710086019 15 | target: "web", 16 | module: { 17 | rules: [ 18 | { 19 | test: /\.tsx?$/, 20 | use: "ts-loader", 21 | exclude: /node_modules/, 22 | }, 23 | { 24 | test: /\.scss$/, 25 | use: [ 26 | // We're in dev and want HMR, SCSS is handled in JS 27 | // In production, we want our css as files 28 | "style-loader", 29 | "css-loader", 30 | { 31 | loader: "postcss-loader", 32 | options: { 33 | postcssOptions: { 34 | plugins: [ 35 | ["postcss-preset-env"], 36 | ], 37 | }, 38 | }, 39 | }, 40 | "sass-loader" 41 | ], 42 | }, 43 | { 44 | test: /\.(?:ico|gif|png|jpg|jpeg|svg)$/i, 45 | type: "javascript/auto", 46 | loader: "file-loader", 47 | options: { 48 | publicPath: "../", 49 | name: "[path][name].[ext]", 50 | context: path.resolve(__dirname, "src/assets"), 51 | emitFile: false, 52 | }, 53 | }, 54 | { 55 | test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, 56 | type: "javascript/auto", 57 | exclude: /images/, 58 | loader: "file-loader", 59 | options: { 60 | publicPath: "../", 61 | context: path.resolve(__dirname, "src/assets"), 62 | name: "[path][name].[ext]", 63 | emitFile: false, 64 | }, 65 | }, 66 | ], 67 | }, 68 | resolve: { extensions: [".tsx", ".ts", ".js"] }, 69 | output: { 70 | filename: "js/[name].bundle.js", 71 | path: path.resolve(__dirname, outputConfig.destPath), 72 | publicPath: "", 73 | }, 74 | plugins: [ 75 | new HtmlWebpackPlugin({ 76 | template: "./src/index.html", 77 | inject: true, 78 | minify: false 79 | }), 80 | new CopyPlugin(copyPluginPatterns), 81 | ] 82 | }; 83 | }; -------------------------------------------------------------------------------- /webpack.config.production.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const { CleanWebpackPlugin } = require("clean-webpack-plugin"); 3 | const HtmlWebpackPlugin = require("html-webpack-plugin"); 4 | const CopyPlugin = require("copy-webpack-plugin"); 5 | const TerserPlugin = require("terser-webpack-plugin"); 6 | const MiniCssExtractPlugin = require("mini-css-extract-plugin"); 7 | const { outputConfig, copyPluginPatterns, scssConfig, entryConfig, terserPluginConfig } = require("./env.config"); 8 | 9 | module.exports = (env, options) => 10 | { 11 | return { 12 | mode: options.mode, 13 | entry: entryConfig, 14 | module: { 15 | rules: [ 16 | { 17 | test: /\.tsx?$/, 18 | use: "ts-loader", 19 | exclude: /node_modules/, 20 | }, 21 | { 22 | test: /\.scss$/, 23 | use: [ 24 | MiniCssExtractPlugin.loader, 25 | "css-loader", 26 | { 27 | loader: "postcss-loader", 28 | options: { 29 | postcssOptions: { 30 | plugins: [ 31 | ["postcss-preset-env"], 32 | ], 33 | }, 34 | }, 35 | }, 36 | "sass-loader" 37 | ], 38 | }, 39 | { 40 | test: /\.(?:ico|gif|png|jpg|jpeg|svg)$/i, 41 | type: "javascript/auto", 42 | loader: "file-loader", 43 | options: { 44 | publicPath: "../", 45 | name: "[path][name].[ext]", 46 | context: path.resolve(__dirname, "src/assets"), 47 | emitFile: false, 48 | }, 49 | }, 50 | { 51 | test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, 52 | type: "javascript/auto", 53 | exclude: /images/, 54 | loader: "file-loader", 55 | options: { 56 | publicPath: "../", 57 | context: path.resolve(__dirname, "src/assets"), 58 | name: "[path][name].[ext]", 59 | emitFile: false, 60 | }, 61 | }, 62 | ], 63 | }, 64 | resolve: { extensions: [".tsx", ".ts", ".js"] }, 65 | output: { 66 | filename: "js/[name].bundle.js", 67 | path: path.resolve(__dirname, outputConfig.destPath), 68 | publicPath: "", 69 | }, 70 | optimization: { 71 | minimizer: [ 72 | new TerserPlugin(terserPluginConfig) 73 | ], 74 | splitChunks: { 75 | chunks: "all", 76 | }, 77 | }, 78 | plugins: [ 79 | new CleanWebpackPlugin(), 80 | new CopyPlugin(copyPluginPatterns), 81 | new MiniCssExtractPlugin({ filename: scssConfig.destFileName }), 82 | new HtmlWebpackPlugin({ 83 | template: "./src/index.html", 84 | inject: true, 85 | minify: false 86 | }), 87 | ] 88 | }; 89 | }; -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Hey 👋 2 | Hey, I'm Grant, A Freelance Software Developer. I help agencies, startups, and individuals stand out by creating exceptional websites, mobile apps, and digital experiences. Based in Surrey, I work with clients in London and internationally, providing flexible, tailored solutions for every project. 3 | 4 | If you're looking for a mobile app, a responsive website, or a unique digital solution, I'm here to deliver standout results crafted to your needs. Say hi 👋 [Get in touch](https://grant-bartlett.com/) 5 | 6 | 7 | ![logo](https://user-images.githubusercontent.com/6104940/107880275-b04f2b80-6ed5-11eb-9852-de05425070cc.png) 8 | 9 | # React TypeScript Webpack Starter 10 | A starter project for using React, TypeScript, SCSS and Webpack. 11 | 12 | ## Features 13 | - Webpack 5 + HMR 14 | - TypeScript + React 18 15 | - SCSS + Autoprefixing 16 | 17 | ## 🚀 Getting Started 18 | 19 | Get up and running with these simple steps: 20 | 21 | 1. Clone the project 22 | 2. Run `npm install` 23 | 3. Run `npm run dev` 24 | 25 | 26 | ## Class & Functional stubs 27 | In the `master` branch you can find the class based starter. In the branch `functional` you can find the functional based starter. 28 | 29 | 30 | ## Configuration 31 | Optional configuration for the project can be done in the following files below. 32 | 33 | Open [env.config.js](/env.config.js) and you will see the default configuration for the project. 34 | 35 | 36 | | Config | Description | 37 | | ----------- | ----------- | 38 | | `.browerslistrc` | Open [.browserslist](/.browserslist) to configure Browser support for TypeScript + SCSS compiliation. [Read more here about Browerslist](https://github.com/browserslist/browserslist). Defaults are set for last 2 versions, > 1% and IE 11. | 39 | | `outputConfig.destPath` | The folder in which you want your app to compile to. By default this is `dist`. | 40 | | `entryConfig` | Webpack Entry points, by default this will look for the TypeScript + SCSS entry point files. More info on [Entry points here](https://webpack.js.org/concepts/entry-points/ ) | 41 | | `copyPluginPatterns.patterns` | Configure folders you want copied over when compiling your app. Useful to copy over entire folder structures of images or fonts. | 42 | | `devServer` | Configure the Webpack development server. Enable `https`, specify a particular `port`, or `host`. [More information on these options here](https://webpack.js.org/configuration/dev-server/) 43 | | `scssConfig.destFileName` | Specify the output for your css. E.g `css/app.css` 44 | | `terserPluginConfig` | Full [Terser config can be found here](https://webpack.js.org/plugins/terser-webpack-plugin/#terseroptions). 45 | 46 | 47 | ## Images, Fonts and output 48 | 49 | Here's an example of the default generated output to our `dist` folder. 50 | ``` 51 | - index.html 52 | -- js 53 | -- css 54 | -- fonts 55 | ---- some-font-file.woff 56 | -- images 57 | ---- path-to-example-image.jpg 58 | ``` 59 | 60 | - By default, fonts and images are copied to the `dist` folder. 61 | - To include a reference to an image or font, it should be relative to where your css would output. 62 | 63 | For example: 64 | 65 | `stylesheets/some-folder/some-file-somewhere.scss` 66 | ```css 67 | .example { 68 | background-image: url("../images/path-to-image-example.jpg"); 69 | } 70 | 71 | @font-face { 72 | font-family: "Example-font"; 73 | src: url("../fonts/some-font-file.woff"); 74 | } 75 | ``` 76 | 77 | Would output to the folder `css/app.css` 78 | 79 | ``` 80 | - index.html 81 | -- js 82 | -- css 83 | ---- app.css 84 | -- fonts 85 | ---- some-font-file.woff 86 | -- images 87 | ---- path-to-example-image.jpg 88 | ``` 89 | 90 | 91 | ## Development 92 | 93 | ```shell 94 | npm install 95 | npm run dev 96 | ``` 97 | 98 | ## Production 99 | Note: This will compile to a `dist` folder. 100 | ```shell 101 | npm run build 102 | ``` 103 | 104 | 105 | 106 | 107 | ### Build tools 108 | 109 | * [React](https://reactjs.org/) - JavaScript library for building user interfaces. 110 | * [TypeScript](https://www.typescriptlang.org) - TypeScript is a superset of JavaScript that compiles to clean JavaScript. 111 | * [Webpack 5](https://webpack.js.org/) - App bundler for JavaScript. 112 | * [SCSS](https://sass-lang.com/) - Preprocessor for SCSS to CSS. 113 | 114 | 115 | ### 📝License 116 | This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details 117 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Visit https://aka.ms/tsconfig.json to read more about this file */ 4 | /* Basic Options */ 5 | // "incremental": true, /* Enable incremental compilation */ 6 | "target": "es6", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */ 7 | "module": "es2015", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */ 8 | // "lib": [], /* Specify library files to be included in the compilation. */ 9 | // "allowJs": true, /* Allow javascript files to be compiled. */ 10 | // "checkJs": true, /* Report errors in .js files. */ 11 | "jsx": "react", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ 12 | // "declaration": true, /* Generates corresponding '.d.ts' file. */ 13 | // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ 14 | // "sourceMap": true, /* Generates corresponding '.map' file. */ 15 | // "outFile": "./", /* Concatenate and emit output to single file. */ 16 | // "outDir": "./", /* Redirect output structure to the directory. */ 17 | // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ 18 | // "composite": true, /* Enable project compilation */ 19 | // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */ 20 | // "removeComments": true, /* Do not emit comments to output. */ 21 | // "noEmit": true, /* Do not emit outputs. */ 22 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */ 23 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ 24 | // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ 25 | /* Strict Type-Checking Options */ 26 | "strict": true, /* Enable all strict type-checking options. */ 27 | // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ 28 | // "strictNullChecks": true, /* Enable strict null checks. */ 29 | // "strictFunctionTypes": true, /* Enable strict checking of function types. */ 30 | // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */ 31 | // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ 32 | // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ 33 | // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ 34 | /* Additional Checks */ 35 | // "noUnusedLocals": true, /* Report errors on unused locals. */ 36 | // "noUnusedParameters": true, /* Report errors on unused parameters. */ 37 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ 38 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ 39 | // "noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */ 40 | /* Module Resolution Options */ 41 | // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ 42 | // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ 43 | // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ 44 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ 45 | // "typeRoots": [], /* List of folders to include type definitions from. */ 46 | // "types": [], /* Type declaration files to be included in compilation. */ 47 | // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ 48 | "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ 49 | // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ 50 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ 51 | /* Source Map Options */ 52 | // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ 53 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ 54 | // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ 55 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ 56 | /* Experimental Options */ 57 | // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ 58 | // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ 59 | /* Advanced Options */ 60 | "skipLibCheck": true, /* Skip type checking of declaration files. */ 61 | "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */ 62 | } 63 | } --------------------------------------------------------------------------------