前端工程化(2)：postCss 和 babel的使用

前端工程化(2)：postCss 和 babel的使用

本文例子可以点击这里

0 前言

babel是什么：
官网给出的定义

Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

postcss是什么：
官网给出的的定义：

PostCSS 是一个允许使用 JS 插件转换样式的工具。 这些插件可以检查（lint）你的 CSS，支持 CSS Variables 和 Mixins， 编译尚未被浏览器广泛支持的先进的 CSS 语法，内联图片，以及其它很多优秀的功能。

PostCSS 接收一个 CSS 文件并提供了一个 API 来分析、修改它的规则（通过把 CSS 规则转换成一个抽象语法树的方式）。在这之后，这个 API 便可被许多插件利用来做有用的事情，比如寻错或自动添加 CSS vendor 前缀。

总而言之：这两个插件对于前端工程化是非常重要的

1 在vuecli中使用postcss

使用vue-cli 安装一个脚手架

vue create vue_postcssbabel

因为vue-cli已经内置postcss-loader，所以直接之前根目录下新建文件postcss.config.js 即可

在该文件上注册插件

module.exports = {
    'plugins': {
        'autoprefixer': {},
        'cssnano': {},
        'postcss-preset-env': {}
    }
}

推荐插件可以去postcss官网上查看

这里介绍三个常用插件

autoprefixer:利用从 Can I Use 网站获取的数据为 CSS 规则添加特定厂商的前缀。 Autoprefixer 自动获取浏览器的流行度和能够支持的属性，并根据这些数据帮你自动为 CSS 规则添加前缀。

PostCSS Preset Env:将最新的 CSS 语法转换成大多数浏览器都能理解的语法，并根据你的目标浏览器或运行时环境来确定你需要的 polyfills，此功能基于 cssdb 实现。

cssnano:缩减（minification）是指利用各种方法来 减少代码体积的过程。和 gzip 之类的保留 CSS 文件的原始语义（即无损失）的技术不同，缩减（minification） 天生是一个有损失的过程，例如，其中某些值可能会被替换为更简化的 等价语法，或者选择器被合并。

在app.vue中简单编辑

<style lang="less">
:fullscreen {
  color:red
}

</style>

运行npm run build 查看编译出来的文件:

:-webkit-full-screen {
    color: red
}

:-ms-fullscreen {
    color: red
}

:fullscreen {
    color: red
}

可以看到postcss插件中使用的autoprefixer插件已经生效

2 在vuecli中使用babel

因为vuecli在生成文件时已经生成了babel.config.js,我们只要做一个简单的验证就行：
打开babel.config.js 把preset中的"@vue/cli-plugin-babel/preset"删除

在app.vue中写一个es6方法

export default {
  name: "App",
  components: {
    HelloWorld
  },
  mounted(){
    this.test()
  },
  methods:{
    test(){
      return ()=>{
        console.log(`我是es5`);
      }
    }
  }
};
</script>

执行npm run build
能找到这一段methods:{test:function(){return function(){console.log("我是es5")}}}} 可见箭头函数已经被转换成es5语法