@mels/babel-preset-tsc-pluggable

Pluggable babel preset for some of my commonly used TypeScript and Styled Components configs.

Plugins

This preset implements the following plugins:

• babel-plugin-module-resolver
• babel-plugin-typescript-to-proptypes
• babel-plugin-styled-components

Install

With npm...

npm install @mels/babel-preset-tsc-pluggable --save-dev

With yarn...

yarn add @mels/babel-preset-tsc-pluggable -D

Usage

.babelrc

{
  "presets": ["@mels/tsc-pluggable"]
}

With Next.js:

{
  "presets": ["next/babel", "@mels/tsc-pluggable"]
}

Each plugin is turned on by default, but can be turned off manually:

{
  "presets": [
    "next/babel",
    [
      "@mels/tsc-pluggable",
      {
        "moduleResolver": false,
        "proptypes": false,
        "styledComponents": false
      }
    ]
  ]
}

Module Resolver Usage with TypeScript

This preset sets the following options for the module resolver:

{
  root: ['./'],
  alias: {
    components: './src/components'
  },
  extensions: ['.js', '.jsx', '.ts', '.tsx']
}

In addition to this, to get things working properly you'll need to set baseUrl and paths in tsconfig.json, e.g:

{
  "baseUrl": ".",
  "paths": {
    "components/*": ["src/components/*"]
  }
}