給css添加前綴（js，webpack）

關(guān)于更多日常使用的公共類的操作方法，可以關(guān)注下小滑輪網(wǎng)站

代碼中某些地方添加。

在項(xiàng)目中，有時(shí)需要在某個(gè)情況下需要添加css前綴，這個(gè)時(shí)間一般會(huì)用js給css添加。下面提供一個(gè)通用方法，用來添加前綴。

/**
 * @desc 對(duì)css屬性針對(duì)不同瀏覽器加私有前綴
 * @desc 先計(jì)算下當(dāng)前瀏覽器支持那個(gè)前綴，支持哪個(gè)，就增加那個(gè)前綴。并不是把所有的前綴。
 * 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給項(xiàng)目整體添加css前

完成這個(gè)需要3步，

1. 需要使用兩個(gè)插件（postcss-loader， autoprefixer），請(qǐng)用（npm或者yarn）下載這兩個(gè)插件。
2. 需要更改webpack.config.js文件配置，里面會(huì)用到這兩個(gè)插件。

在css的解析處，添加postcss-loader

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

在plugins 模塊，添加一個(gè)plugin (autoprefixer)

    plugins:[require('autoprefixer')]

3. 在package.json 里需要添加browserslist。 這個(gè)是為了確定給什么版本的瀏覽器起作用。關(guān)于browserslist 的使用語法和規(guī)則，請(qǐng)看官網(wǎng)，Browserslist 的數(shù)據(jù)都是來自Can I Use的。

"browserslist": [
    "Firefox > 20",
    "iOS >= 7",
    "ie >= 8",
    "last 5 versions",
    "> 5%"
  ]

小滑輪網(wǎng)站上還有其的工具函數(shù)

1. 防抖
2. 節(jié)流
3. 字符串
4. 正則
5. ......

可以去看看，希望對(duì)你的開發(fā)有幫助～