babelrc

.babelrc文件 

// 简单版
{
  "presets": ["es2015", "stage-2"],   // 使用 es2015  npm install  babel-preset-es2015
  "plugins": ["transform-runtime"],   // 处理全局函数和优化babel编译
  "comments": false                   // 不产生注释
}
"stage-2" 代码不同阶段出现的es语法,包含不同的转码插件   stage-0 包含 stage-1,stage-1包含stage-2

// 最新

{
  "presets":[
    ["env",{          // 使用 env 包含es2015+
        "targets":{
            "browsers":["last 2 version","safari >=7","ie 6-8"]   // 指定浏览器环境
        }
    }],
    ["stage-0"]
    ]
  "plugins": ["transform-runtime"],
  "comments": false
}

相应的 npm package

   "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.4.0",  //  "env"    "es2015"就是  babel-preset-es2015
    "babel-preset-stage-2": "^6.24.1",
时间: 2024-11-13 10:19:58

babelrc的相关文章

.babelrc参数小解

.babelrc是用来设置转码规则和插件的,这种文件在window上无法直接创建,也无法在HBuilder中创建,甚至无法查看,但可以在sublime text中创建.查看并编辑. 当我们使用es6语法时必须按照babel-preset-es2015插件: npm i babel-preset-es2015 或 yarn add babel-preset-es2015 而.babelrc文件可以对babel命令进行配置 presets: 预设编辑对象的js版本,例如: es2015.es2016

babel的.babelrc解析

.babel是对于babel的全局配置,可以通过两种方式来设置 .babelrc  在根目录中创建一个文件名为 .babelrc的文件,然后在其内部添加配置即可(需要使用json格式) { "presets": ["es2015","stage-2"] } 在项目的package.json文件中指定配置: { "name": "my-package", "version": "

【转】如何写好.babelrc?Babel的presets和plugins配置解析

什么是Babel The compiler for writing next generation JavaScript. 官网是这么说的,翻译一下就是下一代JavaScript 语法的编译器. 作为前端开发,由于浏览器的版本和兼容性问题,很多JavaScript的新的方法都不能使用,等到可以大胆使用的时候,可能已经过去了好几年.Babel就因此而生,它可以让你放心使用大部分的JavaScript的新的标准的方法,然后编译成兼容绝大多数的主流浏览器的代码. 在升级到了Babel6.x版本之后,所

[转] 如何写好.babelrc?Babel的presets和plugins配置解析

官网是这么说的,翻译一下就是下一代JavaScript 语法的编译器. 作为前端开发,由于浏览器的版本和兼容性问题,很多JavaScript的新的方法都不能使用,等到可以大胆使用的时候,可能已经过去了好几年.Babel就因此而生,它可以让你放心使用大部分的JavaScript的新的标准的方法,然后编译成兼容绝大多数的主流浏览器的代码. 在升级到了Babel6.x版本之后,所有的插件都是可插拔的.这也意味着你安装了Babel之后,是不能工作的,需要配置对应的.babelrc文件才能发挥完整的作用.

14 vue学习 postcssrc eslintrc.js babelrc

一  .postcssrc.js 众所周知为兼容所有浏览器,有的CSS属性需要对不同的浏览器加上前缀,然而有时添加一条属性,需要添加3~4条类似的属性只是为了满足浏览器的兼容,这不仅会增加许多的工作量,还会使得你的思路被打断.  如何解决这个问题? 处理CSS前缀问题的神器--AutoPrefixer. Autoprefixer是一个后处理程序,你可以同Sass,Stylus或LESS等预处理器共通使用.它适用于普通的CSS,而你无需关心要为哪些浏览器加前缀,只需全新关注于实现,并使用W3C最新

深入浅出的webpack构建工具---babel之配置文件.babelrc(三)

阅读目录 一:理解 babel之配置文件.babelrc 基本配置项 二:在webpack中配置babel 回到顶部 一:理解 babel之配置文件.babelrc 基本配置项 1. 什么是babel? 它是干什么用的? ES6是2015年发布的下一代javascript语言标准,它引入了新的语法和API,使我们编写js代码更加得心应手,比如class,let,for...of promise等等这样的,但是可惜的是这些js新特性只被最新版本的浏览器支持,但是低版本浏览器并不支持,那么低版本浏览

vue - .babelrc

描述:bable-es2015以及babel本身组件在新版本要求的外部配置文件. 1 { 2 "presets": [ 3 ["env", { 4 "modules": false, 5 "targets": { 6 "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 } 8

Vue.js项目模板搭建

前言 从今年(2017年)年初起,我们团队开始引入「Vue.js」开发移动端的产品.作为团队的领头人,我的首要任务就是设计 整体的架构 .一个良好的架构必定是具备丰富的开发经验后才能搭建出来的.虽然我有多年的前端开发经验,但就「Vue.js」来说,仍然是个新手.所幸「Vue.js」有一个配套工具「Vue-CLI」,它提供了一些比较成熟的项目模板,很大程度上降低了上手的难度.然而,很多具体的问题还是要自己思考和解决的. 项目划分 我们公司的H5产品大部分是嵌套在手机客户端里面的页面.每个项目的功能

关于Vue的各个UI框架(elementUI、mint-ui、VUX)

elementUI 官网:http://element.eleme.io/ 使用步骤: 1.安装完vue-cli后,再安装 element-ui 命令行:npm i element-ui -D 相当于  npm install element-ui --save-dev //   i -> install       D  -> --save-dev       S -> --save   都是缩写 2.在main.js入口文件中引入它的js和css import ElementUI f