Babel 和 PostCss 的一些基本配置

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

Babel

配置 .babelrc 文件

{
    "presets": [
        //  babel-preset-env插件，相当于 es2015 ，es2016 ，es2017 及最新版本。以后只需这一个preset就够了
        ["env", {  
            "modules": false, // 默认为 "commonjs",为false的话则是es6模块语法

            "targets": {
              "browsers": ["> 1%", "last 2 versions", "android 2.3"]     // browserslist 
            },

            "useBuiltIns": true  // 如果为 true 且引入了polyfill  (import "babel-polyfill"）的话，插件 会根据 targets 的配置，重写 import "babel-polyfill" ，只引入对应环境必须的 "babel-polyfill" 的子模块，减少了多余的代码引入
        }]
    ],

    "plugins": [
        //  babel-plugin-transform-runtime 插件，无全局污染地使用新API，但是不能使用实例方法，建议在开发供他人使用的库时使用。一般业务情况下使用 babel-polyfill 感觉也没啥问题，那点污染对开发几乎无影响
        "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'),
    autoprefixer= require('autoprefixer')  

gulp.task('scss', function () {
  return gulp.src('css/*.css', {base: '.'})
    .pipe(postcss([
      autoprefixer({
        browsers: [
            'android 2.3',
            'ios 7'  // browserslist
        ]
      })
    ]))
    .pipe(gulp.dest('dist'))
})