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

Question

所以，我正在设置一个新站点，我项目的文件夹结构现在如下所示。

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

I have added vendor/ for js/css libraries that I must install to keep them separate, since I want anyone who installs my project to install those in vendor from package.json - most libraries contain too many files 99% which I don't want to push to production.

现在项目完成后，我想将代码推送到生产环境 ，只包含必要的 js/css 文件。

这就是问题所在。例如，如果我使用

安装 bulma css

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

它会将几乎 70 个与 bulma 相关的文件转储到 /vendor/bulma/ 中，但之后我只需要一两个 css 文件，因为我将编译 sass文件到 css 为：

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

所以我的问题是：我假设每个开发人员都是这样做的，而且我找不到任何文档来建议如何去做。忽略 /vendor 目录是否安全？如果我安装 vue、font-awesome、bootstrap .. 我怎样才能只获取我需要的文件而不是 /vendors 文件夹中的所有文件？

Answer 1

我会尝试在 "tree shaking CSS" 上进行谷歌搜索，看看是否能为您提供帮助。也许是这样的：https://github.com/jacobp100/es-css-modules

Answer 2

Rollup 插件可能会有用。它适用于 js，postcss，link 表示它也适用于 css。

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

Answer 3

你的问题实际上很宽泛 - 不过，我会尽量列出。

假设您正在从头开始构建一个项目并且需要包含 vuejs, jquery, fontawesome 但只需要包含几个文件。

您在这里遇到的问题是 module dependency 关于 npm 模块的问题。（您可以使用许多不同的工具来管理库依赖项的版本，并确保它们包含在您的项目中，即 package managers）。

好的 - 从这里开始，您可以对自己说

but I only need say, one icon from fontawesome in your final build (dist) and I don't want to commit all my modules into source control

同样，这是您从源代码管理中省略 node_modules 和其他依赖库的地方（即包括 node_modules 您的 .gitignore）

重申

你可以安装需要的库，
添加 node_modules 到 .gitignore ,
将这些库捆绑到供您的用户使用的供应商单个文件中（可以通过 browserify/webpack/rollup/gulp/grunt/yarn 等）。
在 npm 脚本中生成包

现在您可以进一步提问 -

Why would I use any of those tools? - they're distracting me from simply copy/pasting vendor libaries into my source control.

已创建构建工具以

简化开发人员管道，以便您不要必须 copy/paste 将供应商库放入供应商文件夹中。
确保所有文件自动捆绑到客户端
允许您保持 track/restrict 库版本更新/在需要时通过 package.json
允许您添加其他构建步骤（例如缩小、md5hash 版本控制、压缩、代码拆分、资产管理等等）。

Now lets break down the original question here:

如何确保其他开发人员在克隆存储库时获得他们需要的一切
如何确保我只能向最终用户提供必要的文件（如果我只使用供应商库的特定部分？）

1.如何确保开发人员得到他们需要的东西

再次重申，添加 devDependancies 和 .gitignoring 允许您只向项目添加必要的文件。

2。如何确保客户在不膨胀请求文件的情况下获得他们需要的东西？

这里是webpack、browserify、gulp、grunt、rollup等构建工具尝试实现的地方。这是因为对于一些文件大小超过 200kb 的库，您可能需要将这些文件分成不同的客户端请求（因此，不要求用户请求一个大文件，这是 browserify 项目的症状）。

您需要注意的第二种技术是针对特定的库，您可以使用 import mdn link，其中您可以从依赖库中请求一个 function/class（其中进一步减小文件大小）。

另一种技术是使用 less import 语句（可以提取 less functions/styles 与上面类似，但 SCSS 目前不支持）。对于 SCSS，您基本上只剩下 copy/pasting 必要的样式到您的基础 scss 中，这也会为您节省 space。

编辑 如何从 npm install libaries

创建捆绑包

从您上面提到的评论（关于不想在您的工作流程中包含一个工具，没有必要概述任何一个特定的策略 - 您可以在线找到 answers/tutorials 关于如何设置 gulp/browserify/webpack 满足您的特殊需求）。

但是，由于您目前正在使用 yarn - 我将详细介绍。

首先，yarn 是一个包管理器（类似于 npm）。它对 --modules-folder 所做的只是将包安装到指定的文件夹中，仅此而已。所以我们并不真正关心这个（因为它和 npm 做同样的事情）。（即您的 vendor 文件夹在许多方面与 node_modules 相同）。

We could use

webpack

gulp

grunt

rollup

browserify

brunch

（基本上允许您将所有这些包捆绑到一个入口点以打包到客户端的所有构建工具）。

具体怎么做我就不说了，因为那是网上可以查到的流程，从上面的评论来看，我可以告诉你也不是特别在意。

您正在寻找的是零配置 javascript 构建工具。（完全超出了你原来问题的范围，我只会在单独的问答中回答）。

Answer 4

看看Pancake. It has been built specifically for the purpose of moving only those files out of the node_modules folder that you need. I wrote an article about it here: https://medium.com/dailyjs/npm-and-the-front-end-950c79fc22ce

（可能不是答案，而是一个很好的提示）

PS：我是文章和工具的作者，所以有明显的偏见:)

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

How to install node modules but commit only relevant styles

package-managers

css-frameworks

node-modules

package.json

yarnpkg