babel-plugin-transform-require-image-to-url v0.1.0
babel-plugin-transform-require-image-to-url
Babel plugin that transforms image assets requires to url
Example
const image = require('../path/image.png');
<img src={require('../path/image.png')} />
↓ ↓ ↓ ↓ ↓ ↓
const image = 'https://cdn.com/image.1ms2.png';
<img src={'https://cdn.com/image.1ms2.png'} />
Installation
npm install babel-plugin-transform-require-image-to-url --save-dev
#or
yarn add -D babel-plugin-transform-require-image-to-url
Usage
via .babelrc
{
"plugins": [
[
"transform-require-image-to-url",
{
"test": ".png$",
"exclude": ".local.png$",
"publicPath": "https://cdn.com",
"outputPath": "dist/folder",
"md5Length": 8
}
]
]
}
via .babelrc.js
module.exports = {
plugins: [
[
'transform-require-image-to-url',
{
test: /\.png$/,
exclude: /\.local\.png$/,
publicPath: 'https://cdn.com',
outputPath: 'dist/folder',
md5Length: 8
}
]
]
};
options
test
Image resource validator, support string, regexp and function
e.g.
module.exports = {
plugins: [
[
'transform-require-image-to-url',
{
test: /\.png$/
// test: '\.png$'
// test: (imageName: string) => /\.png$/.test(imageName)
}
]
]
};
The above three writings are equivalent
The default validator is a regexp, which is /\.(png|jpeg|jpg|gif)$/
exclude
Image resource validator, Exclude images that do not need to be converted
e.g.
module.exports = {
plugins: [
[
'transform-require-image-to-url',
{
test: /\.local\.png$/
// test: '\.local\.png$'
// test: (imageName: string) => /\.local\.png$/.test(imageName)
}
]
]
};
The default validator is a regexp, which is /\.local\.(png|jpeg|jpg|gif)$/
publicPath
The cdn address of the image resource
e.g.
module.exports = {
plugins: [
[
'transform-require-image-to-url',
{
publicPath: 'https://cdn.com'
}
]
]
};
outputPath
The path to which the image was copied when it was converted
e.g.
module.exports = {
plugins: [
[
'transform-require-image-to-url',
{
outputPath: 'dist/custom/folder'
}
]
]
};
The default path is dist/cdn-assets
emitFile
Whether the image is copied to the specified path when converted
module.exports = {
plugins: [
[
'transform-require-image-to-url',
{
emitFile: false
}
]
]
};
The default value is true
md5Length
The length of the md5 value in the image name
e.g.
module.exports = {
plugins: [
[
'transform-require-image-to-url',
{
publicPath: 'https://cdn.com',
md5Length: 8 // default 4
}
]
]
};
The cdn picture address is https://cdn.com/image.1ms2md3j.png
hook
The hook executed when the image resource is converted
e.g.
module.exports = {
plugins: [
[
'transform-require-image-to-url',
{
publicPath: 'https://cdn.com',
hook: (fileName, filePath, hashFileName, imagePublicUrl) => {
// you can do something
}
}
]
]
};
The cdn picture address is `https://cdn.com/image.1ms2md3j.png
4 years ago