Refactor to remove hardcoding of aliases

Unify definition of  aliases in single place.

Make TypeScript configuration file (`tsconfig.json`) source of truth
regarding aliases.

Both webpack (through `vue.config.js`) and ESLint (through
`.eslintrc.js`) now reads the alias configuration from `tsconfig.json`.
This commit is contained in:
undergroundwires
2022-02-02 19:28:12 +01:00
parent 5bbbb9cecc
commit 481a02afd5
3 changed files with 25 additions and 7 deletions

View File

@@ -4,6 +4,7 @@ const { rules: baseES6Rules } = require('eslint-config-airbnb-base/rules/es6');
const { rules: baseImportsRules } = require('eslint-config-airbnb-base/rules/imports');
const { rules: baseStyleRules } = require('eslint-config-airbnb-base/rules/style');
const { rules: baseVariablesRules } = require('eslint-config-airbnb-base/rules/variables');
const tsconfigJson = require('./tsconfig.json');
module.exports = {
root: true,
@@ -76,9 +77,8 @@ function getOwnRules() {
groups: [ // Enforce more strict order than AirBnb
'builtin', 'external', 'internal', 'parent', 'sibling', 'index', 'object', 'type'],
pathGroups: [ // Fix manually configured paths being incorrectly grouped as "external"
'@/**', // @/..
'@tests/**', // @tests/.. (not matching anything after @** because there can be third parties as well)
'js-yaml-loader!@/**', // E.g. js-yaml-loader!@/..
...getAliasesFromTsConfig(),
'js-yaml-loader!@/**',
].map((pattern) => ({ pattern, group: 'internal' })),
},
],
@@ -284,3 +284,8 @@ function getTypeScriptOverrides() {
// ],
};
}
function getAliasesFromTsConfig() {
return Object.keys(tsconfigJson.compilerOptions.paths)
.map((path) => `${path}*`);
}

View File

@@ -29,8 +29,8 @@
],
"@tests/*": [
"tests/*"
],
},
]
}
},
"include": [
"src/**/*.ts",

View File

@@ -1,6 +1,7 @@
const { resolve } = require('path');
const { defineConfig } = require('@vue/cli-service');
const packageJson = require('./package.json');
const tsconfigJson = require('./tsconfig.json');
loadVueAppRuntimeVariables();
@@ -12,8 +13,8 @@ module.exports = defineConfig({
},
configureWebpack: {
resolve: {
alias: { // also requires path alias in tsconfig.json
'@tests': resolve(__dirname, 'tests/'),
alias: {
...getAliasesFromTsConfig(),
},
fallback: {
/* Tell webpack to ignore polyfilling them because Node core modules are never used
@@ -78,3 +79,15 @@ function ignorePolyfills(...moduleNames) {
return obj;
}, {});
}
function getAliasesFromTsConfig() {
const { paths } = tsconfigJson.compilerOptions;
return Object.keys(paths).reduce((aliases, pathName) => {
const pathFolder = paths[pathName][0];
const aliasFolder = pathFolder.substring(0, pathFolder.length - 1); // trim * from end
const aliasName = pathName.substring(0, pathName.length - 2); // trim /* from end
const aliasPath = resolve(__dirname, aliasFolder);
aliases[aliasName] = aliasPath;
return aliases;
}, {});
}