[SOLVED] Compile Uppy JS with the necessary plugins only

Uppy
1

Hello community,

I have a question because I do not know how to proceed :upside_down_face:

I would like to implement Uppy but I do not know how to compile only the elements/plugins I need :

ghokpoojlgfilmba
ghokpoojlgfilmba.png923×132 7.11 KB

Do you know how I can compile a uppy.js with the plugins I only need please ? (it could also be used by other Uppy users)

I work with gulp for concat, minify/uglify.

Thanks for your help !

2

Hello there,

Someone to help me please?

Thank you :slight_smile:

3

Hey,not sure if that’s gonna work, but if you use Webpack or Browserify or Packer or Rollup it’s as easy as requiring the npm.

Does that help?

4

Hey Kevin,

Thank you for your reply.

I’m more comfortable with Gulp, do you know if it’s possible?

5

I think since Gulp with Concat basically just copies all the files and pastes them into one big new file, there will be collisions of variables, and also the files themselves will want to do requires which just do not work natively in the browser. The requires need to be rewritten, which is what those other bundlers work well for. Admittedly I’m a bit out of my comfort zone in this domain, but from my understanding, I don’t see how it could work with plain concatenation of sources, and I would recommend using a newer bundler for this, or if that’s hassle, just use Uppy from the CDN :slight_smile:

6

Hi Kevin,

I may have misrepresented my need.

For example, I would not need the following plugin: @uppy/instagram.
I wish I could use a lighter JS file with my needs only.

Thank you !

7

You need to create a custom bundle to only include the plugins you need. If you’re not using a bundler for the rest of your application, you can create one just for Uppy.

  • Install browserify
npm install -g browserify
  • Install the Uppy modules that you will use
npm install @uppy/core @uppy/tus @uppy/dashboard
  • Create a file that only includes the plugins you need
// custom-uppy.js
window.Uppy = {}
Uppy.Core = require('@uppy/core')
Uppy.Tus = require('@uppy/tus')
Uppy.Dashboard = require('@uppy/dashboard')
  • Create a bundle using browserify
browserify custom-uppy.js -o my-uppy-bundle.js

Now, you can use my-uppy-bundle.js in a script tag or use gulp-concat to add it to the start of your scripts. It will define a global Uppy variable just like the build that comes with the uppy package, but with only the things you need.

You can just copy the my-uppy-bundle.js file into your project, so you don’t need to use browserify or another bundler for your other files.

I don’t think we’ll provide more minimal bundles ourselves, because there are so many possible combinations. We’d have to build 100+ bundles to serve every use case probably :sweat_smile:

Hope that helps!

1 Like
8

Hey @goto-bus-stop

Thank you for your help !

I think I need :

  • @uppy/core
  • @uppy/aws-s3-multipart

To use @uppy/aws-s3-multipart, are there other plugins to consider ? :yum:

9

Hi

I managed to do what I wanted, it works like a charm!

Thank you all for your help.

2 Likes
10

Glad you were able to figure it out! And thanks for the great help here @goto-bus-stop :+1: