How Do You Customize Bootstrap 4's JavaScript File

Question

I'm building a website that only needs Bootstrap 4's collapse.js and dropdown.js so I can use it's Navbar component.

I don't want to use the entire Bootstrap file.

So I downloaded Bootstrap's source code and dropped bootstrap-4.3.1⁩ ▸ ⁨js⁩ ▸ ⁨src⁩ ▸ ⁨util.js, bootstrap-4.3.1⁩ ▸ ⁨js⁩ ▸ ⁨src⁩ ▸ ⁨collapse.js and bootstrap-4.3.1⁩ ▸ ⁨js⁩ ▸ ⁨src⁩ ▸ ⁨dropdown.js into my project.

Then linked them up from my page:

    ...
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="js/util.js"></script>
    <script src="js/collapse.js"></script>
    <script src="js/dropdown.js"></script>
  </body>
</html>

However, when I refresh the page to test the navbar, I get this error in my console:

Uncaught SyntaxError: Unexpected identifier     util.js:8
Uncaught SyntaxError: Unexpected identifier     collapse.js:8
Uncaught SyntaxError: Unexpected identifier     dropdown.js:8

And of course nothing happens when I try clicking on a dropdown menu item. Any suggestions (that doesn't involve node)?

Answer 1

You are importing wrong files. You have to import compiled version of those.

Those files are in the bootstrap-4.3.1⁩ ▸ ⁨js⁩ ▸ dist.