Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

craco-alias

2.1.1 • Public • Published

craco-alias

npm

A craco plugin for automatic aliases generation for Webpack and Jest.

List of Contents

Installation

  1. Install craco

  2. Install craco-alias:

    npm i -D craco-alias
  3. Edit craco.config.js:

    const CracoAlias = require("craco-alias");
     
    module.exports = {
      plugins: [
        {
          plugin: CracoAlias,
          options: {
            // see in examples section
          }
        }
      ]
    };
  4. Go to Examples section

Options

  • source:
    One of "options", "jsconfig", "tsconfig"
    Defaults to "options"

  • baseUrl:
    A base url for aliases. (./src for example)
    Defaults to ./ (project root directory)

  • aliases:
    An object with aliases names and paths
    Defaults to {}

  • tsConfigPath:
    A path to tsconfig file
    Only required when source is set to "tsconfig"

  • debug:
    Enable it if you ran into a problem. It will log a useful info in console.
    Defaults to false

Examples

Specify aliases manually (source: "options")

Note: you don't need to add /* part for directories in this case

/* craco.config.js */
 
const CracoAlias = require("craco-alias");
 
module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: "options",
        baseUrl: "./",
        aliases: {
          "@file": "./src/file.js",
          "@dir": "./src/some/dir",
          // you can alias packages too
          "@material-ui": "./node_modules/@material-ui-ie10"
        }
      }
    }
  ]
};
Use aliases from jsconfig.json (source: "jsconfig")
/* craco.config.js */
 
const CracoAlias = require("craco-alias");
 
module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: "jsconfig",
        // baseUrl SHOULD be specified
        // plugin does not take it from jsconfig
        baseUrl: "./src"
      }
    }
  ]
};

Note: your jsconfig should always have compilerOptions.paths property. baseUrl is optional for plugin, but some IDEs and editors require it for intellisense.

/* jsconfig.json */
 
{
  compilerOptions: {
    baseUrl: "src",
    paths: {
      "@file": ["file.js"],
      "@dir/*": ["dir/*", "dir"]
    }
  }
}
Use aliases from tsconfig.json (source: "tsconfig")
  1. Go to project's root directory.

  2. Create tsconfig.extend.json.

  3. Edit it as follows:

    {
      "compilerOptions": {
        // baseUrl is optional for plugin, but some IDEs require it
        "baseUrl": "src",
        "paths": {
          "@file-alias": ["./your/file.tsx"],
          "@folder-alias/*": ["./very/long/path/*", "./very/long/path/"]
        }
      }
    }
  4. Go to tsconfig.json.

  5. Extend tsconfig.json from tsconfig.extend.json:

    {
    + "extends": "./tsconfig.extend.json",
      "compilerOptions": {
        ...
      },
      ...
    }
  6. Edit craco.config.js:

    const CracoAlias = require("craco-alias");
     
    module.exports = {
      plugins: [
        {
          plugin: CracoAlias,
          options: {
            source: "tsconfig",
            // baseUrl SHOULD be specified
            // plugin does not take it from tsconfig
            baseUrl: "./src",
            // tsConfigPath should point to the file where "baseUrl" and "paths" are specified
            tsConfigPath: "./tsconfig.extend.json"
          }
        }
      ]
    };

Ran into a problem?

  1. Make sure your config is valid.

  2. Set debug to true in options.

  3. Run application again.

  4. Copy a printed info.

  5. Here, create an issue describing your problem (do not forget to add the debug info).

Install

npm i craco-alias

DownloadsWeekly Downloads

9,150

Version

2.1.1

License

MIT

Unpacked Size

30.1 kB

Total Files

29

Last publish

Collaborators

  • avatar