All Projects → risenforces → Craco Alias

risenforces / Craco Alias

Licence: mit
A craco plugin for automatic aliases generation for Webpack and Jest

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Craco Alias

Ts Monorepo
Template for setting up a TypeScript monorepo
Stars: ✭ 459 (+719.64%)
Mutual labels:  webpack, create-react-app, jest
Starter React Flux
Generate your React PWA project with TypeScript or JavaScript
Stars: ✭ 65 (+16.07%)
Mutual labels:  webpack, create-react-app, jest
Feflow
🚀 A command line tool aims to improve front-end engineer workflow and standard, powered by TypeScript.
Stars: ✭ 942 (+1582.14%)
Mutual labels:  webpack, plugin
Angular Builders
Angular build facade extensions (Jest and custom webpack configuration)
Stars: ✭ 843 (+1405.36%)
Mutual labels:  webpack, jest
Eslint Import Resolver Jest
🃏 Jest import resolution plugin for eslint-plugin-import
Stars: ✭ 29 (-48.21%)
Mutual labels:  plugin, jest
React Carousel
A pure extendable React carousel, powered by Brainhub (craftsmen who ❤️ JS)
Stars: ✭ 764 (+1264.29%)
Mutual labels:  webpack, jest
Error Overlay Webpack Plugin
Catch errors with style 💥✨
Stars: ✭ 821 (+1366.07%)
Mutual labels:  webpack, create-react-app
React Ssr Starter
All have been introduced React environment
Stars: ✭ 20 (-64.29%)
Mutual labels:  webpack, jest
Slinky
A light-weight, responsive, mobile-like navigation menu plugin
Stars: ✭ 649 (+1058.93%)
Mutual labels:  webpack, plugin
Dotenv Webpack
A secure webpack plugin that supports dotenv and other environment variables and only exposes what you choose and use.
Stars: ✭ 1,022 (+1725%)
Mutual labels:  webpack, plugin
Webpack Alioss Plugin
阿里 oss-webpack 自动上传插件
Stars: ✭ 35 (-37.5%)
Mutual labels:  webpack, plugin
React Antd Admin Template
一个基于React+Antd的后台管理模版,在线预览https://nlrx-wjc.github.io/react-antd-admin-template/
Stars: ✭ 1,022 (+1725%)
Mutual labels:  webpack, create-react-app
Js Toolbox
CLI tool to simplify the development of JavaScript apps/libraries with little to no configuration. (WORK IN PROGRESS/PACKAGE NOT PUBLISHED).
Stars: ✭ 53 (-5.36%)
Mutual labels:  webpack, jest
Public
Repository for wallaby.js questions and issues
Stars: ✭ 662 (+1082.14%)
Mutual labels:  webpack, jest
Skpm
💎📦 A utility to build and publish Sketch plugins
Stars: ✭ 890 (+1489.29%)
Mutual labels:  webpack, plugin
Serverless Typescript Starter
🗄🙅‍♀️ Deploy your next serverless JavaScript function in seconds
Stars: ✭ 653 (+1066.07%)
Mutual labels:  webpack, jest
Thinkful Workshop React Redux Node Mongodb Webpack2
Stars: ✭ 12 (-78.57%)
Mutual labels:  webpack, jest
React Boilerplate
Production-ready boilerplate for building universal web apps with React and Redux
Stars: ✭ 53 (-5.36%)
Mutual labels:  webpack, jest
React App
Create React App with server-side code support
Stars: ✭ 614 (+996.43%)
Mutual labels:  webpack, create-react-app
Retro Board
Retrospective Board
Stars: ✭ 622 (+1010.71%)
Mutual labels:  webpack, jest

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 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).

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].