如何在不安裝節點的情況下在 django-admin 小部件中使用 npm 中的模塊？

Question

背景

我有一個 Django 應用程序，我想為其創建一個管理小部件。 該小部件將以特定方式（如終端）顯示文本。 這樣應用程序管理員就可以看到來自 django 編排的分析過程的轉發日志（該應用程序是django-twined ）。

為此，我想使用諸如 terminal-kit 之類的東西或其他需要npm install <whatever>的庫之一

構建應用程序

該應用程序是在 docker 中構建的，我不希望整個節點堆棧最終出現在我的生產映像中。

我可以使用多階段 docker 構建； 所以在第一階段從 NPM 安裝 node 和一個庫，然后在第二階段從node_modules復制庫，但這感覺不必要地慢。

另外，因為我當時所做的只是使用與 django 應用程序捆綁在一起的原始 js 靜態資產，所以我不確定如何導入模塊（或者這是否可能）。

問題

• 我可以在沒有節點堆棧的情況下安裝 npm 模塊，從而避免處理笨重的多階段構建嗎？

• 然后我怎樣才能將該模塊的內容import或require到 vanilla javascript 中以在 django 小部件中使用？

• 這甚至在一般情況下可能嗎？ 如果它看起來像移動一座山，我會放棄，只是在那里拍一個帶有等寬字體的文本區域……但如果以類似終端的方式正確處理日志突出顯示和顏色，那就太好了。

Answer 1

我可以在沒有節點堆棧的情況下安裝 npm 模塊，從而避免處理笨重的多階段構建嗎？

你可以使用像 Browserify 這樣的開發工具來匯總一個 npm 包。 這可以通過使用類似以下內容的方式卷起整個包來完成：

browserify --require terminal-kit

Browserify 將解析包並創建一個 JS 文件，您可以嘗試在瀏覽器中加載該文件。 這有一些限制，所以我建議您試驗和探索 Browserify 文檔。

然后我怎樣才能將該模塊的內容導入或要求到 vanilla javascript 中以在 django 小部件中使用？

您可以通過在后端管理類定義中包含 Django 模板文件引用來完成此操作。 在模板中，您需要包含一個 html JS 源標記，該標記指向您要加載的 JS 腳本。 Django 可以在構建時包含靜態文件，您可以在構建時使用它來包含 JS 文件，然后使用本地資源引用將模板文件指向正確的位置。

這甚至在一般情況下可能嗎？

一般來說，這絕對是可能的，但 YMMV。 它歸結為 npm 包的復雜性以及它在瀏覽器中究竟要做什么。

在步驟中，我將執行以下操作：

1. 使用 Browserify 將 npm 包轉換為單個 JS 文件。
2. 創建一個加載本地 JS 文件的 html 文件，在瀏覽器中打開它。
3. 打開控制台並查看您希望重現的命令/上下文是否在瀏覽器中按預期工作。 您還可以編寫另一個 vanilla JS 文件並將其加載到 html 文件中進行測試。
4. 在 Django 管理模板/小部件中包含 JS 文件引用。
5. 在使用/顯示全局實例化 JS 腳本的小部件中編寫自定義 JS 代碼。

此策略基於我的個人經驗，我遵循此策略取得了成功，希望它有所幫助。