babel-plugin-jsx-asset-url-import
Extract and transform static url to import in JSX
Example
Input
import React from 'react';
const App: React.FC = () => {
return <img src="./logo.png" alt="" />
}
Output
import React from 'react';
import _import_assets from './logo.png';
const App: React.FC = () => {
return <img src={_import_assets} alt="" />
}
Installation & Usage
pnpm add -D babel-plugin-jsx-asset-url-import
babel.config.js
export default {
plugins: ['jsx-asset-url-import'],
};
Options
includeAbsolute
- type:
boolean
- default:
false
Include absolute paths when extracting
tags
-
type:
Record<string, string[]>
-
default:
{ audio: ['src'], embed: ['src'], img: ['src', 'srcSet'], input: ['src'], object: ['data'], source: ['src', 'srcSet'], track: ['src'], video: ['poster', 'src'], image: ['xlinkHref', 'href'], use: ['xlinkHref', 'href'], }
Configure tags and attributes for extraction. If you want to extract the attributes of custom components. Please add it here. Plugin internals will be merged with the default configuration
If your component is contained in object, similar to <Foo.Bar src="./logo.png" />
. Please configure as 'Foo.Bar': ['src']
If you want to disable default rules. Please configure as img: []
Reference & Thanks
- vue-compiler-sfc - The source of inspiration for this project
- babel-handbook - Thanks for providing the Chinese handbook
- srcset-parse - Thanks for @molefrog, Dealing with srcset is giving me headaches
- babel-plugin-transform-jsx-url
- babel-plugin-transform-react-jsx-img-import