How do you do a custom build for vanilla JS, non-angular

[Jakobud]

I'm wanting to use Swiper in a production website. It's just a basic website that uses vanilla JS. No Angular or React or any of that stuff.

There are a lot of modules I don't need. I removed them from the build-config.js. When I run the build it says its building for angular. How do I change this? I just want a normal, vanilla JS version of a custom Swiper build. What do I have to do? It's really unclear in this way. I want a simple JS file that I add to my HTML.

[putnikproj]

Hello! This is described in Swiper API documentation/custom build – https://swiperjs.com/swiper-api#custom-build

[Jakobud]

Hello and thank you. I don't see anything in that documentation on how to target or not target specific types of builds. When I run npm run build:prod it says it's building the angular version. How do I build just the normal vanilla JS "core" version? I don't see anything in your link about that.

[nolimits4web]

When I run the build it says its building for angular

And also for Core, React, Vue and Svelte. Grab the Core version after the build process finishes

[Jakobud]

Okay maybe I'm missing something here. Here is my build output:

~/Downloads/swiper-master 
» nvm current
v14.16.0
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
~/Downloads/swiper-master 
» npm run build:prod

> [email protected] build:prod /Users/me/Downloads/swiper-master
> cross-env NODE_ENV=production node scripts/build

Successfully compiled 6 files with Babel (2750ms).
Successfully compiled 6 files with Babel (2782ms).
Successfully compiled 12 files with Babel (3007ms).
Successfully compiled 11 files with Babel (3121ms).
Styles build completed!
Successfully compiled 11 files with Babel (3230ms).
Successfully compiled 12 files with Babel (3388ms).
Successfully compiled 92 files with Babel (4975ms).
Successfully compiled 92 files with Babel (5171ms).
Building Angular Package

------------------------------------------------------------------------------
Building entry point 'swiper_angular'
------------------------------------------------------------------------------
✔ Compiling TypeScript sources through NGC
✔ Bundling to FESM2015
⠙ Bundling to UMDWARNING: No name was provided for external module 'swiper/core' in output.globals – guessing 'Swiper'
✔ Bundling to UMD
✔ Minifying UMD bundle
✔ Writing package metadata
ℹ Built swiper_angular

------------------------------------------------------------------------------
Built Angular Package
 - from: /Users/me/Downloads/swiper-master/src/angular
 - to:   /Users/me/Downloads/swiper-master/package/angular
------------------------------------------------------------------------------
  

Perhaps I'm misunderstanding the output messages. It looks like it's just building the angular version. Do I have to set something in the build config to tell it to build only the core version? When I go into the package directory I see a bunch of files. I also see a "core" directory but it only contains a package.json.

[nolimits4web]

It builds all versions

[Jakobud]

Oh okay. That's not really clear from the output. So is swiper-bundle.js the core version I want to grab?

Thanks for the help!

[disemio]

1. Edit the ./scripts/build.js;
2. Remove the const buildAngular = require('./build-angular'); and the .add('angular', buildAngular);
3. Save the changes and run npm run build:prod.