Add TS loader

Author: limdingwen

cli/gulpfile.js

@@ -49,8 +49,21 @@ const script = ({src, name, mode}, done = _ => true) => {
         devtool: isProd ? undefined : 'cheap-source-map',
         // allow TS importing
         resolve: {
-            extensions: ['.ts', '...']
+            extensions: ['.ts', '.tsx', '...']
         },
+        // use ts-loader to compile TS files
+        module: {
+            rules: [
+                // all files with a `.ts`, `.cts`, `.mts` or `.tsx` extension will be handled by `ts-loader`
+                {
+                    test: /\.([cm]?ts|tsx)$/,
+                    loader: 'ts-loader',
+                    options: {
+                        configFile: 'src/tsconfig.json'
+                    }
+                }
+            ]
+        }
     };
 
     return gulp.src(src)

guide/03-xt-build.md

@@ -69,6 +69,14 @@ xt-build {-e|--env} dev {-w|--watch}
 xt-build --help
 ``` 
 
+## TypeScript notes
+
+You may use either TypeScript (`.ts`, `.tsx`) or JavaScript files. However, if any TypeScript is used, you must add
+`tsconfig.json` to the `src` directory.
+
+In this config file, you do not need to add anything (unless you want to change any settings). However, without it,
+compilation will fail.
+
 ## Package.json scripts
 
 After adding Extension CLI to your project, you can run these commands from a 

package-lock.json

@@ -102,6 +102,7 @@
     "sass": "1.49.9",
     "sinon": "13.0.1",
     "sinon-chrome": "3.0.1",
+    "ts-loader": "9.5.0",
     "webpack-stream": "7.0.0",
     "yargs": "17.3.1"
   },