Alias HQ - easily reuse your js/tsconfig.json path aliases across your app's libraries

Alias HQ is a new package that allows you to use your js/tsconfig.json path aliases in any other framework or library, such as Webpack, Rollup, Jest, etc.

Gone are the days of maintaining multiple sets of path configurations; just import the lib and convert to your format of choice with a simple one-liner:

// vue.config.js
import hq from 'alias-hq'

module.exports = {
  configureWebpack: (config) => {
    ...
    Object.assign(config.resolve.alias, hq.get('webpack'))
  },
}
// jest.config.js
import aliases from 'alias-hq'

module.exports = {
  ...
  moduleNameMapper: aliases.get('jest'),
}
1 Like

If you’re not sure how to get started with aliases, I just added a generator as part of the CLI:

More info here:

Sounds great!

We can’t use import with module.exports.

Hey!

The CLI (updating source code) supports Common JS require and ES6 import, and the API (hq.get(...)) should just work.

Is there a problem you’re having that the library is not solving?

Yep!
A few days ago, I started wrapping a legacy project in Vue. To migrate it to Vue gradually.
In short.
The structure of the project is as follows:

vue-project/
    legacy-project/
        app/
        package.json
    src/
    public/
    package.json
    vue.config.js
    tsconfig.json

The legacy folder is the git submodule from the legacy-project’s repository.
I have faced various difficulties.
One of them, which is directly related to aliases, is described here: https://github.com/vuejs/vue-cli/issues/3123
Perhaps you can find something interesting there.

A piece of my tsconfig.json with paths:

"paths": {
      "@/*": [
        "src/*"
      ],
      "@legacy/*": [
        "legacy/app/*"
      ]
},

Unfortunately, when trying to use your package, I still get path related errors.

I decided to check the config.resolve.alias object:

      Object.assign(
        config.resolve.alias,
        aliases.load("tsconfig.json").get("webpack")
      );
      console.log('2',config.resolve.alias)

Got:

...
store:
   Map {
     '@' => '/media/dimon/1_work/electron/cinema-vue/src',
     'vue$' => 'vue/dist/vue.runtime.esm-bundler.js' },
  '@':
   '/media/dimon/1_work/electron/cinema-vue/src',
  '@legacy':
   '/media/dimon/1_work/electron/cinema-vue/legacy/app' }

I see that the changes did not make it to the “Store”. So it gives me the reason to believe that assign was unsuccessful.

Could it be the Webpack version?
My version:

npm view webpack version
4.44.1

Also, I created a PR for a different reason:

It looks like I have wrong judgments.

Comment waiting on the PR…

Hey!
It still doesn’t work.
You can check:
$ vue inspect> config.js
And see that resolve.alias is still defaullt…

Oh. It’s my bad…
I’m using chainWebpack, instead configureWebpack…
Sorry.

Everything is work fine now!

1 Like

Cool!

I’ve updated the docs as well: