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.
Table of Contents
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.
;const image1 = ; // 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:
When hash is true (useful for assets caching):
; // 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. Use srcDir
and outDir
to control the path replacement.
Usage
via .babelrc
or if you will use cdn
via JavaScript
;
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.
License
babel-plugin-import-static-files
is MIT licensed