通过Bower安装软件包

Question

I'm new to front-end technologies, but I need to install a package via Bower. Here is the package: https://github.com/collab-project/videojs-record
The thing is that after I installed all dependencies, I obtain a folder with 219.9 MB of dependencies and so on. All this folders are situated in /public/videojs-record directory of my Laravel project. So, I can connect all .css and .js files like in documentation of package. These files are 4 times bigger than my entire project and they are situated in the public folder, that has to slow down my website, yep?
How can I move that dependencies out of the public folder, for example in /vendor directory of my project, and connect this .css and .js files in my HTML?

Answer 1

As already mentioned in the comments, there is no need to use Bower. Just use NPM as mentioned in the doc of said package.

Laravel comes already with a package.json and a webpack configuration. The normal way to add frontend dependencies is:

1. Install all Laravel basic fe dependencies

   $ npm install

2. Install a external package

   $ npm install videojs-record

3. Built the packages for development

   $ npm run dev

   Running a watcher

   $ npm run watch

   Built the packages for production

   $ npm run prod

The dependencies will be stored in node_modules . This folder can get very huge but you don't commit it to GIT or push it to the server manually.