Parcel - 添加 svg 精灵

Question

同事们，我正在尝试将 Parcel 作为 webpack 项目构建器的替代品，我喜欢它，但是有两个我仍然无法击败的 BUT（这里是开始构建的链接 - build on Parcel 和build on webpack):

1) 在 webpack 下的程序集中，我使用 svg-sprite-loader 创建 svg sprites，它在打开 body svg 后立即添加如下符号：

parcel组件中没有这样的插件，我尝试安装parcel-plugin-svg-sprite，但是它没有编译单独的sprite（至少我在文档中没有找到这样的解决方案）。 结果，现在，我以包裹文档中描述的方式插入svg（我在项目中使用了哈巴狗）：

svg
   use (href = "../../ icons / facebook.svg")

但在这种情况下，我只得到一个空白空间（（

2) 在构建项目时，我得到一个包含很多文件的文件夹，这不是很方便，在文档中我发现我可以使用 -d 标志来设置名称对于构建项目的文件夹，但没有找到如何按文件夹分隔html/css/js/imgs。

提前感谢您的帮助。

Answer 1

第一个 parcel 的插件开发人员为 parcel v2 构建了版本，我说谢谢！这是插件，用html和pug测试过，一切正常！ https://github.com/Epimodev/parcel-plugin-svg-sprite

Answer 2

1. 我认为目前还没有 parcel2 插件可以让您轻松创建 svg 精灵。您提到的parcel-plugin-svg-sprite 包裹是针对包裹 1 的，因此预计不会起作用。 （通常，您可以期望 parcel 2 插件符合 this naming scheme - 以 parcel-plugin 开头的软件包可能适用于 parcel 1）。

   作为一种解决方法，在使用 parcel 构建的 pug 模板中使用 svgs 的最简单方法是使用带有 src 属性的 <img> 或 <object> 标记，例如：

   img(src="../../icons/facebook.svg")
   

   或

   object(data="../../icons/facebook.svg")
   

   这样做，在 svg 文件是“外部”的地方有一些限制（discussed in the docs），特别是下载每个 svg 会额外的往返（这对缓存有好处，但如果有在您的网站上有数百个 svg）。此外，您不能使用周围文档中的 css 为 svg 设置样式。

   您可以通过使用带有数据 URL 的 css background-image/background 属性来避免第一个限制（额外的服务器往返）（请参阅 docs）

   .pug 文件

   .icon-test
   

   .(s)css 文件

   .icon-test {
      background-image: url('data-url:../../icons/facebook.svg'); ​
   ​}
   

   ​（在基于 react 的项目中，有一种方法可以避免 both 这些限制，并通过 @parcel/transformer-react-svg 插件（参见 docs）让包裹将 SVG 作为内联 JSX 注入，但是我不知道pug 模板有类似的插件。）

2. 您可以通过编写custom namer plugin 来控制包裹的dist 文件夹中的输出文件的结构。我在this answer 中解释了如何做到这一点。