rollup-plugin-tsconfig-paths

rollup-plugin-tsconfig-paths

Rollup plugin for resolving tsconfig paths

yarn add -D rollup-plugin-tsconfig-paths

rollup.config.js

import tsPaths from "rollup-plugin-tsconfig-paths"
import nodeResolve from "@rollup/plugin-node-resolve"
import commonjs from "@rollup/plugin-commonjs"

export default {
  plugins: [
    tsPaths(),
    nodeResolve({ extensions: [".tsx", ".ts", ".jsx", ".js", ".json", ...] }),
    commonjs(),
  ]
}

Example tsconfig.json

{
  "compilerOptions": {
    "jsx": "preserve",
    "module": "esnext",
    "moduleResolution": "node",
    "target": "esnext",
    "lib": ["esnext", "dom", "dom.iterable"],
    "types": ["react", "webpack-env"],
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"]
    }
  }
}

Then you can import alias instead of annoying path

// import App from "../../../../App"
import App from "~/App"

...

Options

tsConfigPath (string | string[])

Specify set where your TypeScript configuration file.

If not set:

• use Environment variable TS_NODE_PROJECT
• or search tsconfig.json in current working directory.

logLevel ("none" | "error" | "warn" | "info" | "debug" | "trace") (default: "info")

Log level when the plugin is running.

reference

• https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping
• https://github.com/microsoft/TypeScript/issues/5039