[idea] Aliases for moduleRoots

[c01nd01r]

Hi and thx for a good tool! I like to use webpack aliases in my Vue projects (for example: https://github.com/vuejs-templates/webpack/blob/master/template/build/webpack.base.conf.js#L21-L29), but when I trying use something like import Module from '@/myComponent/file', I get error module @/myComponent/file was not found.
And Yes, I have moduleRoots in my package.json. It work perfect for other cases.

May be possible, make some aliases in moduleRoots? For example:

{
"moduleRoots": [ "src/", {"@": "src/components/"} ]
}

[AsaAyers]

moduleRoots is a feature I reluctantly implemented. I don't think it's a good idea and I don't use it. If there were a standard it would be different, but right now you have to configure each tool individually to have matching/compatible configurations. The FAQ also tries to talk you out of using this feature.

I'm not going to further complicate things by adding aliases to moduleRoots.

It's not a good solution, but one possible workaround would be to create a symlink named @ that points to your components. Then you can add the parent of that symlink to moduleRoots.

[mmamadilov]

@AsaAyers For me, alias feature is one of the most required for this module. Because we are using this feature on our project to improve the performance of module resolving. Maybe we should describe in some another way but I think we should have some "alias" config. Please provide more info why you are thinking that this feature is redundant.

[AsaAyers]

It's not redundant, it's simply a feature that I have decided not to support. js-hyperclick also doesn't support the way meteor resolves files or AMD/RequireJS. If you have decided to use aliases, Meteor, or RequireJS you can still use js-hyperclick to navigate inside your files, but module resolution just isn't going to work.

[aaronatmycujoo]

I understand the reason why you have not implemented this, although I am working on a codebase that uses webpack aliases and yeah.. forced to use them.

Is there a fork that you know of that is working to support this?

[lexanth]

@aaronatmycujoo Over a month later, but if you're still interested, I added support for webpack aliases in my branch: https://github.com/alexanthony/js-hyperclick

[aaronatmycujoo]

nice! I'll check it out now.

edit: works perfectly, love it,

[shaun-sweet]

@alexanthony how do i install your version?

[aaronatmycujoo]

i am pretty sure i just did:

mkdir ~/atom/
git clone https://github.com/alexanthony/js-hyperclick.git ~/atom/js-hyperclick
cd ~/atom/js-hyperclick
apm install
apm link .

[lexanth]

Or even just one of these: apm install alexanthony/js-hyperclick

apm install https://github.com/alexanthony/js-hyperclick.git

[aaronatmycujoo]

that's a lot cleaner 😬

[existe-deja]

If you have a webpack configuration from the webpack template of vue-cli, follow this steps:

1. Install alexanthony's fork
2. Go to the settings of the package in atom prefs
3. Check Resolve with webpack
4. Add build/webpack.base.conf.js in the field Webpack configuration filename

No need of moduleRoots entry in package.json.

Great work @alexanthony!

[petsgre]

@Lacroute step4 is very important ,thank you!

[TijmenH]

Can @alexanthony 's solution work with the vue-cli 3 (without the webpack config file)?

[austincondiff]

@lexanth Will something like this work?

alias: {
  '~c': path.join(SRC_DIR, 'components'),
  '~':  SRC_DIR
}

It is not working for me.

[AsaAyers]

I just published v1.15 with a new feature I'm calling "Custom Resolvers". It will allow you to add a JS file to your project that can implement your aliases. PR and documentation