使用autoprefixer和postcss-cli给css加上浏览器厂商前缀

在写css的时候，总会使用到css3的许多好的东西，但是有一个我们不得不考虑的问题，那就是兼容性，通过Can I use这个网站我们就会发现兼容性的东西真多。

但是我们在写css的过程中，每一个都去手写的话，就会降低自己的开发效率。所以我们应该要让它自动给所有的css文件添加浏览器厂商前缀。因此我们可以使用autoprefixer这个插件来自动给css文件加上浏览器厂商前缀。

那么就开始吧，首先新建一个文件夹，在文件夹里打开命令提示符（在文件夹的空白区域shift+鼠标右击）

一、创建package.json文件

1.运行命令npm init。第一项为你创建的项目名称，这个就不多说了，一直按Enter（回车）。

二、安装所依赖的插件

1.运行命令npm i autoprefixer postcss-cli -D -g。-D表示-save-dev安装到开发项；-g表示全局安装。

如果想了解postcss-cli或者autoprefixer的更多用法你可以直接点击进入。

2.在package.json文件配置browserslist

"browserslist": ["last 5 version"]

如果想了解browserslist的更多用法你可以直接点击进入。

3.在根目录先创建src文件夹，在src里创建css文件夹，之后把你需要转化的css文件夹或css文件放到此目录下（提示：最好此css文件夹下只有css文件）。

4.在package.json文件中的script里配置运行命令。

"scripts": {

    "css": "npx postcss src/css -u autoprefixer -d dist/css",

    "test": "echo \"Error: no test specified\" && exit 1"

}

解释一下： src/css表示转化之前目录名，dis/css表示转化之后目录名，-u表示--use及需要使用的插件，-d表示-out-dir及需要输出的命令。

5.运行命令npm run css

查看前后对比效果图

这里分享一下我的演示目录和package.json文件

解释一下：里面有一些文件或许你没有，没有关系，因为我这里还使用了babel把es6转换成es5，所以略有不同。

因为es6的语法糖有很多，所以我们在开发的时候喜欢使用es6的东西。但是还是老问题--兼容性。所有需要使用babel。当然，如果你想要了解怎么一次性把所有的js文件里的es6转为es5可以点击babel（这里我解释了autoprefixer的使用和babel的使用）

总结：虽然只是一个小小的autoprefixer的使用，但是里面还是涉及到很多有用的知识的。最后通过这种自动化的方法，即通过autoprefixer自动把所有的css文件加上浏览器厂商前缀的方法，提升了我们的效率。