Merge pull request #2 from smotyl/feat/ts-loader

smotyl · web-flow · commit 44d66fbc94ed · 2021-04-03T15:26:08.000-03:00
Feat: Add ts-loader
diff --git a/configs/webpack.config.js b/configs/webpack.config.js
@@ -4,15 +4,36 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const currDir = process.cwd();
 
 module.exports = (config) => {
-  const { mode } = config;
+  const { mode, typescript } = config;
+
+  let babelLoader = {
+    test: /\.(ts|js)x?$/,
+    loader: require.resolve('babel-loader'),
+    exclude: /node_modules/,
+    options: {
+      presets: ["@babel/preset-env", "@babel/preset-react"],
+    }
+  };
+
+  let tsLoader = {
+    test: /\.tsx?$/,
+    use: 'ts-loader',
+    exclude: /node_modules/,
+  };
+
+  let entryFile = typescript ? 'index.tsx' : 'index.js'
 
   return {
     mode: mode,
-    entry: path.resolve(currDir, 'src', 'index.js'),
+    entry: path.resolve(currDir, 'src', entryFile),
     output: {
       path: path.resolve(currDir, 'dist'),
       filename: 'bundle.js'
     },
+    devtool: 'source-map',
+    resolve: {
+      extensions: [ '.tsx', '.ts', '.js', '.jsx' ],
+    },
     devServer: {
       contentBase: path.resolve(currDir, 'src'),
     },
@@ -24,14 +45,7 @@ module.exports = (config) => {
     ],
     module: {
       rules: [
-        {
-          test: /\.(ts|js)x?$/,
-          loader: require.resolve('babel-loader'),
-          exclude: /node_modules/,
-          options: {
-            presets: ["@babel/preset-env", "@babel/preset-react"],
-          }
-        },
+        typescript ? tsLoader : babelLoader,
       ]
     }
   }
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "basic-react-scripts",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "main": "index.js",
   "author": "Sandro Motyl",
   "license": "MIT",
@@ -20,11 +20,15 @@
     "@babel/core": "^7.13.14",
     "@babel/preset-env": "^7.13.12",
     "@babel/preset-react": "^7.13.13",
+    "@types/react": "^17.0.3",
+    "@types/react-dom": "^17.0.3",
     "babel-loader": "^8.2.2",
     "child_process": "^1.0.2",
     "choose-port": "^0.3.2",
     "html-webpack-plugin": "^5.3.1",
     "open": "^8.0.4",
+    "ts-loader": "^8.1.0",
+    "typescript": "^4.2.3",
     "webpack": "^5.28.0",
     "webpack-dev-server": "^3.11.2"
   },
diff --git a/scripts/start.js b/scripts/start.js
@@ -18,9 +18,11 @@ process.env.HOST ||
 (process.platform === 'win32' ? 'localhost' : '127.0.0.1');
 const port = process.env.PORT || 8080;
 const levelLog = process.env.LEVEL_LOG || 'none';
+const typescript = process.argv.slice(2).includes('--ts');
 
 const config = webpackConfig({
   mode: 'development',
+  typescript: typescript,
 });
 
 const start = () => {
diff --git a/src/App.tsx b/src/App.tsx
@@ -0,0 +1,7 @@
+import * as React from 'react'
+
+const App = () => {
+    return <h1>Hello, World!</h1>;
+}
+
+export default App;
diff --git a/src/index.html b/src/index.html
@@ -9,7 +9,6 @@
 
 <body>
   <div id="app"></div>
-  <script src="./bundle.js" async defer></script>
 </body>
 
 </html>
diff --git a/src/index.tsx b/src/index.tsx
@@ -0,0 +1,5 @@
+import * as React from 'react'
+import * as ReactDOM from 'react-dom'
+import App from './App'
+
+ReactDOM.render(<App />, document.getElementById('app'));
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "jsx": "react",
+    "module": "commonjs",
+    "outDir": "./dist/",
+    "noImplicitAny": true,
+    "removeComments": true,
+    "preserveConstEnums": true,
+    "sourceMap": true,
+    "target": "es5"
+  },
+  "include": [
+    "src/index.tsx"
+  ]
+}
diff --git a/yarn.lock b/yarn.lock
