在頁面上包含節點模塊

Question

在網頁上包含節點模塊的最佳方法是什么？

我應該使用<script src="../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>類的絕對路徑，還是有一種更簡便更好的方法？

謝謝。

Answer 1

將此添加到您的app.js文件中

app.use('/placeholder', express.static(__dirname + '/node_modules/'));

這使您可以編寫：

<script src="/placeholder/bootstrap/dist/js/bootstrap.min.js"></script>

然后，Node會將路徑重定向到node_modules文件夾。

您可以將placeholder更改為所需的名稱，我的命名為scripts

Answer 2

節點模塊旨在在NodeJS環境中在服務器端執行，而不是在瀏覽器中使用。 因此，最好不要將它們包含在網頁中。

我會注意到，Bootstrap是一個客戶端框架，因此首先將它作為NodeJS模塊是沒有意義的。

如果您正在尋找用於客戶端軟件包的npm的工具，那么本周的口味是Bower 。

Answer 3

我對這個問題的回答將有所不同並且有所進步。 也許它現在對您沒有幫助，但是肯定的是，將來會有所幫助。 此外，它會幫助其他人。

是的，第一個答案是絕對正確的，您可以添加一個占位符，然后在索引文件中添加與其相對的鏈接。

現在，您是否正在使用任務執行器，例如gulp或grunt？ 如果沒有，我建議您開始使用它，因為您可以使用這些工具進行大量的手工工作，最終節省大量時間。

您可能在想為什么我要在這里談論吞咽或咕gr。 我很快會回答這個問題。

由於您正在使用node.js，因此您已經知道如何在Node中加載模塊。 例如：require（'express'）;

如果我們可以在客戶應用程序中使用這種方法怎么辦？ 您只需要在html中包含一個js文件，該js文件將需要所有其他js庫。

太好了，突然之間，您可以將html頁面中的腳本標簽的數量從大約20-30減少到1。

這是模塊裝載器的圖片。

但是瀏覽器無法理解require語句。

為了解決這個問題，我們使用了一個稱為browserify的工具，我們可以使用gulp（我之前提到過）來配置一個任務來對文件進行瀏覽器化。 使用此功能時，您將需要將所有js庫和自己的js文件整合到一個文件中（例如：app.js）。 但是正如我們所說，瀏覽器無法理解需求。 在這里，browserify將對該app.js文件進行預處理，並吐出一個應包含在html中的文件。

您可以閱讀本文以清楚了解如何實現此目的。 使用Gulp和browserify的可擴展應用程序 。

很整潔吧！ :)

其他一些模塊加載器是System.js和webpack