如何安裝節點模塊但只提交相關樣式

因此，我正在建立一個新的站點，現在我的項目文件夾結構看起來像這樣。如何安裝節點模塊但只提交相關樣式

foo.com/ 
     index.php 
     assets/ 
      css/ 
      img/ 
      js/ 
      vendor/

我加入，我必須安裝讓他們分開供應商/爲JS/CSS庫，因爲我想任何人誰安裝我的項目從安裝的package.json那些供應商 - 大多數庫包含太多許多文件99％，我不想推到生產。

現在，一旦該項目完成後，我想代碼，僅安裝必要 JS/CSS文件推到生產。

這是問題出現的地方。例如，如果我使用安裝bulma css：

yarn add bulma --modules-folder ./assets/vendor

這將轉儲布爾瑪相關文件，這幾乎是70到/vendor/bulma/但我將只需要一個或兩個css文件之後，因爲我將編譯SASS文件以CSS爲：

sass vendors/bulmna/style.scss assets/css/style.css

所以我的問題是：我假定這是每一個開發人員是怎麼做的，也沒有單證，我可以發現，建議如何做到這一點。忽略/ vendor目錄是否安全？如果我安裝vue，font-awesome，bootstrap，該怎麼辦？我如何才能獲取我需要的文件，但不是/ vendors文件夾中的所有文件？

來源

2017-06-21 tikimti-mvrht

的工具，以便通過「提交」和「推送」你的意思是將你的代碼做到你的代碼庫中？在這種情況下，您可以通過將您*不想提交的文件添加到'.gitignore'文件來做到這一點。 – DarkCygnus

@GrayCygnus是的。我可以使用'.gitignore'來忽略'vendor /'，這對bulma起作用，因爲使用'sass vendors/bulmna/style.scss assets/css/style.css'命令'我已經將所需的所有東西bulma從供應商到我的css目錄。但是，例如vuejs呢？沒有辦法轉移圖書館，還有許多其他的胖圖書館，如果我不使用99％的圖書館，我不想推動它。我理解這個問題可能並不明確，但我從工作流程的角度提出了更多的要求。就像在如何保持項目清潔一樣 –

然後你可以使用更多的東西，比如Python'virtualenv'（現在不在PC上，因爲它在節點上是等價的），所以你有獨立的環境，每個環境都有自己的依賴和包。這聽起來像是你可以使用的東西嗎？ – DarkCygnus

你的問題其實是相當廣泛的 - 但是，我會試着列出儘可能多的。

比方說你是從頭開始構建一個項目，包括vuejs, jquery, fontawesome，但只需要包括幾個文件的需要。

你在這裏打的問題是關於npm模塊的module dependency。（並且可以使用許多不同的工具來管理庫依賴項的版本，並確保它們包含在項目中，即package managers）。

確定 - 現在從這裏，你可以對自己說：

，但我只需要說，one icon from fontawesome在您的最終版本（DIST），我不想將我的所有模塊到源代碼控制

同樣，這是您從源代碼管理中省略node_modules和其他相關庫（即包括node_modules您.gitignore）

重申

您可以安裝所需的庫，
添加node_modules到的.gitignore，
捆綁這些庫到由消費廠商單個文件您的用戶（可以通過browserify/webpack/rollup/gulp/grunt/yarn等）。
產生NPM腳本

內包現在你可能會問進一步 -

爲什麼要使用其中的任何工具？ - 他們將我的注意力從複製/粘貼供應商庫文件夾轉移到我的源代碼控制中。

構建工具被創造

簡化開發管道，讓你DONT不得不/粘貼供應商libaries複製到供應商的文件夾。
確保所有文件都捆綁到客戶端自動
允許你跟蹤/限制庫的版本更新/通過在需要時package.json
允許你添加其他構建步驟（如微小，md5hash版本，壓縮，代碼拆分，資產管理等）。

現在，讓我們打破了原來的問題在這裏：

如何保證其他開發商拿克隆庫
，當他們需要我怎麼保證我只能在提供一切必要的文件給最終用戶（如果我只使用供應商庫的特定部分？）

1.如何確保開發人員得到他們需要的東西

再次，重申上面，添加devDependancies和.gitignoring允許您只添加必要的文件到您的項目。

2.我怎樣才能確保客戶得到他們所需要的，而不會膨脹請求文件？

