Babel 是一个javascript编译器，PostCSS 是一个样式转换工具。两者都可以看作是一个转化平台，我们可以在上面使用一些插件，来达到想要的代码转化。几乎每个前端项目都要使用它们。

Babel

配置 .babelrc 文件

1{
2    "presets": [
3        //  babel-preset-env插件，相当于 es2015 ，es2016 ，es2017 及最新版本。以后只需这一个preset就够了
4        ["env", {  
5            "modules": false, // 默认为 "commonjs",为false的话则是es6模块语法
6
7            "targets": {
8              "browsers": ["> 1%", "last 2 versions", "android 2.3"]     // browserslist 
9            },
10
11            "useBuiltIns": true  // 如果为 true 且引入了polyfill  (import "babel-polyfill"）的话，插件 会根据 targets 的配置，重写 import "babel-polyfill" ，只引入对应环境必须的 "babel-polyfill" 的子模块，减少了多余的代码引入
12        }]
13    ],
14
15    "plugins": [
16        //  babel-plugin-transform-runtime 插件，无全局污染地使用新API，但是不能使用实例方法，建议在开发供他人使用的库时使用。一般业务情况下使用 babel-polyfill 感觉也没啥问题，那点污染对开发几乎无影响
17        "transform-runtime", {   
18
19            // 以下都是默认配置
20            "helpers": true,  // 将内联的语法转换代码替换为引用对应模块，减少重复代码
21
22            "polyfill": true,  // 使用非全局污染的 polyfill
23
24            "regenerator": true, // 使用不污染全局作用域的 regenerator 运行时
25
26            "moduleName": "babel-runtime"  // 设置使用helper模块时的路径
27    }]
28}

PostCSS

使用webpack时配置 .postcssrc.js :

1module.exports = {
2  "plugins": {
3    "autoprefixer": {
4        browsers: ['android 2.3']
5    },
6    "postcss-mpvue-wxss": {}
7  }
8}

使用gulp时:

1const gulp = require('gulp'),
2    postcss = require('gulp-postcss'),
3    autoprefixer= require('autoprefixer')  
4
5gulp.task('scss', function () {
6  return gulp.src('css/*.css', {base: '.'})
7    .pipe(postcss([
8      autoprefixer({
9        browsers: [
10            'android 2.3',
11            'ios 7'  // browserslist
12        ]
13      })
14    ]))
15    .pipe(gulp.dest('dist'))
16})