Babel 和 PostCss 的一些基本配置

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'))
})