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

Babel 和 PostCss 的一些基本配置的更多相关文章

  1. babel和postcss引起的一点儿思考

    写es6,一般都会用到babel,它能把es6转为更好的es5,而es5可以直接在浏览器上运行.postcss是css界的babel,它可以把css转为更好的css,比如autoprefixer,让不 ...

  2. webpack4.26的详细配置,包含babel, eslint, postcss, 及各种所需loader,内含大量注释

    github地址:https://github.com/qianxiaoning/demo-webpack4.26 内含详尽注释 欢迎大家star或者fork呀~ 目录结构: completeDemo ...

  3. vue的安装配置与项目创建

    1,安装vue必须先安装node.js.  --------去官网安装node.js 因为npm依赖node.js环境,使用npm的时候需要安装node.js.安装node.js的时候npm会默认安装 ...

  4. vue脚手架3.0的搭建

    一.安装node 打开cmd输入node -v查看是否安装成功 显示node版本号表示安装成功,显示‘node’不是内部或外部命令表示未安装node.node安装地址:http://nodejs.cn ...

  5. babel 配置探究及错误解析

    前面的文章说到了react 15的一些特性,众所周知react搭配es6或者叫es2015的开发模式更加的方便快捷.不过提到es2015这个毕竟没有被浏览器广泛支持的规范,要想能够快快乐乐的应用起来, ...

  6. 配置babel

    配置babel ECMAScript的版本,每年都会定期举行会议,发布各种标准,当前版本到了2019,但大部分人使用的浏览器,都可以支持es2015,也就是es6,要等到大部分浏览器都支持到最新版本, ...

  7. 基于webpack实现多html页面开发框架五 开发环境配置 babel配置

    一.解决什么问题      1.开发环境js.css不压缩,可在浏览器选中代码调试      2.开发环境运行http服务指向打包后的文件夹      3.babel输出浏览器兼容的js代码 二.需要 ...

  8. babel基础配置

    babel是干什么的 es6语法已经出来很多年,但各家游览器对es6的支持各不相同.为了解决这个问题,babel应运而生. babel支持把es6语法编译成es5,完全兼容各家游览器,避免兼容性问题出 ...

  9. Babel 配置用法解析

    Babel 配置用法解析 刚复工的时候我司业务太多了,我已不记得我们连续作战了多少天,最近算是有时间可以学习学习我的babel大宝贝了,上周末看了下babel的一些核心模块以及babel的一些配置,今 ...

随机推荐

  1. UVa 1583 - Digit Generator 解题报告 - C语言

    1.题目大意 如果a加上a的各个数字之和得到b,则说a是b的生成元.给出n其中$1\le n\le 100000$,求其最小生成元,若没有解则输出0. 2.思路 使用打表的方法打出各个数字a对应的b, ...

  2. 使用Python进行AES加密和解密

    摘录于:http://blog.csdn.net/nurke/article/details/77267081 另外参考:http://www.cnblogs.com/kaituorensheng/p ...

  3. 接口_requests_基于python

    HTTP request python官方文档:http://cn.python-requests.org/zh_CN/latest/ 1. 环境 基于环境,需要安装requests 模块,安装方法 ...

  4. Linux 应用笔记

    Linux 应用笔记 Linux 应用笔记 小书匠 Raspberry Pi 常用命令 CentOs Raspberry Ubuntu python 实用教程 Vim 权限问题 内存分配 shell ...

  5. oracle数据库之PL/SQL 流程控制语句

    介绍 PL/SQL 的流程控制语句, 包括如下三类: 1.控制语句: IF 语句 2.循环语句: LOOP 语句, EXIT 语句 3.顺序语句: GOTO 语句, NULL 语句 一 条件语句 IF ...

  6. 寒假学习计划——MOOC

    课程 西安交通大学[https://www.icourse163.org/course/XJTU-46006?tid=1002265006] 理由 本身中国大学mooc里c++课程不多,完结了能够有很 ...

  7. C#2d命令行小游戏

    [ 星 辰 · 第 二 条 约 定 ] 要求 空地:空格 | 边界/墙:'█' | 人物:'♜' 实现人物的上下左右移动 记录关系图.流程图.设计过程遇到的问题及解决 项目压缩包 [项目源码](htt ...

  8. lintcode-15-全排列

    全排列 给定一个数字列表,返回其所有可能的排列. 注意事项 你可以假设没有重复数字. 样例 给出一个列表[1,2,3],其全排列为: [ [1,2,3], [1,3,2], [2,1,3], [2,3 ...

  9. Django学习笔记---第一天

    Django学习笔记 1.Django的安装 //如果不指定版本号,默认安装最新版 pip3 install django==1.11.8 关于Django的版本和python的版本依赖关系,请看下图 ...

  10. TCP系列12—重传—2、Linux超时重传引入示例

    在前面我们概述了TCP的超时重传之后我们简单的看一下tcp超时重传的示例.首先简单的描述一下测试过程 1.设置/proc/sys/net/ipv4/tcp_early_retrans为2,关掉TLP功 ...