✨ Adding import alias support

mrbrentkelly · Apr 5, 2021 · c04ae4a · c04ae4a
1 parent 7b7b8fd
commit c04ae4a
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # :space_invader: Enhanced TypeScript Template for Expo!
 
-**TypeScript + ESLint + Prettier + VSCode**
+**TypeScript + ESLint + Prettier + VSCode + Import aliases + Helpful yarn scripts**
 
 ```bash
 npx crna --template https://github.com/mrbrentkelly/expo-template-bk

diff --git a/app/components/.keep b/app/components/.keep
diff --git a/babel.config.js b/babel.config.js
@@ -1,6 +1,26 @@
 module.exports = function (api) {
   api.cache(true);
   return {
-    presets: ["babel-preset-expo"],
+    presets: ['babel-preset-expo'],
+    plugins: [
+      [
+        'module-resolver',
+        {
+          root: ['./'],
+          extensions: [
+            '.ios.ts',
+            '.android.ts',
+            '.ts',
+            '.ios.tsx',
+            '.android.tsx',
+            '.tsx',
+            '.json',
+          ],
+          alias: {
+            '@components': './app/components',
+          },
+        },
+      ],
+    ],
   };
 };
diff --git a/package.json b/package.json
@@ -1,4 +1,7 @@
 {
+  "scripts": {
+    "nuke": "rm -rf node_modules"
+  },
   "dependencies": {
     "expo": "~40.0.0",
     "react": "16.13.1",
@@ -12,6 +15,7 @@
     "@react-native-community/eslint-config": "^2.0.0",
     "@types/react": "~16.9.35",
     "@types/react-native": "~0.63.2",
+    "babel-plugin-module-resolver": "^4.1.0",
     "eslint": "^7.14.0",
     "typescript": "~4.0.0",
     "vscode-project-react-native": "^0.2.0"