一个帮助写autoprefixer配置的网站

news2024/11/15 21:39:55

前端需要用到postcss的工具，用到一个插件叫autoprefixer，这个插件能够给css属性加上前缀，进行一些兼容的工作。

如何安装之类的问题在csdn上搜一下都能找到（注意，vite是包含postcss的，不用在项目中安装postcss，苦笑），我看了一下，官方是建议在package.json之中进行配置的。

postcss我个人是在vite.config.js当中配置的，具体兼容哪些浏览器是在package.json只中配置的（我感觉这也算项目配置的一部分）。如下：

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import autoprefixer from 'autoprefixer'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  css: {
    postcss: {
      plugins: [
        autoprefixer({
          // 这边显示最好的方式还是在package.json中进行限制
          grid: true
        })
      ]
    }
  }
})

package.json:

{
  "name": "postcss-test",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.47"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.1.0",
    "autoprefixer": "^10.4.14",
    "vite": "^4.3.9"
  },
  "browserslist": [
    "cover 98% in CN",
    "not dead",
    "ie >= 8"
  ]
}

可以注意到最后的browserslist字段，其中就是我对兼容的浏览器的配置，表示覆盖98%的active浏览器，同时兼容ie8往上的版本（只是自己的写法，不是最佳实践）

写了那么多废话，到了重点，这个配置究竟怎么写呢，我怎么知道我写的配置所覆盖的浏览器类型呢，这里要借助两个网站，一个是GitHub - browserslist/browserslist: 🦔 Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env🦔 Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env - GitHub - browserslist/browserslist: 🦔 Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-envhttps://github.com/browserslist/browserslist#best-practices

官网提供的最佳实践页面，就是教你写这个配置的。

配置产生的效果可以在这个网站上观看效果：BrowserslistDisplay target browsers from a Browserslist confighttps://browsersl.ist/#q=last+8+versions%2C+not+dead%2C+%3E+0.2%25®ion=CN

比如，我看到同样的一篇关于 autoprefixer的文章上的配置是这样写的：

autoprefixer({. // 自动添加前缀
                        overrideBrowserslist: [
                            "Android 4.1",
                            "iOS 7.1",
                            "Chrome > 31",
                            "ff > 31",
                            "ie >= 8"
                            //'last 2 versions', // 所有主流浏览器最近2个版本
                        ],
                        grid: true
                    })

这里部分截取了他的配置（明显限定了安卓和ios的版本），我们在上面的网站上看看，能兼容多少浏览器