sheerun / babel-plugin-file-loader Goto Github PK

View Code? Open in Web Editor NEW

38.0 5.0 17.0 622 KB

Like webpack's file-loader, but on server side. Allows for production-grade require('./file.png')

License: MIT License

JavaScript 100.00%

babel file-loader isomorphic sse nextjs

babel-plugin-file-loader's Introduction

babel-plugin-file-loader

Works the same as Webpack's file-loader, but on server side. With 95% test coverage!

Installation

yarn add babel-plugin-file-loader

Or if you like npm:

npm install babel-plugin-file-loader --save

Then put following "file-loader" as plugin in .babelrc:

{
  "plugins": ["file-loader"]
}

This is equivalent to following default configuration:

{
  "plugins": [
    [
      "file-loader",
      {
        "name": "[hash].[ext]",
        "extensions": ["png", "jpg", "jpeg", "gif", "svg"],
        "publicPath": "/public",
        "outputPath": "/public",
        "context": "",
        "limit": 0
      }
    ]
  ]
}

How it works

More or less as follows:

Processes only import and require that reference files ending with one of "extensions"
Calculates actual $name of resource by substituting placeholders in "name"
Copies resource into $ROOT/$outputPath/$name where $ROOT is .babelrc location.
Replaces import and require in code with "$publicPath/$name" string

Example usage

import img from './file.png'
const img2 = require('./file.svg')

Puts 0dcbbaa7013869e351f.png and 8d3fe267fe578005541.svg in the /public and replaces code with:

const img = "/public/0dcbbaa7013869e351f.png"
const img2 = "/public/8d3fe267fe578005541.svg"

For real-life example go to examples.

Options

outputPath

Tells where to put static files. By default it's "/public".

This path is relative to the root of project. Setting value null prevents the plugin to copy the file.

publicPath

Tells what prefix to output in the source. By default it's "/public" as well but it can be even full url, like so: "http://cdn.example.com/foobar/"

In this case the resulting code is:

const img = "http://cdn.example.com/foobar/0dcbbaa7013869e351f.png"

name

The default is [hash].[ext] where:

Name	Type	Default	Description
`[ext]`	`{String}`	`file.extname`	The extension of the resource
`[name]`	`{String}`	`file.basename`	The basename of the resource
`[path]`	`{String}`	`file.dirname`	The path of the resource relative to the `context`
`[hash]`	`{String}`	`md5`	The hash of the content, see below for more info

The full format [hash] is: [<hashType>:hash:<digestType>:<length>], where:

Name	Type	Default	Description
`hashType`	`{String}`	`md5`	`sha1`, `md5`, `sha256`, `sha512`
`digestType`	`{String}`	`base64`	`hex`, `base26`, `base32`, `base36`, `base49`, `base52`, `base58`, `base62`, `base64`
`length`	`{Number}`	`128`	The length in chars

For example: [md5:hash:base58:8] or [hash:base36].

extensions

List of extension file-loader should look for in imports. All other imports are ignored.

context

Path to directory relative to .babelrc where application source resides. By default "", but can be e.g. "/src".

limit

Value in byte to determine if the content is base64 inlined. In that case, the file is not copy to outputPath. It replicates url-loader webpack loader behaviour.

Default is 0 which means nothing is inlined.

Contributing

Yes, please!

License

MIT

babel-plugin-file-loader's People

Contributors

Stargazers

Watchers

Forkers

songjiuchong fedehoerth davidfou vinicri ypcrumble idangozlan evanbacon harurow rafakato exodusmovement nickpalmer rafi16jan openovate thenengah robbie-cook popsork kkapooros

babel-plugin-file-loader's Issues

Use node's resolve system

It seemed unintuitive that an import would have to point to a relative path and isn't processed by node's module loading system (i.e. check node_modules, etc). Perhaps that because I was expecting the same behavior as webpacks file-loader.

In any case, is that something that can be added?

Creating Extra 'public' folders with images inside components

So the way my app is structured is any component that needs images has a nested /images folder inside each component. I am using the babel-plugin-file-loader to extract the images and move them into the /public/images at the root of the project.

This is my .babelrc config:

  "presets": [
    "env",
    "react"
  ],
  "plugins": [
    [ "babel-plugin-styled-components",
      {
        "ssr": true,
        "displayName": true
      }
    ],
    "transform-class-properties",
    "transform-decorators",
    "transform-react-constant-elements",
    "transform-react-inline-elements",
    [ "babel-plugin-webpack-alias", { "config": "./config/build/webpack.config.js" } ],
    [
      "file-loader",
      {
        "name": "[name].[ext]",
        "extensions": ["png", "jpg", "jpeg", "gif", "svg"],
        "publicPath": "/images",
        "outputPath": "/public/images",
        "context": "/"
      }
    ]
  ]
}

My issue is that every time the app builds it creates a /public/images/** directory inside any components that it is pulling the images from. All I want it to do is create the /public/images/** at root not inside each components folder that has an images folder

I have tried messing with the context, publicPath, and outputPath and I can't get it to stop making a new /public folder inside my component folders. I am not sure is this a bug or do I have something configured incorrectly??

Read image path from the Webpack manifest file

Hi,

In the company where I work, we have a scenario where we need to read the paths from the wepback manifest files. I created this functionality on top of this plugin.
Are you interested in PR with this functionality?

Version 1.1.0 not built

Hi!

Thanks for merging my PRs and release them. The problem is you forgot to build the library before releasing it.

Best

how to close the function of copies resource into outputPath?

hi dude, your babel plugin is great!
But I have an question about using it, as I said in the title, i am wondering how can I using this plugin to get the proper url I wanted at the same time NOT to copy resource like images into output Path?
I have tried setting like this:
"outputPath": ""
but it still copies my resources.

thanks!

context option

Is it fine that you have context option in your example but no explanation what is this?

Extensions with two dots in them don't appear to work (e.g. `module.less`)

Steps to reproduce:

Add plugin to babel config:

    [
      'file-loader',
      {
        name: '[hash].[ext]',
        extensions: ['module.less'],
        publicPath: '../public',
        outputPath: '/dist/public',
        context: '',
        limit: 0,
      },
    ],

Note that .module.less files are not processed. Adjusting config to:

    [
      'file-loader',
      {
        name: '[hash].[ext]',
        extensions: ['less'],
        publicPath: '../public',
        outputPath: '/dist/public',
        context: '',
        limit: 0,
      },
    ],

does work, however, our project has both less and module.less files in them, and it would be fantastic to preserve the extension.

i.e., I would love to have var styles = "../public/ad601f0b2f6a9b05a5f9bbf74cce6bec.module.less" as an output