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