Adding external libraries

[kunalkankariya]

Hi @koltyakov ,

I have created the project using no presets. How do I add external libraries from CDN like jQuery, Bootstrap, jQueryUI and refer them in say 'index.ts'?

If I have to include a third party library which doesn't have a CDN link but only a js file, how do I include that as well?

Thanks!

[koltyakov]

As in any other frontend project, npm install [library_name] to install, import * as lib from '[library_name]' to use in code. Heavy dependencies can be configured as external (standard webpack feature), in webpack.config.json (in the root of a created project). jQuery and Bootstrap are presented there as an example. But who uses jQuery/Bootstrap nowadays? Nobody. ;) If a dependency marked as external it isn't included in the bundle and should be loaded on the page, somehow. Referenced in content editor webpart or in a masterpage, script link user custom action. Also, there are copy files settings. E.g. PnPjs is configured as an external script but referenced in a sample webpart and copied to dist folder during the build.

[kunalkankariya]

@koltyakov ,

Thank you so much for this. I am just learning and not implementing this in any actual project.

Is the copyAssetsMap entry in app,json responsible for copying the pnpjs file to the dist/libs folder? If yes, even react is defined as an external dependency right? I don't see any entry to copy the react.min js file. Am I missing something here?

[koltyakov]

Yep, app.json contains configuration definition for copying. Most of my projects are in React and it happens to have tons of webpart on the page, so I prefer not bundling React into each target js. Also, while having this in a preset, default config demonstrates the possibility, so configuring similar case, I hope, should be easier for folks who use the generator.

[kunalkankariya]

Great! Thanks again.