babel-plugin-import-static-files
Transforms static files import and copy files to /static folder for next.js applications.
This plugin is based on babel-plugin-transform-assets-import-to-string, I just added copy functionality.
Original plugin's functionality is still working.!npmnpm-badgenpm-link
Table of Contents
- [via babelrc](#via-babelrc)
- [via JavaScript](#via-javascript)
About
This babel 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.This helps when doing isomorphic / server-rendered applications.
import image from './path/to/icon.png';
const image1 = require('./path/to/icon.svg');
// icon.png and icon.svg will be copied to project's root under baseDir (defaults to "/static") folder
// and code will be transformed to:
const image = '/static/path/to/icon.png';
const image1 = '/static/path/to/icon.svg';
// Somewhere further down in your code:
//
// eg: JSX
// <img src={image} alt='' />
//
// eg: Other cases
// ajaxAsyncRequest(image)
See the spec for more examples.
Installation
$> npm install babel-plugin-import-static-files --save
Options
Default options:{
"baseDir": "/static",
"hash": false,
"extensions": [
".gif",
".jpeg",
".jpg",
".png",
".svg"
],
"srcDir": "",
"outDir": ""
}
When hash is true (useful for assets caching):
import image from './path/to/icon.png';
// icon.png will be copied to project's root under baseDir (defaults to "/static") folder
// and code will be transformed to:
const image = '/static/icon-[hash].png';
srcDir / outDir
If you are using a compiler like Typescript and compiling your Typescript sources to a different location it also needs to get the images from the source location. UsesrcDir
and outDir
to control the path replacement. Usage
via .babelrc
{
"plugins": ["import-static-files"]
}
or if you will use cdn
{
"plugins": [
[
"import-static-files",
{
"baseDir": "/static",
"baseUri": "http://your.cdn.address"
}
]
]
}
via JavaScript
require("babel-core").transform("code", {
plugins: ["import-static-files"]
});
By 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.Note: leading
.
(dot) is required.{
"plugins": [
["import-static-files", {
"extensions": [".jpg", ".png"]
}]
]
}
License
babel-plugin-import-static-files
is MIT licensed