fansenze / parcel-transformer-url-loader

📦url loader for parcel, use base64 encode file

parcel-transformer-url-loader

use base64 encode file in js and css(includes sass/less etc.)

the plugin will unlink file in production(parcel env).

Installation

if you use Parcel 1.x, you should install [email protected].

npm

npm i parcel-transformer-url-loader -D

yarn

yarn add parcel-transformer-url-loader --dev

Usage

define transformers for parcel

you must define glob in .parcelrc to match files for the transformer of parcel-transformer-url-loader.

for example:

// .parcelrc
{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.{png,jpg,jpeg}": ["parcel-transformer-url-loader"]
  }
}

Configuration

✨✨✨ If you have used url-loader in webpack, you'll feel familiar with it.

there is default options in package.json

{
  "parcel-transformer-url-loader": {
    "limit": 10240
  }
}

if you want to have your configuration

you can define "parcel-transformer-url-loader" in you package.json.

for example:

{
  "name": "your project",
  "scripts": {},
  "parcel-transformer-url-loader": {
    "limit": 8888
  }
}

parcel-transformer-url-loader's Issues

favicon.png changes to js file

In my index.html file I have this:
<link rel="shortcut icon" href="favicon.png" />

after being compiled with this plugin on, it turns to this:
<link rel="shortcut icon" href="/favicon.d82d2c87.js">

It just turns a png to a js file no matter if the file size. Can this be fixed? This plugin is part of my full stack parcel-based boilerplate.

🙋‍♀️ run demo throw error

Why run demo throw error × Cannot read property 'run' of undefined

× Cannot read property 'run' of undefined
at Child.handleRequest (c:\Users\john\Desktop\parcel-plugin-url-loader\demo\node_modules\parcel-bundler\src\workerfarm\child.js:57:41)
at Child.messageListener (c:\Users\john\Desktop\parcel-plugin-url-loader\demo\node_modules\parcel-bundler\src\workerfarm\child.js:32:19)
at emitTwo (events.js:131:20)
at process.emit (events.js:214:7)
at emit (internal/child_process.js:772:12)
at _combinedTickCallback (internal/process/next_tick.js:141:11)
at process._tickCallback (internal/process/next_tick.js:180:9)

parcel-plugin-url-loader with snowpack not working?

This plug-in was suggested to help efficiently bundling SAP UI5 Components, but appears to be not working as expected. Could you, please take a look at this discussion

Cannot destructure property `exts`

uikit.less:undefined:undefined: Cannot destructure property exts of 'undefined' or 'null'.

This is the error I'm getting while using this with UIKit, UIKit by default uses Webpack and some of the SVG's is links too need to be inlined. I want to purge the result and decided to go for Parcel. Currently this error is the only thing preventing me doing that.

collection is empty ,so unlink will not effect

const handlerAssets = collection.get()
console.log(handlerAssets)
but log only get Map {},and it is empty.
So output the useless files to the dist folder.

Support for Parcel v2

The example package.json file has

"devDependencies": {
    ...
    "parcel-bundler": "^1.11.0"
    ...
}

The parcel-bundler package is deprecated now, and v2 is published in a package called parcel.

The format of the .parcelrc file changed, so using the example .parcelrc:

{
  "url-loader": {
    "exts": ["jpg", "png"],
    "limit": 66666
  }
}

Produces the following error:

@parcel/core: Invalid Parcel Config

.parcelrc:2:2
  1 | {
> 2 |   "url-loader": {
>   |   ^^^^^^^^^^^^ Possible values: "$schema", "extends", "bundler", "resolvers", "transformers", "validators", "namers", "packagers", "optimizers", "compressors", "reporters", "runtimes", "filePath", "resolveFrom"
  3 |     "exts": [
  4 |       "jpg",

Links to documentation:

• https://parceljs.org/features/plugins/#plugins
• https://parceljs.org/plugin-system/overview/

Doesn't work with @import and has promise error

(node:5044) UnhandledPromiseRejectionWarning: TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined
    at assertPath (path.js:39:11)
    at Object.resolve (path.js:166:7)
    at handlerAssets.forEach (C:\Users\user\Documents\Projects\site\templates\node_modules\parcel-plugin-url-loader\lib\index.js:23:14)

This is the promise error I'm receiving. Also it is not trying to inline any of the less files I import.

[Bug]Cannot read property 'generated' of undefined

🚨 Cannot read property 'generated' of undefined
at Packager.addAsset (/Users/*******/node_modules/parcel-plugin-url-loader/lib/packager.js:34:46)

cannot support images in css???

Cannot find module 'parcel-plugin-url-loader' from 'project-path/src/view'

my project directory structure:

├── src
│   ├── image
│   │   └── 1.jpg
│   ├── js
│   │   ├── common.js
│   │   ├── index.js
│   │   └── second.js
│   ├── styles
│   │   └── index.scss
│   └── view
│       ├── index.html
│       └── second.html
└── yarn.lock

15 directories, 44 files

usage: (second.js)

import ImageSrc from '../image/1.jpg'

console.log('welcome to the second page.')

let img = document.createElement('img')
img.src = ImageSrc
document.body.appendChild(img)

when i want to build my project, it throw an error:

{17-12-26 18:22}Leung:~/workspace/parcel-demo@master✗✗✗✗✗✗ lynnleung% yarn build
yarn run v1.3.2
$ NODE_ENV=production && parcel build src/view/*.html -d build --public-url public
⏳  Building...
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved 1 new dependency.
🚨  /Users/lynnleung/workspace/parcel-demo/src/js/second.js: Couldn't find preset "env" relative to directory "/Users/lynnleung/workspace/parcel-demo"
Error: Cannot find module 'parcel-plugin-url-loader' from '/Users/lynnleung/workspace/parcel-demo/src/view'
    at /usr/local/lib/node_modules/parcel-bundler/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
    at Array.map (<anonymous>)
    at OptionManager.resolvePresets (/usr/local/lib/node_modules/parcel-bundler/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
    at OptionManager.mergePresets (/usr/local/lib/node_modules/parcel-bundler/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
    at OptionManager.mergeOptions (/usr/local/lib/node_modules/parcel-bundler/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
    at OptionManager.init (/usr/local/lib/node_modules/parcel-bundler/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (/usr/local/lib/node_modules/parcel-bundler/node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (/usr/local/lib/node_modules/parcel-bundler/node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at JSAsset.getParserOptions (/usr/local/lib/node_modules/parcel-bundler/src/assets/JSAsset.js:55:20)
    at <anonymous>
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Do not output the encoded files to the dist folder

Output the encoded files to the dist folder is useless, redundant.
We may be confused: "Why they are still here? Does the plugin take effect?".
And also it will expend more space of the repo and server.
——Well done, 兄弟！