npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@miniu/tiny-babel-plugin-root-import

v1.0.1

Published

Babel Plugin to enable relative root-import

Downloads

106

Readme

Babel Root Import

Babel plugin to add the opportunity to use import and require with root based paths. Build Status Codacy Badge Dependency Status https://github.com/entwicklerstube/babel-plugin-root-import

Example

// Usually
import SomeExample from '../../../some/example.js';
const OtherExample = require('../../../other/example.js');

// With Babel-Root-Importer
import SomeExample from '~/some/example.js';
const OtherExample = require('~/other/example.js');

Install

npm

npm install babel-plugin-root-import --save-dev

yarn

yarn add babel-plugin-root-import --dev

Use

Add a .babelrc file and write:

{
  "plugins": [
    ["babel-plugin-root-import"]
  ]
}

or pass the plugin with the plugins-flag on CLI

babel-node myfile.js --plugins babel-plugin-root-import

Extras

Custom root-path-suffix

If you want a custom root because for example all your files are in the src/js folder you can define this in your .babelrc file

{
  "plugins": [
    ["babel-plugin-root-import", {
      "rootPathSuffix": "src/js"
    }]
  ]
}

Custom root-path-prefix

If you don't like the ~ syntax you can just use your own symbol (for example a @ symbol or \)

{
  "plugins": [
    ["babel-plugin-root-import", {
      "rootPathPrefix": "@"
    }]
  ]
}

// Now you can use the plugin like:
import foo from '@/my-file';

Multiple custom prefixes and suffixes

You can supply an array of the above. The plugin will try each prefix/suffix pair in the order they are defined.

{
  "plugins": [
    ["babel-plugin-root-import", [{
      "rootPathPrefix": "~", // `~` is the default so you can remove this if you want
      "rootPathSuffix": "src/js"
    }, {
      "rootPathPrefix": "@",
      "rootPathSuffix": "other-src/js"
    }, {
      "rootPathPrefix": "#",
      "rootPathSuffix": "../../src/in/parent" // since we suport relative paths you can also go into a parent directory
    }]]
  ]
}

// Now you can use the plugin like:
import foo from '~/my-file';
const bar = require('@/my-file');

Don't let ESLint be confused

If you use eslint-plugin-import to validate imports it may be necessary to instruct ESLint to parse root imports. You can use eslint-import-resolver-babel-plugin-root-import

    "import/resolver": {
      "babel-plugin-root-import": {}
    }

Don't let Flow be confused

If you use Facebook's Flow for type-checking it is necessary to instruct it on how to map your chosen prefix to the root directory. Add the following to your .flowconfig file, replacing {rootPathPrefix} with your chosen prefix and {rootPathSuffix} with your chosen suffix.

[options]
module.name_mapper='^{rootPathPrefix}/\(.*\)$' -> '<PROJECT_ROOT>/{rootPathSuffix}/\1'

FYI

Webpack delivers a similar feature, if you just want to prevent end-less import strings you can also define aliases in the resolve module, at the moment it doesn't support custom/different symbols and multiple/custom suffixes. READ MORE

Want to revert back to relative paths?

Sometimes tooling might not be up to scratch, meaning you lose features such as navigation in your IDE. In such cases you might want to revert back to using relative paths again. If you have a significant amount of files, it might be worth looking into tooling to help you with the conversion.

Change Log

5.0.0 - 2017-02-10

  • More consistent name: babel-plugin-root-import #63
  • Renamed everything
  • Publish with new name on npm

4.1.5 - 2016-11-17

  • Compile new version and release again

4.1.4 - 2016-11-15

  • Improve support for relative paths (e.g. referencing parent folders via ../) (thanks to @Hizoul)

4.1.3 - 2016-09-14

4.1.0 - 2016-08-20

  • Use relative paths instead of absolute ones (thanks to @nescalante)

4.0.0 - 2016-06-29

3.2.2 - 2016-02-20

  • Fix custom suffix in path, missing / in generated paths

3.2.0 - 2016-02-19

  • Support Windows-Filesystem
  • Add possibility to configure a custom rootPath-Symbol (instead of ~ you can use whatever you like)

3.1.0 - 2015-12-01

  • Add possibility config the custom root path

3.0.1 - 2015-11-30

  • Updated plugin to new babel6 API
  • Splitted tests and functions into two scopes with single tests
  • Removed the "extra-root" param for the .babelrc since this is no yet supported in babel6

2.0.1 - 2015-11-15

Breaking Change to Babel 5

  • Updated to Babel 6
  • Added integration tests

1.0.1 - 2015-08-07

  • Added / updated tests
  • Implemented ESlint