這是構建工具，如webpack，browserify，gulp，grunt，rollup，嘗試實現的地方。這是因爲對於超過200kb文件大小的一些庫，可能需要將這些文件分離到不同的客戶端請求中（因此，不要求用戶請求一個大文件，這是browserify項目的一個重要組成部分）。

您需要了解的第二種技術是使用特定的庫，您可以使用importmdn link，您可以從一個從屬庫中需要一個函數/類（這進一步減小了文件大小）。

另一種技術是使用較少的導入語句（可以提取較少的函數/樣式類似於上面的，但目前在SCSS中不支持）。對於SCSS，你基本上只剩下複製/粘貼必要的樣式到你的基本scss中，這也會節省你的空間。

編輯 如何創建npm install libaries

從您以上（約不想包括工具爲您的工作流程所提到的意見束，有沒有點概述任何一個特定的策略 - 你可以在網上找到關於如何爲你的特定需求設置gulp/browserify/webpack的答案/教程）。

但是，因爲您正在使用yarn - 我將詳細介紹這一點。

首先，yarn是一個包管理器（比如npm）。所有它與--modules-folder一起將軟件包安裝到指定的文件夾中，就這些了。所以我們並不關心這個（因爲它和npm一樣）。（即您的vendor文件夾在許多方面與node_modules相同）。

我們可以使用

的WebPack

一飲而盡

咕嚕

彙總

browserify

早午餐

（所有構建工具基本上允許您將所有這些包打包到單個入口點以打包到客戶端）。

我不會進入如何，因爲這是一個過程，你可以在網上找到，從上面的評論，我可以告訴你也不特別在意。

你在找什麼是零配置JavaScript構建工具。（極大地超出了原始問題的範圍，我只會在單獨的Q & A中回答）。

來源

2017-06-30 10:35:41

到目前爲止這麼好，但是你錯過了重要的東西，這是如何從模塊完成的建築？就我個人而言，我使用'yarn add vue --modules-folder。/ assets/vendor /'來下載vue，bootstrap，fontawesome現在我從哪裏得到？因爲你可以在我的問題中看到我的資產/'目錄中有文件夾{css，js，images}。那麼，我該如何將這些庫/供應商構建到他們在css/js/images中的尊重目的地？對於布爾瑪來說，它非常簡單，只需從供應商那裏得到你需要的''sass vendors/bulmna/style.scss assets/css/style.css'爲其他庫，你說build ..但是怎麼做？ –

夠公平的。當我聽到像webpack，gulp，grunt這樣的東西......我從來沒有想過他們被用於什麼或如何使用。因爲我使用紗線/ npm，我認爲它們只是那些的變體。所以現在我的答案的神祕在於那些工具？我想我最好檢查一下。問題是，我的vbox不支持符號鏈接，我不能用戶webpack，除非我全球安裝（即符號鏈接），但我會給它另一個鏡頭 –

重新符號鏈接：這篇文章可能會有所幫助https://stackoverflow.com/questions/18641864/git-bash-shell-fails-to-create-symbolic-links – JGFMK

我試着用Google搜索「tree shaking CSS」來看看是否給了你一些東西。也許類似於：https://github.com/jacobp100/es-css-modules

來源

2017-06-30 08:01:10 JGFMK

這意味着我還沒有添加另一個庫，只是爲了保留我需要的供應商。我會看看是否有更好的選擇。 –

Rollup插件可能會有用。它適用於js，帶有postcss，鏈接表示它也適用於css。

https://code.lengstorf.com/learn-rollup-css

來源

2017-06-30 09:31:27 Amit

這意味着我還沒有添加另一個庫來保持我需要的供應商。我會看看是否有更好的選擇。 –

看看Pancake。它專門用於僅將那些文件移出所需的node_modules文件夾。我寫了一篇文章關於它在這裏：https://medium.com/dailyjs/npm-and-the-front-end-950c79fc22ce

（可能不是一個答案，但一個很好的提示）

PS：我既是作者，文章，並與明顯的偏見:)

來源

2017-06-30 11:20:47 Dominik

這涉及安裝另一個工具來處理比添加庫更不方便的問題。我相信有更好的方法來處理這個問題，或者讓我們看看 –

如何安裝節點模塊但只提交相關樣式

回答

相關問題