babel-plugin-import-static-files

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
• Installation
• Options
• Usage
  • via babelrc
  • 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. Use srcDir 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