文件压缩js语法检查css加前缀babel转换实战

本文主要通过4个点来讲述现在前端的工作开发流程

我们一般使用autoprefixer来给我们写的css自动添加前缀，来配合不同浏览器的区别。

aotoprefixer官网 介绍了它是 postcss 的一个插件，所以我们可以通过postcss来使用 autoprefixer 来自动添加前缀。 postcss官网链接 介绍了怎么使用autoprefixer

npm run/cli

To use PostCSS from your command-line interface or with npm scripts there is postcss-cli .

意思：

现在分别有三种可以来检查语法的插件。 jshint jslinteslint 流行的现在是 eslint

看见命令行提示我们需要使用 eslint --init 进行初始化

会在目录下面创建一个 eslintrc.js , 根据这个配置我们来检查自己的js，安装期间出现了一个问题

安装过程和问题

在配置文件里指定环境，使用 env ，指定你想启用的环境，设置它们为 true 。例如，以下示例启用了 browser 和 Node.js 的环境：

uglify官网

总结 发现它并不兼容es6的语法，所以我们需要先把 es6 转换成 es5

babel官网

babel-cli 官网

可以加"-moz-"。

这个前缀主要用于低版本火狐浏览器css3的兼容。由于css3刚出来的时候，各浏览器没有统一，所以低版本需要加兼容前缀，后面的版本已经统一了就可以不加前缀也能正常显示。也可以使用js插件自动加前缀。

CSS3的属性为什么要带前缀

使用过CSS3属性的同学都知道，CSS3属性都需要带各浏览器的前缀，甚至到现在，依然还有很多属性需要带前缀。这是为什么呢？我的理解是，浏览器厂商以前就一直在实施CSS3，但它还未成为真正的标准。为此，当一些CSS3样式语法还存在波动时，它们提供针对流星器的前缀。

现在主要流行的浏览器内核主要有：

Trident内核主要代表为IE浏览器

Gecko内核：主要代表为Firefox

Presto内核：主要代表为Opera

Webkit内核：产要代表为Chrome和Safari 

而这些不同内核的浏览器，CSS3属性（部分需要添加前缀的属性）对应需要添加不同的前缀，也将其称之为浏览器的私有前缀，添加上私有前缀之后的CSS3属性可以说是对应浏览器的私有属性：

Trident内核：前缀为-ms

Gecko内核：前缀为-moz

Presto内核：前缀为-o

Webkit内核：前缀为-webkit

-moz代表firefox浏览器私有属性

-ms代表IE浏览器私有属性

-webkit代表chrome、safari私有属性

来看一个简单的示例，早期写一个圆角border-radius，需要这样写：

---