给css增加前缀（js，webpack）

对于更多日常应用的公共类的操作方法，能够关注下小滑轮网站

代码中某些中央增加。

在我的项目中，有时须要在某个状况下须要增加css前缀，这个工夫个别会用js给css增加。上面提供一个通用办法，用来增加前缀。

/** * @desc 对css属性针对不同浏览器加公有前缀 * @desc 先计算下以后浏览器反对那个前缀，反对哪个，就减少那个前缀。并不是把所有的前缀。 * style: 是字符串，例如： transform * return: 字符串 。例如： webkitTransform （驼峰模式，js插入css的属性都是驼峰格局） */function prefixStyle (style) {    let vendor = (() => {        let elementStyle = document.createElement('div').style        let tranformNames = {            webkit: 'webkitTransform',            Moz: 'MozTransform',            O: 'OTransform',            ms: 'msTransform',            standard: 'transform',        }        for (let key in tranformNames) {            if (elementStyle[tranformNames[key]] !== undefined) {                return key            }        }        return false    })()    if (vendor === false) {        return false    }    if (vendor === 'standard') {        return style    }    return vendor + style.charAt(0).toUpperCase() + style.substr(1)}

用webpack给我的项目整体增加css前

实现这个须要3步，

  1. 须要应用两个插件（postcss-loader， autoprefixer），请用（npm或者yarn）下载这两个插件。
  2. 须要更改webpack.config.js文件配置，外面会用到这两个插件。

    在css的解析处，增加postcss-loader

            rules: [                {                    test: /\.css$/,                    use: ["style-loader", "css-loader", "postcss-loader"]                }

在plugins 模块，增加一个plugin (autoprefixer)

    plugins:[require('autoprefixer')]
  1. 在package.json 里须要增加browserslist。 这个是为了确定给什么版本的浏览器起作用。对于browserslist 的应用语法和规定，请看官网，Browserslist 的数据都是来自Can I Use的。
"browserslist": [    "Firefox > 20",    "iOS >= 7",    "ie >= 8",    "last 5 versions",    "> 5%"  ]

小滑轮网站上还有其的工具函数

  1. 防抖
  2. 节流
  3. 字符串
  4. 正则
  5. ......

能够去看看，心愿对你的开发有帮忙～