{"id":13452058,"url":"https://github.com/umijs/babel-plugin-import","last_synced_at":"2025-12-15T03:43:43.158Z","repository":{"id":37340101,"uuid":"46479925","full_name":"umijs/babel-plugin-import","owner":"umijs","description":"Modularly import plugin for babel.","archived":false,"fork":false,"pushed_at":"2024-04-24T12:41:03.000Z","size":1587,"stargazers_count":3162,"open_issues_count":133,"forks_count":398,"subscribers_count":41,"default_branch":"master","last_synced_at":"2025-04-09T17:48:00.069Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/umijs.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":"2015-11-19T08:54:04.000Z","updated_at":"2025-03-31T09:38:56.000Z","dependencies_parsed_at":"2022-07-08T01:25:48.703Z","dependency_job_id":"d66da65d-2ac3-498d-8b70-95b9480c52d8","html_url":"https://github.com/umijs/babel-plugin-import","commit_stats":{"total_commits":228,"total_committers":49,"mean_commits":4.653061224489796,"dds":0.5877192982456141,"last_synced_commit":"8cc97c8e394891a684d7300d26cbe2b86f20d076"},"previous_names":["ant-design/babel-plugin-import"],"tags_count":40,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umijs%2Fbabel-plugin-import","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umijs%2Fbabel-plugin-import/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umijs%2Fbabel-plugin-import/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umijs%2Fbabel-plugin-import/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/umijs","download_url":"https://codeload.github.com/umijs/babel-plugin-import/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248663172,"owners_count":21141705,"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-07-31T07:01:11.515Z","updated_at":"2025-12-15T03:43:38.100Z","avatar_url":"https://github.com/umijs.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# babel-plugin-import\n\nModular import plugin for babel, compatible with [antd](https://github.com/ant-design/ant-design), [antd-mobile](https://github.com/ant-design/ant-design-mobile), lodash, [material-ui](http://material-ui.com/), and so on.\n\n[![NPM version](https://img.shields.io/npm/v/babel-plugin-import.svg?style=flat)](https://npmjs.org/package/babel-plugin-import)\n[![Build Status](https://img.shields.io/travis/ant-design/babel-plugin-import.svg?style=flat)](https://travis-ci.org/ant-design/babel-plugin-import)\n\n----\n\n## Why babel-plugin-import\n\n- [English Instruction](https://ant.design/docs/react/getting-started#Import-on-Demand)\n- [中文说明](https://ant.design/docs/react/getting-started-cn#%E6%8C%89%E9%9C%80%E5%8A%A0%E8%BD%BD)\n\n## Where to add babel-plugin-import\n\n- [babelrc](https://babeljs.io/docs/usage/babelrc/)\n- [babel-loader](https://github.com/babel/babel-loader)\n\n## Example\n\n#### `{ \"libraryName\": \"antd\" }`\n\n```javascript\nimport { Button } from 'antd';\nReactDOM.render(\u003cButton\u003exxxx\u003c/Button\u003e);\n\n      ↓ ↓ ↓ ↓ ↓ ↓\n\nvar _button = require('antd/lib/button');\nReactDOM.render(\u003c_button\u003exxxx\u003c/_button\u003e);\n```\n\n#### `{ \"libraryName\": \"antd\", style: \"css\" }`\n\n```javascript\nimport { Button } from 'antd';\nReactDOM.render(\u003cButton\u003exxxx\u003c/Button\u003e);\n\n      ↓ ↓ ↓ ↓ ↓ ↓\n\nvar _button = require('antd/lib/button');\nrequire('antd/lib/button/style/css');\nReactDOM.render(\u003c_button\u003exxxx\u003c/_button\u003e);\n```\n\n#### `{ \"libraryName\": \"antd\", style: true }`\n\n```javascript\nimport { Button } from 'antd';\nReactDOM.render(\u003cButton\u003exxxx\u003c/Button\u003e);\n\n      ↓ ↓ ↓ ↓ ↓ ↓\n\nvar _button = require('antd/lib/button');\nrequire('antd/lib/button/style');\nReactDOM.render(\u003c_button\u003exxxx\u003c/_button\u003e);\n```\n\nNote : with `style: true` css source files are imported and optimizations can be done during compilation time. With `style: \"css\"`, pre bundled css files are imported as they are.\n\n`style: true` can reduce the bundle size significantly, depending on your usage of the library.\n\n## Usage\n\n```bash\nnpm install babel-plugin-import --save-dev\n```\n\nVia `.babelrc` or babel-loader.\n\n```js\n{\n  \"plugins\": [[\"import\", options]]\n}\n```\n\n### options\n\n`options` can be object.\n\n```javascript\n{\n  \"libraryName\": \"antd\",\n  \"style\": true,   // or 'css'\n}\n```\n\n```javascript\n{\n  \"libraryName\": \"lodash\",\n  \"libraryDirectory\": \"\",\n  \"camel2DashComponentName\": false,  // default: true\n}\n```\n\n```javascript\n{\n  \"libraryName\": \"@material-ui/core\",\n  \"libraryDirectory\": \"components\",  // default: lib\n  \"camel2DashComponentName\": false,  // default: true\n}\n```\n\n~`options` can be an array.~ It's not available in babel@7+\n\nFor Example:\n\n```javascript\n[\n  {\n    \"libraryName\": \"antd\",\n    \"libraryDirectory\": \"lib\",   // default: lib\n    \"style\": true\n  },\n  {\n    \"libraryName\": \"antd-mobile\"\n  },\n]\n```\n`Options` can't be an array in babel@7+, but you can add plugins with name to support multiple dependencies.\n\nFor Example:\n\n```javascrit\n// .babelrc\n\"plugins\": [\n  [\"import\", { \"libraryName\": \"antd\", \"libraryDirectory\": \"lib\"}, \"antd\"],\n  [\"import\", { \"libraryName\": \"antd-mobile\", \"libraryDirectory\": \"lib\"}, \"antd-mobile\"]\n]\n```\n\n#### style\n\n- `[\"import\", { \"libraryName\": \"antd\" }]`: import js modularly\n- `[\"import\", { \"libraryName\": \"antd\", \"style\": true }]`: import js and css modularly (LESS/Sass source files)\n- `[\"import\", { \"libraryName\": \"antd\", \"style\": \"css\" }]`: import js and css modularly (css built files)\n\nIf option style is a `Function`, `babel-plugin-import` will auto import the file which filepath equal to the function return value. This is useful for the components library developers.\n\ne.g.\n- ``[\"import\", { \"libraryName\": \"antd\", \"style\": (name) =\u003e `${name}/style/2x` }]``: import js and css modularly \u0026 css file path is `ComponentName/style/2x`\n\nIf a component has no style, you can use the `style` function to return a `false` and the style will be ignored.\n\ne.g.\n```js\n[\n  \"import\",\n    {\n      \"libraryName\": \"antd\",\n      \"style\": (name: string, file: Object) =\u003e {\n        if(name === 'antd/lib/utils'){\n          return false;\n        }\n        return `${name}/style/2x`;\n      }\n    }\n]\n```\n\n#### styleLibraryDirectory\n\n- `[\"import\", { \"libraryName\": \"element-ui\", \"styleLibraryDirectory\": \"lib/theme-chalk\" }]`: import js and css modularly\n\nIf `styleLibraryDirectory` is provided (default `null`), it will be used to form style file path,\n`style` will be ignored then. e.g.\n\n```javascript\n{\n  \"libraryName\": \"element-ui\",\n  \"styleLibraryDirectory\": \"lib/theme-chalk\",\n}\n\nimport { Button } from 'element-ui';\n\n      ↓ ↓ ↓ ↓ ↓ ↓\n\nvar _button = require('element-ui/lib/button');\nrequire('element-ui/lib/theme-chalk/button');\n```\n\n#### customName\n\nWe can use `customName` to customize import file path.\n\nFor example, the default behavior:\n\n```typescript\nimport { TimePicker } from \"antd\"\n↓ ↓ ↓ ↓ ↓ ↓\nvar _button = require('antd/lib/time-picker');\n```\n\nYou can set `camel2DashComponentName` to `false` to disable transfer from camel to dash:\n\n```typescript\nimport { TimePicker } from \"antd\"\n↓ ↓ ↓ ↓ ↓ ↓\nvar _button = require('antd/lib/TimePicker');\n```\n\nAnd finally, you can use `customName` to customize each name parsing:\n\n```js\n[\n  \"import\",\n    {\n      \"libraryName\": \"antd\",\n      \"customName\": (name: string, file: object) =\u003e {\n        const filename = file.opts.filename;\n        if (name === 'TimePicker'){\n          return 'antd/lib/custom-time-picker';\n        }\n        if (filename.indexOf('/path/to/my/different.js') \u003e= 0) {\n          return 'antd/lib/custom-name';\n        }\n        return `antd/lib/${name}`;\n      }\n    }\n]\n```\n\nSo this result is:\n\n```typescript\nimport { TimePicker } from \"antd\"\n↓ ↓ ↓ ↓ ↓ ↓\nvar _button = require('antd/lib/custom-time-picker');\n```\n\nIn some cases, the transformer may serialize the configuration object. If we set the `customName` to a function, it will lost after the serialization.\n\nSo we also support specifying the customName with a JavaScript source file path:\n\n```js\n[\n  \"import\",\n    {\n      \"libraryName\": \"antd\",\n      \"customName\": require('path').resolve(__dirname, './customName.js')\n    }\n]\n```\n\nThe `customName.js` looks like this:\n\n```js\nmodule.exports = function customName(name) {\n  return `antd/lib/${name}`;\n};\n```\n\n#### customStyleName\n\n`customStyleName` works exactly the same as customName, except that it deals with style file path.\n\n#### transformToDefaultImport\n\nSet this option to `false` if your module does not have a `default` export.\n\n### Note\n\nbabel-plugin-import will not work properly if you add the library to the webpack config [vendor](https://webpack.js.org/concepts/entry-points/#separate-app-and-vendor-entries).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fumijs%2Fbabel-plugin-import","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fumijs%2Fbabel-plugin-import","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fumijs%2Fbabel-plugin-import/lists"}