如何安装节点模块但只提交相关样式

因此，我正在建立一个新的站点，现在我的项目文件夹结构看起来像这样。如何安装节点模块但只提交相关样式

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

这涉及安装另一个工具来处理比添加库更不方便的问题。我相信有更好的方法来处理这个问题，或者让我们看看 –

如何安装节点模块但只提交相关样式

回答

相关问题