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:
11
.eslintrc.js
11
.eslintrc.js
@@ -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}*`);
|
||||
}
|
||||
|
||||
@@ -29,8 +29,8 @@
|
||||
],
|
||||
"@tests/*": [
|
||||
"tests/*"
|
||||
],
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts",
|
||||
|
||||
@@ -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;
|
||||
}, {});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user