什么是 vendor-prefix
在编写 css 样式时，为了解决不同浏览器之间的兼容性问题，我们经常需要使用到 vendor-prefix。其实 vendor-prefix 就是前缀，它是在 css 属性名前添加浏览器厂商的标识，标识浏览器支持该属性。
比如，-webkit 前缀是用于判断 Safari 和 Chrome 是否支持该属性，在某些情况下，还需要添加 -moz 前缀用于判断 Firefox 是否支持该属性，如下所示：
.box {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}为什么要使用 npm 包
在开发过程中，由于我们需要频繁地使用 vendor-prefix，为了避免重复性工作，我们可以使用 npm 包来提高效率。
npm 包 vendor-prefix
vendor-prefix 是一个可以自动添加 css vendor-prefix 的 npm 包。使用 vendor-prefix，我们可以将 css 样式定义成对象，再使用 vendor-prefix 函数将样式对象转换成正确的 css 字符串。
接下来，我们将详细介绍如何使用。
安装
在项目根目录下执行以下命令，安装 vendor-prefix：
npm install vendor-prefix --save-dev
使用
1. 引入 vendor-prefix
我们首先需要在 js 文件中引入 vendor-prefix：
const prefix = require('vendor-prefix');2. 定义样式
样式可以定义成一个对象，其中，属性名是 css 属性名，属性值是样式值，如下所示：
const styles = {
borderRadius: '4px',
boxShadow: '2px 2px 2px rgba(0, 0, 0, 0.1)',
};3. 添加前缀
使用 prefix 函数将样式对象转换成正确的 css 字符串，如下所示：
const css = prefix(styles);
此时得到的 css 字符串如下所示：
border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
示例代码
以下是完整的样例代码：
-- -------------------- ---- ------- ----- ------ - ------------------------- ----- ------ - - ------------- ------ ---------- ---- --- --- ------- -- -- ------ -- ----- --- - --------------- -----------------
输出结果如下所示：
border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
总结
通过本教程的介绍，我们了解了如何使用 npm 包 vendor-prefix 实现自动添加 css vendor-prefix，并给出了详细的示例代码。使用 vendor-prefix 可以帮助我们提高开发效率，让我们在 css 样式的编写中更加轻松自如。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/72945