New to Uppy - Build only Uppy/Core or Lightweight CDN JS File?

Uppy
1

I am new to Uppy and need only the @Uppy/Core,

In the docs at Getting Started — Uppy there is a CDN file:
https://releases.transloadit.com/uppy/v3.2.2/uppy.min.js
which is however 530 KB big. This would probably be a bad user experience.

How do I compile Uppy/Core? I tried rollup and browserify, but I cannot get it working.
Is there some Guide on how to do it or an pre-build/available CDN?

Thanks so much.

2

Browserify is no longer supported because it doesn’t support the ESM syntax.
Could you tell us what is not working for you with regard to Rollup? That’s what we are using in some of the examples of the Uppy repo, I’m surprised to hear that’s not working for you.

If you are not using a bundler, you could use import { Uppy } from 'https://unpkg.com/@uppy/core', it should work mostly fine. If you want to bundle it with your application code though, you would probably need a bundler (and most bundlers that are not Browserify should handle Uppy code without any special configuration).

3

I did experience the same issue. For Uppy 2.x I used Browserify to compile a bundle with @uppy/core, @uppy/xhr-upload, @uppy/status-bar, @uppy/file-input and @uppy/drag-drop only. If one’s not very familiar with Node.js and JavaScript bundlers such as rollup, you end up with many open questions.

After three days of trial and error, finally I got a working result using the Node.js version of Uppy, NPM and Webpack.

First create a folder and install the Node.js-version of Uppy and a few tools via NPM.

npm install @uppy/core

npm install --save-dev webpack style-loader css-loader

In the same folder, create a file webpack.config.js and add:

{
    "name": "uppy test",
    "version": "3.2.2",
    "description": "",
    "main": "src/index.js",
    "private": false,
    "scripts": {},
    "keywords": [],
    "author": "",
    "license": "GPLv3",
    "devDependencies": {
        "css-loader": "^6.7.1",
        "style-loader": "^3.3.1",
        "webpack": "^5.38.1",
        "webpack-cli": "^4.10.0"
    },
    "module": {
        "exports": {
            "mode": "production"
        }
    },
    "dependencies": {
        "@uppy/core": "^3.0.4",
    }
}

Create a folder “src” and insert a file index.js with following content:

import { Uppy } from '@uppy/core'

import '@uppy/core/dist/style.css'

// you can call it 
window.Uppy = Uppy

Create another folder “dist”.

Finally, call “npx webpack” and you’ll find a file uppy.min.js in the dist folder which is ready to use (in case I did not miss anything).