What's the difference between min.js and min.js.map file in /minified folder

NewbieScroll · January 15, 2022

Hi there,

I've downloaded GSAP's ZIP file and inside the minified folder I see there is a corresponding `XXX.min.js.map` file for each `XXX.min.js`.

I'm curious what `XXX.min.js.map` file is doing?

askForum.png.35ed23b08cc912bf5c95c88e41c8e2c5.png

I've briefly tested it with simple HTML JavaScript set up like below

If I only include the `gsap.min.js.map`, the animation won't work. So I wonder what's the purpose of `gsap.min.js.map` ?

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./gsap.min.js"></script>
    <!-- <script src="./gsap.min.js.map"></script> THIS DOES NOT WORK-->
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <div>testing</div>
    <script>
      let tl = gsap.timeline();
      tl.to("div", {
        duration: 5,
        y: 100,
        backgroundColor: "red",
        ease: "power2.inOut",
      });
    </script>
  </body>
</html>

Thank you!

GreenSock · January 15, 2022

Those are called "source map files" and you can totally ignore them if you'd like. They're just used by some people in some environments purely for debugging purposes. Here are some articles that explain:

https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/

https://css-tricks.com/should-i-use-source-maps-in-production/

Happy tweening!

Notifications

Messages

What's the difference between min.js and min.js.map file in /minified folder

Recommended Posts

NewbieScroll

Link to comment

Share on other sites

GreenSock

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members