NTFS Path Mockery

    babel-plugin-import-static-files

    1.0.4 • Public • Published

    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.

    npm

    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.

    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

    Install

    npm i babel-plugin-import-static-files

    DownloadsWeekly Downloads

    419

    Version

    1.0.4

    License

    MIT

    Last publish

    Collaborators

    • ahk