{"id":13802109,"url":"https://github.com/yeojz/babel-plugin-transform-assets-import-to-string","last_synced_at":"2025-10-30T01:33:29.501Z","repository":{"id":21403618,"uuid":"92661985","full_name":"yeojz/babel-plugin-transform-assets-import-to-string","owner":"yeojz","description":":electric_plug: Babel plugin that transforms image assets import and requires to urls / cdn","archived":false,"fork":false,"pushed_at":"2022-12-30T17:17:31.000Z","size":855,"stargazers_count":19,"open_issues_count":20,"forks_count":13,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-29T02:47:12.006Z","etag":null,"topics":["assets","babel","babel-plugin","cdn","import","nodejs","transform"],"latest_commit_sha":null,"homepage":"","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/yeojz.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}},"created_at":"2017-05-28T13:12:11.000Z","updated_at":"2024-01-02T11:15:13.000Z","dependencies_parsed_at":"2023-01-12T03:45:35.603Z","dependency_job_id":null,"html_url":"https://github.com/yeojz/babel-plugin-transform-assets-import-to-string","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/yeojz/babel-plugin-transform-assets-import-to-string","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yeojz%2Fbabel-plugin-transform-assets-import-to-string","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yeojz%2Fbabel-plugin-transform-assets-import-to-string/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yeojz%2Fbabel-plugin-transform-assets-import-to-string/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yeojz%2Fbabel-plugin-transform-assets-import-to-string/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yeojz","download_url":"https://codeload.github.com/yeojz/babel-plugin-transform-assets-import-to-string/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yeojz%2Fbabel-plugin-transform-assets-import-to-string/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264842277,"owners_count":23671963,"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":["assets","babel","babel-plugin","cdn","import","nodejs","transform"],"created_at":"2024-08-04T00:01:36.181Z","updated_at":"2025-10-30T01:33:29.422Z","avatar_url":"https://github.com/yeojz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# babel-plugin-transform-assets-import-to-string\n\n\u003e Babel plugin that transforms image assets import and requires to urls / cdn\n\n[![npm][npm-badge]][npm-link]\n[![Build Status][circle-badge]][circle-link]\n\n## Table of Contents\n\n* [About](#about)\n* [Installation](#installation)\n* [Usage](#usage)\n  * [via babelrc](#via-babelrc)\n  * [via Node API](#via-node-api)\n\n## About\n\nThis [babel](https://babeljs.io/) plugin allows you to transform asset files into a string uri, allowing you to point your assets to CDN or other hosts, without needing to run your code through module bundlers.\n\nThis helps when doing _isomorphic_ / server-rendered applications.\n\n```js\nimport image from '../path/assets/icon.svg';\nconst image1 = require('../path/assets/icon1.svg');\n\n// to\n\nconst image = 'http://your.cdn.address/assets/icon.svg';\nconst image1 = 'http://your.cdn.address/assets/icon1.svg';\n\n// Somewhere further down in your code:\n//\n// eg: JSX\n// \u003cimg src={image} alt='' /\u003e\n//\n// eg: Other cases\n// ajaxAsyncRequest(image)\n```\n\nSee the spec for more [examples](https://github.com/yeojz/babel-plugin-transform-assets-import-to-string/blob/master/test/index.spec.js).\n\n## Installation\n\n```\n$\u003e npm install babel-plugin-transform-assets-import-to-string --save\n```\n\n## Usage\n\n### via .babelrc\n\n```json\n{\n  \"plugins\": [\n    [\n      \"transform-assets-import-to-string\",\n      {\n        \"baseDir\": \"/assets\",\n        \"baseUri\": \"http://your.cdn.address\"\n      }\n    ]\n  ]\n}\n```\n\n### via Node API\n\n```js\nrequire('babel-core').transform('code', {\n  plugins: [\n    [\n      'transform-assets-import-to-string',\n      {\n        baseDir: '/assets',\n        baseUri: 'http://your.cdn.address'\n      }\n    ]\n  ]\n});\n```\n\nBy default, it will transform the following extensions: `.gif, .jpeg, .jpg, .png, .svg` if `extensions` option is not defined. To configure a custom list, just add the `extensions` array as an option.\n\n**Note:** leading `.` (dot) is required.\n\n```json\n{\n  \"plugins\": [\n    [\n      \"transform-assets-import-to-string\",\n      {\n        \"extensions\": [\".jpg\", \".png\"]\n      }\n    ]\n  ]\n}\n```\n\n## License\n\n`babel-plugin-transform-assets-import-to-string` is [MIT licensed](./LICENSE)\n\n[circle-badge]: https://img.shields.io/circleci/project/github/yeojz/babel-plugin-transform-assets-import-to-string/master.svg?style=flat-square\n[circle-link]: https://circleci.com/gh/yeojz/babel-plugin-transform-assets-import-to-string\n[npm-badge]: https://img.shields.io/npm/v/babel-plugin-transform-assets-import-to-string.svg?style=flat-square\n[npm-link]: https://www.npmjs.com/package/babel-plugin-transform-assets-import-to-string\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyeojz%2Fbabel-plugin-transform-assets-import-to-string","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyeojz%2Fbabel-plugin-transform-assets-import-to-string","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyeojz%2Fbabel-plugin-transform-assets-import-to-string/lists"}