Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

craco-alias

Package Overview
Dependencies
Maintainers
1
Versions
14
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

craco-alias

A craco plugin for automatic aliases generation

  • 2.3.0
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

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"

  • filter: A function of type ([key, value]) => boolean
    Optional, used to remove some aliases from the resulting config
    Example: ([key]) => !key.startsWith('node_modules')

  • 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 aliases
      "@baz": ["./baz.js"],
      "@boo": ["./boo.jsx"],

      // folder aliases
      "@root": ["./"],
      "@root/*": ["./*"],
      "@lib": ["./lib"],
      "@lib/*": ["./lib/*"],

      // package aliases (types is optional without ts)
      "@my-react-select": [
        "../node_modules/react-select",
        "../node_modules/@types/react-select"
      ],
      "@my-react-select/*": [
        "../node_modules/react-select/*",
        "../node_modules/@types/react-select"
      ]
    }
  }
}
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": "./src",
        "paths": {
          // file aliases
          "@baz": ["./baz.ts"],
          "@boo": ["./boo.tsx"],
    
          // folder aliases
          "@root": ["./"],
          "@root/*": ["./*"],
          "@lib": ["./lib"],
          "@lib/*": ["./lib/*"],
    
          // package aliases
          "@my-react-select": [
            "../node_modules/react-select",
            "../node_modules/@types/react-select"
          ],
          "@my-react-select/*": [
            "../node_modules/react-select/*",
            "../node_modules/@types/react-select"
          ]
        }
      }
    }
    
  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).

Keywords

FAQs

Package last updated on 07 May 2021

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

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc