{"id":13725603,"url":"https://github.com/PavelDymkov/babel-plugin-auto-import","last_synced_at":"2025-05-07T20:33:03.210Z","repository":{"id":21298114,"uuid":"89463856","full_name":"PavelDymkov/babel-plugin-auto-import","owner":"PavelDymkov","description":null,"archived":false,"fork":false,"pushed_at":"2023-03-02T16:56:29.000Z","size":452,"stargazers_count":41,"open_issues_count":11,"forks_count":6,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-02T15:50:15.210Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PavelDymkov.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2017-04-26T09:36:12.000Z","updated_at":"2023-08-14T04:11:02.000Z","dependencies_parsed_at":"2024-06-18T15:19:23.695Z","dependency_job_id":null,"html_url":"https://github.com/PavelDymkov/babel-plugin-auto-import","commit_stats":{"total_commits":53,"total_committers":6,"mean_commits":8.833333333333334,"dds":0.4528301886792453,"last_synced_commit":"fc97380fdeb076b69d6f09bd8c3242077546342d"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PavelDymkov%2Fbabel-plugin-auto-import","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PavelDymkov%2Fbabel-plugin-auto-import/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PavelDymkov%2Fbabel-plugin-auto-import/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PavelDymkov%2Fbabel-plugin-auto-import/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PavelDymkov","download_url":"https://codeload.github.com/PavelDymkov/babel-plugin-auto-import/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224645438,"owners_count":17346158,"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":[],"created_at":"2024-08-03T01:02:28.692Z","updated_at":"2024-11-14T15:31:36.174Z","avatar_url":"https://github.com/PavelDymkov.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# babel-plugin-auto-import\n\n\nConvert global variables to import statements\n\n- [Using with Create React App](#using-with-create-react-app)\n\n\n## Examples\n\n### Example 1\n\n**.babelrc**\n\n```json\n{\n  \"plugins\": [[\n    \"auto-import\", {\n      \"declarations\": [\n        { \"default\": \"React\", \"path\": \"react\" }\n      ]\n    }\n  ]]\n}\n```\n\n**In**\n\n```javascript\nReact.createElement(\"div\", null, []);\n```\n\n**Out**\n\n```javascript\nimport React from \"react\";\n\nReact.createElement(\"div\", null, []);\n```\n\n### Example 2\n\n**.babelrc**\n\n```json\n{\n  \"plugins\": [[\n    \"auto-import\", {\n      \"declarations\": [\n        { \"default\": \"React\", \"members\": [\"Component\"], \"path\": \"react\" }\n      ]\n    }\n  ]]\n}\n```\n\n**In**\n\n```javascript\nclass MyComponent extends Component { }\n```\n\n**Out**\n\n```javascript\nimport { Component } from \"react\";\n\nclass MyComponent extends Component { }\n```\n\n### Example 3\n\nSuitable for polyfilling browser built-ins (eg. `window.fetch`) \n\n**.babelrc**\n\n```json\n{\n  \"plugins\": [[\n    \"auto-import\", {\n      \"declarations\": [\n        { \"anonymous\": [\"fetch\"], \"path\": \"whatwg-fetch\" }\n      ]\n    }\n  ]]\n}\n```\n\n**In**\n\n```javascript\nfetch(\"http://example.com/qwe\");\n```\n\n**Out**\n\n```javascript\nimport \"whatwg-fetch\";\n\nfetch(\"http://example.com/qwe\");\n```\n\n### Example 4\n\nGenerate import path by filename. [name] will be replaced to processed filename.\n\n**.babelrc**\n\n```json\n{\n  \"plugins\": [[\n    \"auto-import\", {\n      \"declarations\": [\n        { \"default\": \"styles\", \"path\": \"./[name].css\" }\n      ]\n    }\n  ]]\n}\n```\n\n**In**\n\n``` component-name.js ```\n\n```javascript\n// ...\n\u003cinput className={styles.className} /\u003e\n// ...\n```\n\n**Out**\n\n```javascript\nimport styles from \"./component-name.css\";\n// ...\n\u003cinput className={styles.className} /\u003e\n// ...\n```\n\nYou can process filename by \"nameReplacePattern\" and \"nameReplaceString\" options. It's processing like this:\n\n```javascript\n\"basename.js\".replace(new RegExp(nameReplacePattern), nameReplaceString); // == [name]\n```\n\nBy default\n```javascript\nnameReplacePattern == \"\\\\.js$\";\nnameReplaceString == \"\";\n```\n\n\n**.babelrc**\n\n```json\n{\n  \"plugins\": [[\n    \"auto-import\", {\n      \"declarations\": [\n        {\n          \"default\": \"styles\", \"path\": \"./[name].css\",\n          \"nameReplacePattern\": \"\\.component\\.js$\", \"nameReplaceString\": \".styles\"\n        }\n      ]\n    }\n  ]]\n}\n```\n\n**In**\n\n``` name.component.js ```\n\n```javascript\n// ...\n\u003cinput className={styles.className} /\u003e\n// ...\n```\n\n**Out**\n\n```javascript\nimport styles from \"./name.styles.css\";\n// ...\n\u003cinput className={styles.className} /\u003e\n// ...\n```\n\n## Using with Create React App\n\nIf you don't want to eject your project, you can use [react-app-rewired](https://github.com/timarney/react-app-rewired) and\n[customize-cra](https://github.com/arackaf/customize-cra).\n\n[Follow the instructions](https://github.com/timarney/react-app-rewired#how-to-rewire-your-create-react-app-project).\n\n**config-overrides.js**\n\n```javascript\nconst { override, addBabelPlugins, disableEsLint } = require(\"customize-cra\");\n\nconst autoImportPluginOptions = {\n    \"declarations\": [\n        { \"default\": \"React\", members: [\"Component\"], \"path\": \"react\" }\n    ]\n};\n\n\nmodule.exports = override(\n    ...addBabelPlugins([require(\"babel-plugin-auto-import\"), autoImportPluginOptions]),\n    disableEsLint(),\n);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPavelDymkov%2Fbabel-plugin-auto-import","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FPavelDymkov%2Fbabel-plugin-auto-import","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPavelDymkov%2Fbabel-plugin-auto-import/lists"}