{"id":24358670,"url":"https://github.com/dayitv89/babel-plugin-relative-path-import","last_synced_at":"2025-04-10T05:45:36.470Z","repository":{"id":89764898,"uuid":"133459121","full_name":"dayitv89/babel-plugin-relative-path-import","owner":"dayitv89","description":"babel plugin for converting relative path to absolute path","archived":false,"fork":false,"pushed_at":"2018-11-29T08:35:22.000Z","size":45,"stargazers_count":5,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-24T06:54:45.644Z","etag":null,"topics":["babel-plugin","js-easy-import-statment","js-relative-path","npm","react-native"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/babel-plugin-relative-path-import","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dayitv89.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-05-15T04:29:31.000Z","updated_at":"2022-07-13T13:03:32.000Z","dependencies_parsed_at":null,"dependency_job_id":"aea9bca0-7e0e-443e-b5cd-aff695eefdfb","html_url":"https://github.com/dayitv89/babel-plugin-relative-path-import","commit_stats":{"total_commits":13,"total_committers":3,"mean_commits":4.333333333333333,"dds":"0.23076923076923073","last_synced_commit":"295417f3c0c9f9a18eab5b8fe89ecb8b69d4576b"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dayitv89%2Fbabel-plugin-relative-path-import","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dayitv89%2Fbabel-plugin-relative-path-import/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dayitv89%2Fbabel-plugin-relative-path-import/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dayitv89%2Fbabel-plugin-relative-path-import/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dayitv89","download_url":"https://codeload.github.com/dayitv89/babel-plugin-relative-path-import/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248166881,"owners_count":21058479,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel-plugin","js-easy-import-statment","js-relative-path","npm","react-native"],"created_at":"2025-01-18T20:21:04.314Z","updated_at":"2025-04-10T05:45:36.442Z","avatar_url":"https://github.com/dayitv89.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# babel-plugin-relative-path-import\n\nBabel plugin to add the opportunity to use `import` and `require` with root based paths.\u003cbr\u003e\n[![Build Status](https://travis-ci.org/dayitv89/babel-plugin-relative-path-import.svg?branch=master)](https://travis-ci.org/dayitv89/babel-plugin-relative-path-import)\n[![Build Status](https://app.bitrise.io/app/233ca8f676ebaf7d/status.svg?token=3ZTN8OKoFWVzeHy085tG3A\u0026branch=master)](https://app.bitrise.io/app/233ca8f676ebaf7d)\n[![https://github.com/dayitv89/babel-plugin-relative-path-import](https://img.shields.io/npm/dm/babel-plugin-relative-path-import.svg)](https://www.npmjs.com/package/babel-plugin-relative-path-import)\n![](https://img.shields.io/badge/Stable-v2.0.1-green.svg?style=flat)\n\n## Versions:\n\n- Babel 7 supports : `v2.0.1`\n- Previous stable version: `v1.0.5`\n\n## Example\n\n```javascript\n// Usually\nimport UserAction from '../../../actions/UserAction';\nconst Colors = require('../../theme/Colors');\n\n// With babel-plugin-relative-path-import\nimport UserAction from '@actions/UserAction';\nconst Colors = require('@theme/Colors');\n```\n\n## Install\n\n**npm**\n\n```\nnpm install babel-plugin-relative-path-import --save-dev\n```\n\n**yarn**\n\n```\nyarn add babel-plugin-relative-path-import --dev\n```\n\n## Use\n\nAdd a `.babelrc` file and write:\n\n```javascript\n{\n  \"plugins\": [\n\t\t[\n\t\t\t\"babel-plugin-relative-path-import\",\n\t\t\t{\n\t\t\t\t\"paths\": [{\n\t\t\t\t\t\"rootPathPrefix\": \"~\", // `@` is the default so you can remove this if you want\n\t\t\t\t\t\"rootPathSuffix\": \"src/js\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"rootPathPrefix\": \"@\",\n\t\t\t\t\t\"rootPathSuffix\": \"other-src/js\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"rootPathPrefix\": \"@parent\",\n\t\t\t\t\t\"rootPathSuffix\": \"../../src/in/parent\" // since we support relative paths you can also go into a parent directory\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"rootPathPrefix\": \"@some\",\n\t\t\t\t\t\"rootPathSuffix\": \"../../src/in/some\" // since we support relative paths you can also go into a parent directory\n\t\t\t\t}]\n\t\t\t}\n\t\t]\n\t]\n}\n\n// Now you can use the plugin like:\nimport foo from '~/my-file';\nconst bar = require('@/my-file');\n\n// Usually\nimport ParentExample from '../../src/in/parent/example.js';\nconst OtherExample = require('../../src/in/some/example.js');\n\n// With Babel-Root-Importer\nimport ParentExample from '@parent/example.js';\nconst OtherExample = require('@some/example.js');\n```\n\nor pass the plugin with the plugins-flag on CLI\n\n```\nbabel-node myfile.js --plugins babel-plugin-relative-path-import\n```\n\n### Don't let ESLint be confused\n\nIf you use [eslint-plugin-import](https://github.com/benmosher/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](https://github.com/bingqichen/eslint-import-resolver-babel-plugin-root-import)\n\n```json\n    \"import/resolver\": {\n      \"babel-plugin-relative-path-import\": {}\n    }\n```\n\n### Don't let Flow be confused\n\nIf you use Facebook's [Flow](https://flowtype.org/) 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.\n\n```\n[options]\nmodule.name_mapper='^{rootPathPrefix}/\\(.*\\)$' -\u003e '\u003cPROJECT_ROOT\u003e/{rootPathSuffix}/\\1'\n```\n\n## FYI\n\nWebpack 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.\n[READ MORE](http://xabikos.com/2015/10/03/Webpack-aliases-and-relative-paths/)\n\n### Want to revert back to relative paths?\n\nSometimes 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](https://www.npmjs.com/package/convert-root-import) to help you with the conversion.\n\n### Distributing package?\n\nWhile distributing package somewhere, `.babelrc` file has problem to resolve the path. To fix that you should run `postinstall` inside your package.json.\n\n```js\n// BabelPostScript.js\n(function() {\n\tconst path = process.cwd();\n\tif (path.includes('node_modules')) {\n\t\tconst dataPrefix = path.substring(path.indexOf('node_modules')) + '/';\n\t\tconst fs = require('fs');\n\t\tconst config = {\n\t\t\tfileName: './.babelrc',\n\t\t\tfileType: 'utf8',\n\t\t\tdataPrefix\n\t\t};\n\n\t\tfs.readFile(config.fileName, config.fileType, function(err, data) {\n\t\t\tconst bableDefault = JSON.parse(data);\n\t\t\tbableDefault.plugins[0][1].paths.forEach(i =\u003e {\n\t\t\t\ti.rootPathSuffix = `${config.dataPrefix}${i.rootPathSuffix}`;\n\t\t\t});\n\t\t\tfs.writeFile(config.fileName, JSON.stringify(bableDefault, null, 2), function(err) {\n\t\t\t\tif (err) throw err;\n\t\t\t\tconsole.log('BabelPostScript for babel-plugin-relative-path-import run: complete');\n\t\t\t});\n\t\t});\n\t}\n})();\n```\n\nRun this script using `postinstall` inside `package.json`\n\n```js\n{\n\t...\n\t\"scripts\": {\n\t\t...\n\t\t\"postinstall\": \"node ./BabelPostScript.js\"\n\t},\n\t...\n}\n```\n\n### Credit\n\nImproved by [Gaurav D. Sharma](https://github.com/dayitv89), inspired \u0026 originally taken from [entwicklerstube](https://github.com/entwicklerstube/babel-plugin-root-import)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdayitv89%2Fbabel-plugin-relative-path-import","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdayitv89%2Fbabel-plugin-relative-path-import","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdayitv89%2Fbabel-plugin-relative-path-import/lists"}