You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP →
Socket
Socket
Sign inDemoInstall

babel-plugin-module-resolver-tsconfig

Package Overview
Dependencies
4
Maintainers
1
Versions
25
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

babel-plugin-module-resolver-tsconfig

"Write the aliases only in tsconfig. It should be that simple.". A helper module that provide easy configuration of babel-plugin-module-resolver plugin for typescript projects. To avoid repeating writing the aliases in both tsconfig and .babelrc.js. And t


Version published
Weekly downloads
220
decreased by-14.4%
Maintainers
1
Created
Weekly downloads
 

Readme

Source

babel-plugin-module-resolver-tsconfig

babel plugin module resolver tsconfig automatic alias banner

npm version Build Status Coverage Status Coverage Status

You should "Write the aliases in tsconfig only. It should be that simple.".

A helper module that provides easy configuration of babel-plugin-module-resolver plugin for typescript projects. To avoid repeating writing the aliases in both tsconfig and .babelrc.js. (What a blessing)

And that by reading automatically the config from the tsconfig.json and setting the babel module resolver plugin` with that. After converting and mapping them to the babel resolver format.

Support extending the config as well.

Say goodbye to repetition and also the frustration of it's not working. Why => forget to add it to the other config. No more of that.

See how simple it becomes.

First basic example

const { setModuleResolverPluginForTsConfig } = require('babel-plugin-module-resolver-tsconfig')

module.export = {
  "presets": [
    "@babel/preset-env",
    "@babel/preset-typescript"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    setModuleResolverPluginForTsConfig()
  ]
}

it's that simple. Instead of manually adding and repeating all of the aliases. No more of it shouldn't be like this and frustration.

tsconfig.json looked up automatically in the same directory as babel.config.json.

Signature

export declare interface IPluginConfig {
  [configProp: string]: any;
  root?: string | string[] | ((tsConfigBaseUrl: string) => string | string[]);
  alias?: Record<string, string>;
  tsconfigPath?: string;
}

declare function setModuleResolverPluginForTsConfig(
  config?: IPluginConfig
): [PluginTarget, IPluginConfig];

declare function readAndParseTsConfig(tsconfigPath: string): ParsedTsconfig;

If you like to know the details. Go to the end of the document.

Here bellow more examples first. For a quick start.

Note: check the toubleshooting section. Tips that can avoid you trouble.

Main rule: in tsconfig paths use ./ for relative paths. ("./src/*" instead of "src/*"). Go to the Tips section at the end to see more details.

Examples

Most of the time you should go with the no config option already shared above.

tsconfig.json path

Relative path to the calling babel.config.json

Check the API details for how the relative resolution happens.

setModuleResolverPluginForTsConfig({
  tsconfigPath: './tsconfig.json'
})

Absolute path

setModuleResolverPluginForTsConfig({
  tsconfigPath: path.resolve(__dirname, './tsconfig.json')
})

root

The root value is very important. By default, it is deduced from tsConfig.compilerOptions.baseUrl.

One value

setModuleResolverPluginForTsConfig({
  tsconfigPath: './tsconfig.json',
  root: '.'
});

Multiple values

setModuleResolverPluginForTsConfig({
  root: ['.', './another']
});

Dynamic function

setModuleResolverPluginForTsConfig({
  root: (tsconfigBaseUrl) => {
    if (someCheck(tsconfigBaseUrl)) {
      return '.' // return a string
    }
    return ['.', './another'] // or array
  }
});

When you provide a root value. It would not override the typescript one. But rather be merged and take precedence (come first) root: './some' => babel result => root: ['./some', './tsConfgBaseUrlValue'].

Extra aliases

(Aliases are merged and added. Not replaced!)

const { setModuleResolverPluginForTsConfig } = require('babel-plugin-module-resolver-tsconfig')

module.export = {
  "presets": [
    "@babel/preset-env",
    "@babel/preset-typescript"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    setModuleResolverPluginForTsConfig({
      alias: {
        '@extra/*': 'src/extra/*',
        // ...
      }
    })
  ]
}

The above will resolve to:

[
  require.resolve('babel-plugin-module-resolver'),
  {
    root: [tsconfig.compilerOptions.baseUrl],
    alias: {
      ...<resolved converted mapped typescript paths>,
      '@extra/*': 'src/extra/\\1',
      // ...
    },
  }
]

Api details

tsconfigPath option

You can provide the tsconfigPath manually. Relative or absolute.

The Relative works relatively to the calling module file. Here it should be babel.config.js.

If you are building a module (or package) and wrapping this package to extend it. Then you should use absolute path instead. As the calling module in such a case become your new module. module.parent.filename was used internally to give you an idea.

If not provided. tsconfig.json would be looked up automatically. By trying to get the babel config file path from CLI if provided. Otherwise the calling module (babel config file).

If no config file is provided in the babel CLI command. The module calling the method directory would be taken.

root

The root is a string, array, or ((tsConfigBaseUrl: string) => string | string[])

Whatever the option. It will resolve to a string array. That what babel-resolver expect.

If the root option is not provided. The module automatically gets it from tsconfig.compilerOptions.baseUrl.

If provided. It will still get the tsconfig baseUrl. However, it will take precedence. The final resolution will go as follow: [...<userRoot>, <tsconfigBaseUrl>].

Alias

It will resolve to

{
  ...tsconfigConvertedPaths,
  ...userAlias
}

Trouble shooting and tips

Hugely very important. If it's not working. Check your tsconfig paths first.

First tip. Use relative paths with ./.

this work ✅:

"paths": {
  "*": ["./src/*"]
}

this doesn't ❌:

"paths": {
  "*": ["src/*"]
}

Ok why doesn't the module handle that for us !! ??? => Well actually because you may refer to a no path name. Like a package. So you have to be precise. And the small rule above is simple and natural.

REPO SUPPORT ⭐🌟✨💫 🌠



Any issue. Go to repo.

WAIT ... ⭐🌟✨💫 🌠 YOU HAVEN'T STARED THE REPO YET ⭐🌟✨💫 🌠 TIME TO DO => At least open the repo. And when you test the module and be ❤️ 💖 What a blessing 💖 ❤️ => That's the calling to star moment. And remember to always smile.

Like it => Star => Let know - community picked it. => trust (barrier to use)

Feel free. (Repo => calling)

Issues, Questions, Contribution, Feedback. => Repo.

The Magician project

This plugin was created as a need first and also part of the teaching series at the magician project. The Magician Dev. (The Magician project is about magic for life [in everything], The Magician Dev is about development)

This repo for instance does show

how to setup a package building project, eslint with prettier, commintlint with lefthook, Setting up CI (github actions), tests, and coverage and documentation badges.

And beginner topics:

json5, regex, paths, fs, root directory for npm dev tools, calling parent, js + dts ....

More details about those topics in:

[Related content will be shared soon]

Check:

[Coming soon]

Follow us at:

[Coming soon]

Support The Magician Project:

[Coming later]

Keywords

FAQs

Package last updated on 19 Dec 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc