Roole-prefixer 是一款能够为 Roole 样式表自动添加浏览器前缀的 npm 包，减少了前端工程师手动添加前缀的重复性工作，使得我们能够更加专注于业务逻辑的实现上。本文将详细介绍 Roole-prefixer 的使用教程，帮助读者更好地掌握这个工具的使用方法和注意事项。
Roole-prefixer 的安装
Roole-prefixer 可通过 npm 安装，使用如下命令：
npm install roole-prefixer
当然，在使用 Roole-prefixer 之前，你需要先安装 Roole。这里我们提供另一个安装 Roole 的命令：
npm install roole -g
Roole-prefixer 的基本用法
安装好 Roole-prefixer 后，我们就可以开始使用了。Roole-prefixer 的基本用法非常简单，只需在终端中输入以下命令：
roole-prefixer -i input.css -o output.css
其中 -i 参数表示输入文件名，-o 参数表示输出文件名。如果您没有指定输出文件名，那么 Roole-prefixer 会直接将处理后的样式表输出到终端中。
Roole-prefixer 的高级选项
Roole-prefixer 提供了许多高级选项，使得其可以适应各种不同的场景。以下是一些比较常用的高级选项：
-b, --browsers
指定 Roole-prefixer 需要为哪些浏览器添加前缀。例如：
roole-prefixer -i input.css -o output.css -b 'last 2 versions, > 5%, ie 9'
在上述命令中，我们为最近两个版本、使用率大于 5% 和 IE9 中的浏览器都添加了前缀。您也可以指定更加具体的浏览器版本：
roole-prefixer -i input.css -o output.css -b 'Firefox 20, Chrome 10, Safari 6'
-c, --cascade
指定 Roole-prefixer 能否在样式表属性中添加前缀。默认情况下，Roole-prefixer 会在所有位置都添加前缀。
roole-prefixer -i input.css -o output.css -c
将按照 Roole 样式表规范只添加需要的前缀，在属性上是否添加前缀。同时，您也可以指定只为某些特定属性添加前缀：
roole-prefixer -i input.css -o output.css -c 'animation, transform'
如果您在其中指定了不需要添加前缀的属性，则 Roole-prefixer 会跳过这些属性的前缀添加。
-e, --exclude
指定 Roole-prefixer 需要排除哪些选择器。例如：
roole-prefixer -i input.css -o output.css -e '.no-pref'
在上述命令中，我们排除了所有选择器为 .no-pref 的样式。当然，您也可以指定多个选择器：
roole-prefixer -i input.css -o output.css -e '.no-pref, .other-class'
-s, --suffix
指定 Roole-prefixer 在前缀的名称上添加一个特定的后缀名称。例如：
roole-prefixer -i input.css -o output.css -s '--prefix'
在上述命令中，我们为每个前缀都添加了一个后缀名称 --prefix。
示例代码
-- -------------------- ---- -------
-- --------- --
--------------- -
-------- -----
---------------- -------
------------ -------
----------- -----------
------ -----
------- ------
-
---------- -
----- --
------- ------
------- -----
------- --- ----- ------
-
---------- -
---------- ---------- -- ----------- ---------
-
---------- ---------- -
-- - ---------- -------------- -
--- - ---------- ----------------- -
---- - ---------- -------------- -
--- -------------------- ---- -------
-- ---------- --
--------------- -
-------- ------------
-------- ------------
-------- -----
----------------- -------
-------------- -------
---------------- -------
------------------ -------
--------------- -------
------------ -------
----------- -----------
------ -----
------- ------
-
---------- -
----------------- --
--------- - - ---
----- - - ---
------- ------
------- -----
------- --- ----- ------
-
---------- -
------------------ ---------- -- ----------- ---------
---------- ---------- -- ----------- ---------
-
------------------ ---------- -
-- - ------------------ -------------- ---------- -------------- -
--- - ------------------ ----------------- ---------- ----------------- -
---- - ------------------ -------------- ---------- -------------- -
-
---------- ---------- -
-- - ---------- -------------- -
--- - ---------- ----------------- -
---- - ---------- -------------- -
-结语
本文详细介绍了 Roole-prefixer 的使用方法，包括基本用法和高级选项。通过本文，读者不仅能够掌握 Roole-prefixer 的使用技巧，更加能够在实际的开发工作中，高效地运用这个工具，减少不必要的前缀添加工作，提高前端工作效率以及代码的可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/75588