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

目录

• 目录
  • 一、创建 package.json 文件
  • 二、安装所依赖的插件

• 在写 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 表示全局安装。 a. 如果想了解postcss-cli或者autoprefixer的更多用法你可以直接点击进入。
2. 在 package.json 文件配置 browserslist

"browserslist": ["last 5 version"]

a. 如果想了解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"
}

a. 解释一下： 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 文件加上浏览器厂商前缀的方法，提升了我们的效率。