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