亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何包括位于node_modules文件夾內的腳本?

如何包括位于node_modules文件夾內的腳本?

慕桂英3389331 2019-10-23 16:00:14
我有一個關于node_modules納入HTML網站的最佳做法的問題。假設我的node_modules文件夾中有Bootstrap ?,F在,對于網站的發行版(實時版本),我將如何包括位于node_modules文件夾內的Bootstrap腳本和CSS文件?將Bootstrap保留在該文件夾中并執行以下操作是否有意義?<script src="./node_modules/bootstrap/dist/bootstrap.min.js></script>還是我必須在gulp文件中添加規則,然后將這些文件復制到dist文件夾中?還是最好讓gulp從我的HTML文件中完全刪除本地引導程序并將其替換為CDN版本?
查看完整描述

3 回答

?
精慕HU

TA貢獻1845條經驗 獲得超8個贊

通常,您不希望向外界公開服務器內部結構的任何內部路徑??梢宰龅氖?scripts在服務器中建立一條靜態路由,從它們所駐留的任何目錄中獲取文件。因此,如果文件位于"./node_modules/bootstrap/dist/"。然后,頁面中的腳本標簽如下所示:


<script src="/scripts/bootstrap.min.js"></script>

如果您對nodejs使用express,那么靜態路由就這么簡單:


app.use('/scripts', express.static(__dirname + '/node_modules/bootstrap/dist/'));

然后,來自的所有瀏覽器請求/scripts/xxx.js都將自動從您的dist目錄中獲取__dirname + /node_modules/bootstrap/dist/xxx.js。


注意:較新版本的NPM會將更多內容放在頂層,而不是嵌套得太深,因此,如果您使用較新版本的NPM,則路徑名將不同于OP的問題和當前答案中指示的名稱。但是,概念仍然相同。您可以找到文件在服務器驅動器上的物理位置,并app.use()使用它們express.static()來創建這些文件的偽路徑,這樣就不會將實際的服務器文件系統組織暴露給客戶端。


如果您不想創建這樣的靜態路由,則最好將公共腳本復制到Web服務器確實視為的路徑/scripts或要使用的任何頂級名稱。通常,您可以將此復制作為構建/部署過程的一部分。


如果您只想在目錄中公開一個特定文件,而不是在該目錄中找到所有文件,那么可以為每個文件手動創建單獨的路由,而不必使用express.static()諸如:


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

以及為此創建路線的代碼


app.get('/bootstrap.min.js', function(req, res) {

    res.sendFile(__dirname + '/node_modules/bootstrap/dist/bootstrap.min.js');

});

或者,如果您仍然想使用來描繪腳本的路由/scripts,則可以執行以下操作:


<script src="/scripts/bootstrap.min.js"></script>

以及為此創建路線的代碼


app.get('/scripts/bootstrap.min.js', function(req, res) {

    res.sendFile(__dirname + '/node_modules/bootstrap/dist/bootstrap.min.js');

});


查看完整回答
反對 回復 2019-10-23
?
三國紛爭

TA貢獻1804條經驗 獲得超7個贊

我將使用路徑npm模塊,然后執行以下操作:


var path = require('path');

app.use('/scripts', express.static(path.join(__dirname, 'node_modules/bootstrap/dist')));


查看完整回答
反對 回復 2019-10-23
?
眼眸繁星

TA貢獻1873條經驗 獲得超9個贊

如jfriend00所述,您不應公開服務器結構。您可以將項目依賴項文件復制到public/scripts。您可以使用dep-linker 輕松完成此操作,如下所示:


var DepLinker = require('dep-linker');

DepLinker.copyDependenciesTo('./public/scripts')

// Done


查看完整回答
反對 回復 2019-10-23
  • 3 回答
  • 0 關注
  • 890 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號