file aliases put in place

Author: iamvijaydev

.eslintrc.json

@@ -22,5 +22,18 @@
       "aspects": ["noHref", "invalidHref", "preferButton"]
     }],
     "react/sort-comp": "off"
+  },
+  "settings": {
+    "import/resolver": {
+      "alias": {
+        "map": [
+          ["Components", "./src/components/"],
+          ["Pages", "./src/pages/"],
+          ["Models", "./src/models/"],
+          ["Services", "./src/services/"],
+          ["Config", "./config/"]
+        ],
+      }
+    }
   }
 }

build/webpack/webpack.common.js

@@ -1,60 +1,72 @@
-const webpack = require("webpack");
-const HtmlWebpackPlugin = require("html-webpack-plugin");
-const { BaseHrefWebpackPlugin } = require("base-href-webpack-plugin");
-const CopyWebpackPlugin = require("copy-webpack-plugin");
+const path = require('path');
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { BaseHrefWebpackPlugin } = require('base-href-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 
-const baseHref = "/";
+const baseHref = '/';
 
 module.exports = {
   resolve: {
-    extensions: [".js"]
+    extensions: ['.js']
   },
   module: {
     rules: [
       {
         test: /\.js$/,
         exclude: /node_modules/,
-        use: ["babel-loader"]
+        use: ['babel-loader']
       },
       {
         test: /\.css$/,
-        use: ["style-loader", "css-loader"]
+        use: ['style-loader', 'css-loader']
       }
     ]
   },
   plugins: [
     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
     new HtmlWebpackPlugin({
-      template: "./src/index.html"
+      template: './src/index.html'
     }),
     new BaseHrefWebpackPlugin({ baseHref: baseHref }),
     new CopyWebpackPlugin(
       [
         {
-          from: "config/assets",
-          to: "assets"
+          from: 'config/assets',
+          to: 'assets'
         } /** add any other copy/move files or folders */
       ],
       {
         force: true,
         flatten: true
       }
-    )
+    ),
+    new CleanWebpackPlugin()
   ],
   optimization: {
-    moduleIds: "hashed",
-    runtimeChunk: "single",
+    moduleIds: 'hashed',
+    runtimeChunk: 'single',
     splitChunks: {
       cacheGroups: {
         vendor: {
           test: /[\\/]node_modules[\\/]/,
-          name: "vendors",
-          chunks: "all"
+          name: 'vendors',
+          chunks: 'all'
         }
       }
     }
   },
+  resolve: {
+    alias: {
+      Components: path.resolve(__dirname, '../../src/components/'),
+      Pages: path.resolve(__dirname, '../../src/pages/'),
+      Models: path.resolve(__dirname, '../../src/models/'),
+      Services: path.resolve(__dirname, '../../src/services/'),
+      Config: path.resolve(__dirname, '../../config/'),
+    }
+  },
   node: {
-    fs: "empty"
+    fs: 'empty'
   }
 };

jsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "es6",
+    "module": "commonjs",
+    "allowSyntheticDefaultImports": true,
+    "baseUrl": ".",
+    "paths": {
+      "Components/*": ["src/components/*"],
+      "Pages/*": ["src/pages/*"],
+      "Models/*": ["src/models/*"],
+      "Services/*": ["src/services/*"],
+      "Config/*": ["src/config/*"],
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}

package.json

@@ -61,6 +61,7 @@
     "eslint": "^6.0.1",
     "eslint-config-airbnb": "^17.1.1",
     "eslint-config-prettier": "^6.0.0",
+    "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-import": "^2.18.0",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.14.2",

src/App/AppGlobalStyles/index.js

@@ -1,7 +1,7 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { shape } from 'prop-types';
 
-import dynamicStyles from '../../services/dynamicStyles';
+import dynamicStyles from 'Services/dynamicStyles';
 
 const GlobalStyles = ({ theme }) => {
   useEffect(() => {

src/App/AppRoutes/index.js

@@ -2,10 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Switch, Route } from 'react-router-dom';
 
-import Home from '../../pages/Home';
-import About from '../../pages/About';
-import Topics from '../../pages/Topics';
-import Page404 from '../../pages/Page404';
+import Home from 'Pages/Home';
+import About from 'Pages/About';
+import Topics from 'Pages/Topics';
+import Page404 from 'Pages/Page404';
 
 const AppRoutes = ({ show }) => {
   // in case if we want to hold off rendering routes

src/App/DemoToBeDeleted/components/DemoModal/index.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import intl from 'react-intl-universal';
 
-import Modal from '../../../../components/Modal'
+import Modal from 'Components/Modal'
 import { ListItem, ListSubItem } from '../../styled';
 import { Header, Article, Footer } from './styled';
 

src/store/models.js

@@ -1,9 +1,9 @@
 // shared models
-export * from '../models/locale';
-export * from '../models/session';
-export * from '../models/themes';
+export * from 'Models/locale';
+export * from 'Models/session';
+export * from 'Models/themes';
 
 // individual models
-export * from '../pages/Home/model';
-export * from '../pages/About/model';
-export * from '../pages/Topics/model';
+export * from 'Pages/Home/model';
+export * from 'Pages/About/model';
+export * from 'Pages/Topics/model';

yarn.lock

@@ -3198,6 +3198,11 @@ eslint-config-prettier@^6.0.0:
   dependencies:
     get-stdin "^6.0.0"
 
+eslint-import-resolver-alias@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-alias/-/eslint-import-resolver-alias-1.1.2.tgz#297062890e31e4d6651eb5eba9534e1f6e68fc97"
+  integrity sha512-WdviM1Eu834zsfjHtcGHtGfcu+F30Od3V7I9Fi57uhBEwPkjDcii7/yW8jAT+gOhn4P/vOxxNAXbFAKsrrc15w==
+
 eslint-import-resolver-node@^0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.2.tgz#58f15fb839b8d0576ca980413476aab2472db66a"