Typescript paths resolved automatically #11988
Description
What problem does this feature solve?
Typescript has this neat feature where you can set custom paths for your directories like so:
{
"compilerOptions": {
"paths": {
"@/*": [
"src/*"
],
"@Components/*": [
"modules/static/shared/components/*"
]
}
},
}This helps you to not write those long imports in your code when you have a really big up with hundreds of components. The problem is that, in the current version, Vue does not support path aliases out of the box.
This feature should be able to solve them out of the box. In a simple typescript environment, in Node.js, it is usually done with packages like "tsconfig-paths" by calling tsconfig-paths/register when running your node app.
The end user experience is that the devs won't have to spend hours setting it up due to lack of documentation (just like I do right now and no solution found).
Suggested solutions on the internet don't work:
Solution 1 (doesn't work)
// vue.config.ts
module.exports = {
chainWebpack(config) {
console.log('consoleProfileFinished', config)
config.resolve.alias.delete("@")
config.resolve
.plugin("tsconfig-paths")
.use(require("tsconfig-paths-webpack-plugin"))
},
}Solution 2
// vue.config.ts
const path = require('path')
module.exports = {
chainWebpack: config => {
config.resolve.alias
.set('@', path.resolve(__dirname, 'src/main/javascript'));
}
}What does the proposed API look like?
There is no special API for this feature. You just use typescript paths in your tsconfig.json file