Configure aliases once and for all with Yarn's link protocol

• link-module-alias

  2 306 0.0 JavaScript

  Register aliases of directories and custom module paths in Node - no require hook

I didn't try it, but a little research led me to link-module-alias that seems to enable this feature no matter what package manager you use. Would love to hear your feedbacks in the comments if you are going to try it or already used it in a project.

• vite

  786 64,595 9.9 TypeScript

  Next generation frontend tooling. It's fast!

  

Lately, I started a front-end project. I picked up a bundler (Vite because it looks awesome, but the problem is not tied to it) and configured it. In the configuration process, I added an alias:

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• storybook

  321 82,727 10.0 TypeScript

  Storybook is a frontend workshop for building UI components and pages in isolation. Made for UI development, testing, and documentation.

  

But then I added Storybook to the project. For some reason, I couldn't use Vite as a bundler in place of the default Webpack, so I couldn't reuse my configuration and get my alias for free in it. But still, the problem would have been the same : new tool means I need to take care of configuring my alias in it. In this case, I had to configure the alias in the Storybook's Webpack configuration:

• jest

  473 43,553 9.6 TypeScript

  Delightful JavaScript Testing.

  

Then I added Jest to the project. And... guess what? It also needs this alias in its configuration to resolve it correctly and find my modules. And where Vite and Webpack used a fairly similar syntax, Jest uses a different.

Suggest a related project