关于javascript:给css添加前缀jswebpack

给 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. ……

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