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

Babel

配置 .babelrc 文件

{ ???"presets": [ ???????["env", { ???????????"modules": false, // 默认为 "commonjs",为false的话则是es6模块语法 ???????????"targets": { ?????????????"browsers": ["> 1%", "last 2 versions", "android 2.3"] ?// browserslist ????????????} ???????}] ???], ???"plugins": ["transform-runtime", ????{ ??????????// 以下都是默认配置 ???????"helpers": true, ?// 将内联的语法转换代码替换为引用对应模块，减少重复代码 ???????"polyfill": true, ?// 使用非全局污染的 polyfill ???????"regenerator": true, // 使用不污染全局作用域的 regenerator 运行时 ???????"moduleName": "babel-runtime" ?// 设置使用helper模块时的路径 ???}]}

PostCSS

使用webpack时配置 .postcssrc.js :

module.exports = { ?"plugins": { ???"autoprefixer": { ???????browsers: ['android 2.3'] ???}, ???"postcss-mpvue-wxss": {} ?}}

使用gulp时:

const gulp = require('gulp'), ???postcss = require('gulp-postcss'), ???cssnext = require('postcss-cssnext') ?// 使用autoprefixer插件的话会有sourcemap定位不准确的问题，现在不知道解决了没有gulp.task('scss', function () { ?return gulp.src('css/*.css', {base: '.'}) ???.pipe(postcss([ ?????cssnext({ ???????browsers: [ ???????????'android 2.3', ???????????'ios 7' ?// browserslist ???????] ?????}) ???])) ???.pipe(gulp.dest('dist'))})

Babel 和 PostCss 的一些基本配置

原文地址：https://www.cnblogs.com/JRliu/p/9146579.html