Document using Mix to track JS dependencies from source (phoenixframe…

…work#5648)

This can be valuable to people who want to avoid Node.js in their
projects, while having a simpler way to track and update dependencies
straight from Git or path, etc.

guides/asset_management.md

@@ -12,7 +12,7 @@ Finally, all other assets, that usually don't have to be preprocessed, go direct
 
 ## Third-party JS packages
 
-If you want to import JavaScript dependencies, you have two options to add them to your application:
+If you want to import JavaScript dependencies, you have at least three options to add them to your application:
 
 1. Vendor those dependencies inside your project and import them in your "assets/js/app.js" using a relative path:
 
@@ -26,6 +26,28 @@ If you want to import JavaScript dependencies, you have two options to add them
    import topbar from "topbar"
    ```
 
+3. Use Mix to track the dependency from a source repository:
+
+   ```elixir
+   # mix.exs
+   {:topbar,
+    github: "buunguyen/topbar",
+    ref: "17a435bd82aca08fbf6b6f1842e2e9c24e6e3a78",
+    app: false,
+    compile: false}
+   ```
+
+   Run `mix deps.get` to fetch the dependency and then import it:
+
+   ```js
+   import topbar from "../../deps/topbar"
+   ```
+
+   New applications use this third approach to import Heroicons, avoiding
+   vendoring a copy of all icons when you may only use a few or even none,
+   avoiding Node.js and `npm`, and tracking an explicit version that is easy to
+   update thanks to Mix.
+
 ## CSS
 
 By default, Phoenix generates CSS with the `tailwind` library, but esbuild has basic support for CSS which you can use if you aren't using tailwind. If you import a `.css` file at the top of your main `.js` file, `esbuild` will bundle it, and write it to the same directory as your final `app.js`.