automation

前端自动化构建工具

gulp grunt webpack

gulp/grunt 与 webpack 的区别

都是前端自动化构建工具
gulp/grunt 是一种能够优化前端的开发流程的工具。
webpack是一种模块化的解决方案。

为什么使用webpack？

1. 模块化 把复杂的程序化为小的文件
2. 转译 es6等浏览器不能直接使用js的特性 
3. scss ,less 等css预处理器。

loaders

css 
css-loader => 处理css文件
style-loader => 将css-loader处理后的文件作为样式标签<style>插入到html文件中

babel => 解析es6

通常建立 .babelrc

{
    "presets": [
      "env",
      "react",
      "stage-0"
    ],
    "plugins": []
}

babel-preset-env/babel-preset-es2015 => es6转码
babel-preset-react => react转码
babel-core => 对要调用的Babel的API进行转码
babel-polyfill => 转换新的es6API Set,Map,Proxy,Reflect …

stage

如何区分Babel中的stage-0,stage-1,stage-2以及stage-3

stage-0

stage-0 => 包含stage-1,stage-2以及stage-3的所有功能
transform-do-expressions => 让jsx支持if-else
transform-function-bind => 这个插件其实就是提供过 :: 这个操作符来方便快速切换上下文

stage-2

stage-2 => stage3+
syntax-trailing-function-commas => 增加参数
transform-object-reset-spread => 支持es6解构赋值

stage-3

stage-3 =>
transform-object-reset-spread => 主要用来支持ES7中的async和await
transform-exponentiation-operator => 可以通过**这个符号来进行幂操作，想当于Math.pow(a,b)