babel之配置文件.babelrc入门详解

介绍

es6特性浏览器还没有全部支持,但是使用es6是大势所趋,所以babel应运而生,用来将es6代码转换成浏览器能够识别的代码
babel有提供专门的命令行工具方便转码,可以自行去了解

什么是Babel

官方解释,是下一代JavaScript 语法的编译器。

既然是下一代Javascript的标准,浏览器因版本的不同对此会有兼容性问题,JavaScript的新的方法都不能使用,但是目前我们在项目开发一直提倡使用最新的语法糖编写,不但能减少代码量,而且async,await等新特性还解决了回调的编写机制,减轻了代码维护成本。

Babel就因此而生,它可以让你放心使用大部分的JavaScript的新的标准的方法,然后编译成兼容绝大多数的主流浏览器的代码。在项目工程脚手架中,一般会使用.babelrc文件,通过配置一些参数配合webpack进行打包压缩。也通过网上了解,写法各有不同,参数也大不相同,因此,我重新整理一份资料,详细的介绍下各个配置项的意义所在,以便清晰了解如果使用。

以下配置主要正对webpack3+写法。

Babel转译器

在.babelrc配置文件中,主要是对预设(presets)和插件(plugins)进行配置,因此不同的转译器作用不同的配置项,大致可分为以下三项:

1.语法转义器。主要对javascript最新的语法糖进行编译,并不负责转译javascript新增的api和全局对象。例如let/const就可以被编译,而includes/Object.assign等并不能被编译。常用到的转译器包有,babel-preset-env、babel-preset-es2015、babel-preset-es2016、babel-preset-es2017、babel-preset-latest等。在实际开发中可以只选用babel-preset-env来代替余下的,但是还需要配上javascirpt的制作规范一起使用,同时也是官方推荐

{
 "presets": ["env", {
   "modules": false
  }],
  "stage-2"
}

2.补丁转义器。主要负责转译javascript新增的api和全局对象,例如babel-plugin-transform-runtime这个插件能够编译Object.assign,同时也可以引入babel-polyfill进一步对includes这类用法保证在浏览器的兼容性。Object.assign 会被编译成以下代码:

代码如下:

__WEBPACK_IMPORTED_MODULE_1_babel_runtime_core_js_object_assign___default()

3.jsx和flow插件,这类转译器用来转译JSX语法和移除类型声明的,使用Rect的时候你将用到它,转译器名称为babel-preset-react

创建预设(presets)

主要通过npm安装babel-preset-xx插件来配合使用,例如通过 npm install babel-preset-stage-2 babel-preset-env --save-dev 安装,会有相应如下配置。

{
 "presets": [
  ["env", options],
  "stage-2"
 ]
}

stage-2配置

babel主要提供以下几种转义器包,括号里面是对应配置文件的配置项

babel-preset-stage-0(stage-0)
babel-preset-stage-1(stage-1)
babel-preset-stage-2(stage-2)
babel-preset-stage-3(stage-3)

不同阶段的转译器之间是包含的关系,preset-stage-0转译器除了包含了preset-stage-1的所有功能还增加了transform-do-expressions插件和transform-function-bind插件,同样preset-stage-1转译器除了包含preset-stage-2的全部功能外还增加了一些额外的功能。

options配置介绍

官方推荐使用babel-preset-env来替代一些插件包的安装(es2015-arrow-functions,es2015-block-scoped-functions等等),并且有如下几种配置信息,介绍几个常用的,

更多配置可以参考官网https://babeljs.io/docs/plugins/preset-env/

{
  "targets": {
    "chrome": 52,
    "browsers": ["last 2 versions", "safari 7"],
    "node":"6.10"
  }
  "modules": false
}

targets可以制定兼容浏览器版本,如果设置了browsers,那么就会覆盖targets原本对浏览器的限制配置。

targets.node正对node版本进行编译

modules通常都会设置为false,因为默认都是支持CommonJS规范,同时还有其他配置参数:"amd" | "umd" | "systemjs" | "commonjs",systemjs我还不知道规范写法是什么,amd和umd以及commonjs相对比较熟悉,下面简要列举下书写规范。

amd代码规范,在ng1中会用到比较多,主要用于依赖注入:

define(['jquery'], function ($) {
  //  方法
  function myFunc(){};

  //  暴露公共方法
  return myFunc;
})

commonjs规范,也是node环境中尊崇的一种规范:

var $ = require('jquery');
//  方法
function myFunc(){};

//  暴露公共方法(一个)
module.exports = myFunc;
{% endcodeblock %}
>umd规范,兼容amd以及commonjs规范,目前在第三方插件编写使用比较多:
{% codeblock lang:javascript %}
(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD
    define(['jquery'], factory);
  } else if (typeof exports === 'object') {
    // Node, CommonJS之类的
    module.exports = factory(require('jquery'));
  } else {
    // 浏览器全局变量(root 即 window)
    root.returnExports = factory(root.jQuery);
  }
}(this, function ($) {
  //  方法
  function myFunc(){};

  //  暴露公共方法
  return myFunc;
}));

插件(plugins)

插件配置项同预设配置项一样,需要搭配babel相应的插件进行配置,可以选择配置插件来满足单个需求,例如早期我们会有如下配置:

{
 "plugins": [
  "check-es2015-constants",
  "es2015-arrow-functions",
  "es2015-block-scoped-functions",
  // ...
 ]
}

但是这些插件从维护到书写极为麻烦,后来官方统一推荐使用env,全部替代了这些单一的插件功能,可以简化配置如下,也就是我前面提到了babel-preset-env:

{
 "presets": [
  "es2015"
 ]
}

这里主要介绍两款常用插件,分别是babel-plugin-transform-runtime,babel-plugin-syntax-dynamic-import。

基本配置代码如下:

{
 "plugins": [
  "syntax-dynamic-import",["transform-runtime"]
 ]
}

transform-runtime

为了解决这种全局对象或者全局对象方法编译不足的情况,才出现了transform-runtime这个插件,但是它只会对es6的语法进行转换,而不会对新api进行转换。如果需要转换新api,也可以通过使用babel-polyfill来规避兼容性问题。

对Object.assign进行编译,配置与未配置经过webpack编译后的代码片段如下:

// 未设置代码片段:
__webpack_require__("ez/6");
var aaa = 1;

function fna() {
 var dd = 33333;
 var cc = Object.assign({ key: 2 });
 var xx = String.prototype.repeat.call('b', 3);
 if ("foobar".String.prototype.includes("foo")) {
  var vv = 1;
 }

 return dd;
}
// 设置代码片段:
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_babel_runtime_core_js_object_assign___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_babel_runtime_core_js_object_assign__);

__webpack_require__("ez/6");
var aaa = 1;

function fna() {
 var dd = 33333;
 var cc = __WEBPACK_IMPORTED_MODULE_1_babel_runtime_core_js_object_assign___default()({ key: 2 });
 var xx = String.prototype.repeat.call('b', 3);
 if ("foobar".String.prototype.includes("foo")) {
  var vv = 1;
 }

 return dd;
}

对class定义类会进行编译,配置与未配置经过webpack编译后的代码片段如下:

// 未设置代码片段:
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Canvas = function Canvas(height, width) {
 _classCallCheck(this, Canvas);

 this.height = height;
 this.width = width;
};

var Canvas2 = function Canvas2(height, width) {
 _classCallCheck(this, Canvas2);

 this.height = height;
 this.width = width;
};
// 设置代码片段:
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_classCallCheck___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_classCallCheck__);

var Canvas = function Canvas(height, width) {
 __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_classCallCheck___default()(this, Canvas);

 this.height = height;
 this.width = width;
};

var Canvas2 = function Canvas2(height, width) {
 __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_classCallCheck___default()(this, Canvas2);

 this.height = height;
 this.width = width;
};

对Generator函数也有同上的编译效果,目前项目中使用该函数较小,一般使用promise替代,以及async await所以未对该函数做测试。

官方说对promise也会产生编译,但是实际测试结果却没有效果

经过webpack打包最终测试,引入transform-runtime该配置项后,打包入口js文件大小会略微增大,并不像官方说的能够缩小文件体积

未配置的最终打包效果:

配置后的最终打包效果:

虽然文件大小会有所增大,但是解决一些兼容性的问题,同时,从以上给出的测试代码例子来看,使用transform-runtime后,可以减少内部全局函数的定义,从结构上看尊崇了webpack的模块化思想,所以还是建议使用该插件。

syntax-dynamic-import

这个插件主要解决动态引入模块的问题

function nDate() {
 import('moment').then(function(moment) {
  console.log(moment().format());
 }).catch(function(err) {
  console.log('Failed to load moment', err);
 });
}
nDate();

如果.babelrc配置项中使用了"stage-2",也可以不实用该插件,同样支持动态模块引入。

不然就会报以下错误:

  1. Module build failed: SyntaxError: 'import' and 'export' may only appear at the top level, or (import 和 export只能在最外层,也就是不能用在函数或者块中)
  2. Module build failed: SyntaxError: Unexpected token, expected {

其他配置项

ignore

主要作用就是可以指定不编译那些代码

{
 "ignore":["./module/a.js"]
}

let,Object.assign,class定义都未编译,编译效果如下:

__webpack_require__("ez/6");
const aaa = 1;

function fna () {
 let dd = 33333
 let cc = Object.assign({key:2})
 let xx = String.prototype.repeat.call('b', 3)
 if ("foobar".String.prototype.includes("foo")) {
  let vv = 1
 }

 return dd
}

function fna2 () {
 return fna() + aaa + __WEBPACK_IMPORTED_MODULE_0__b__["a" /* default */]
}

class Canvas {
 constructor(height, width) {
  this.height = height;
  this.width = width;
 }
}

class Canvas2 {
 constructor(height, width) {
  this.height = height;
  this.width = width;
 }
}

minified

主要设置编译后是否是压缩,boolean类型,如果使用babel-cli进行打包编译文件这个配置项能够起到作用,但是目前大部分还是会依赖第三方打包工具,例如webpack,所以这个配置参数一般不用设置,webpack插件中的UglifyJsPlugin做了压缩的工作。

comments

在生成的文件中,不产生注释,boolean类型,webpack插件中的UglifyJsPlugin也同样集成了这个功能。

env

基本配置如下:

{
 "env": {
  // test 是提前设置的环境变量,如果没有设置BABEL_ENV则使用NODE_ENV,如果都没有设置默认就是development
  "test": {
   "presets": ["env", "stage-2"],
   // instanbul是一个用来测试转码后代码的工具
   "plugins": ["istanbul"]
  }
 }
}

再谈兼容性问题

Babel默认只转换新的JavaScript语法,而不转换新的API,比如Iterator、Generator、Set、Maps、Promise等等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码,具体的可以参考babel-plugin-transform-runtime模块的 definitions.js文件。

这里主要涉及到babel编译后依然会存在浏览器兼容性问题,一般会使用transform-runtime和babel-polyfill配合使用,对于后者只需要在项目入口文件require引入即可。

当然在使用类似Object.assign函数功能时,可以使用lodash库来替代,promise可以使用Q.js替代等等方案,这样依赖可以不需要引入以上插件,具体可以根据项目具体安排

总结

.babelrc配置文件主要还是以presets和plugins组成,通过和webpack配合进行使用,分享下我们在项目中常用的配置。以上都是通过学习总结出来的,有什么不对的地方希望指出。

vue项目开发使用的配置如下:

{
 "presets": [
  ["env", {
   "modules": false
  }],
  "stage-2"
 ],
 // 下面指的是在生成的文件中,不产生注释
 "comments": false,
 "plugins": ["transform-runtime","syntax-dynamic-import"],
 "env": {
  // test 是提前设置的环境变量,如果没有设置BABEL_ENV则使用NODE_ENV,如果都没有设置默认就是development
  "test": {
   "presets": ["env", "stage-2"],
   // instanbul是一个用来测试转码后代码的工具
   "plugins": ["istanbul"]
  }
 }
}

react项目开发使用的配置如下:

{
 "presets": [
  ["env", { "modules": false }],
  "stage-2",
  "react"
 ],
 "plugins": ["transform-runtime"],
 "comments": false,
 "env": {
  "test": {
   "presets": ["env", "stage-2"],
   "plugins": [ "istanbul" ]
  }
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • WebStorm ES6 语法支持设置&babel使用及自动编译(详解)

    一.语法支持设置 Preferences > Languages & Frameworks > JavaScript 二.Babel安装 1.全局安装 npm install -g babel-cli 2.当前项目,适用于使用不同babel版本的情况 npm install --save-dev babel-cli 三.Babel基本用法 # 转码结果输出到标准输出 babel example.js # 转码结果写入一个文件 # --out-file 或 -o 参数指定输出文件 bab

  • 详解webpack 配合babel 将es6转成es5 超简单实例

    今天接触了webpack,第一次使用webpack进行转码,竟然稀里糊涂就成功了,哈哈. 下面附上流程 创建个文件夹,初始化一下,首先全局安装webpack npm install webpack --save-dev 然后安装babel npm install --save-dev babel-core babel-preset-es2015 npm install --save-dev babel-loader 在当前文件夹内执行安装,然后创建两个文件夹一个src作为源文件夹,一个bin,保

  • JavaScript中ES6 Babel正确安装过程

    本文介绍Babel6.x的安装过程~首先呢,可以使用Babel在线转换 https://babeljs.io/repl/ 然后进入主题:安装Babel(命令行环境,针对Babel6.x版本) 1.首先安装babel-cli(用于在终端使用babel) npm install -g babel-cli 2.然后安装babel-preset-es2015插件 npm install --save babel-preset-es2015 注:Babel5版本默认包含各种转换插件,然而Babel6.x相

  • 详解Webpack+Babel+React开发环境的搭建的方法步骤

    1.认识Webpack 构建应用前我们先来了解一下Webpack, Webpack是一个模块打包工具,能够把各种文件(例如:ReactJS.Babel.Coffeescript.Less/Sass等)作为模块进行编译后进行打包. 2.安装Webpack 要开始使用Webpack在项目中进行开发前我们首先需要在全局环境中进行安装. npm install webpack -g 3.创建一个项目 安装好后创建一个名叫learn-webpack的项目并进入该项目文件夹,当然项目名字你可以起你自己想要的

  • babel基本使用详解

    什么是babel? babel是一个强大的多用途js编译器 点击进入官网 安装babel npm install -g babel-cli npm install --save-dev babel-cli babel配置文件 通过.babelrc来表示 { "presets" : [ ], "plugins" : [ ] } presets用来存放一些预设 plugins用来存放一些插件 命令行的简单使用 我们可以通过 -o (--out-file) 参数来编译一个

  • 详解webpack babel的配置

    Babel是什么 Babel是一个编译JavaScript的平台,它的强大之处表现在可以通过编译帮你达到: 使用下一代的javascript(ES6,ES7,--)代码,即使当前浏览器没有完成支持: 使用基于JavvScript进行扩展语言,比如React的JSX: npm i babel-core babel-preset-env babel-loader babel-plugin-transform-runtime babel-preset-stage-2 -D 关于babel的使用 首先

  • 利用babel将es6语法转es5的简单示例

    前言 Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行. 这意味着,你可以现在就用ES6编写程序,而不用担心现有环境是否支持. 本文讲解需预装node和npm.大家可以参考这篇文章:http://www.jb51.net/article/90518.htm,这里介绍的非常详细. 文件目录结构 生成包管理配置文件package.json npm init -y 安装转换工具 npm i -g babel-cli npm i --save-dev babel-pr

  • ES6通过babel转码使用webpack使用import关键字

    使用了babel转码,使用import和export的时候,在浏览器运行代码的时候,提示 Uncaught ReferenceError: require is not defined babel只是个翻译,假设a.js 里 import 了 b.js 对a.js进行转码,只是翻译了a.js,并不会把b.js的内容给读取合并进来 如果想在最终的某一个js里,包含 a.js,b.js 的代码,那就需要用到打包工具 也就是webpack等工具了 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

  • babel之配置文件.babelrc入门详解

    介绍 es6特性浏览器还没有全部支持,但是使用es6是大势所趋,所以babel应运而生,用来将es6代码转换成浏览器能够识别的代码 babel有提供专门的命令行工具方便转码,可以自行去了解 什么是Babel 官方解释,是下一代JavaScript 语法的编译器. 既然是下一代Javascript的标准,浏览器因版本的不同对此会有兼容性问题,JavaScript的新的方法都不能使用,但是目前我们在项目开发一直提倡使用最新的语法糖编写,不但能减少代码量,而且async,await等新特性还解决了回调

  • vue-cli中的babel配置文件.babelrc实例详解

    本文介绍vue-cli脚手架工具根目录的babelrc配置文件 介绍 es6特性浏览器还没有全部支持,但是使用es6是大势所趋,所以babel应运而生,用来将es6代码转换成浏览器能够识别的代码 babel有提供专门的命令行工具方便转码,可以自行去了解 vue-cli脚手架的.babelrc文件 { // 此项指明,转码的规则 "presets": [ // env项是借助插件babel-preset-env,下面这个配置说的是babel对es6,es7,es8进行转码,并且设置amd

  • 基于tomcat配置文件server.xml详解

    1. 入门示例:虚拟主机提供web服务 该示例通过设置虚拟主机来提供web服务,因为是入门示例,所以设置极其简单,只需修改$CATALINA_HOME/conf/server.xml文件为如下内容即可.其中大部分都采用了默认设置,只是在engine容器中添加了两个Host容器. <?xml version="1.0" encoding="UTF-8"?> <Server port="8005" shutdown="SH

  • SpringBoot快速入门详解

    Spring Boot是什么? Spring Boot并不是什么新的框架,它是对Spring的缺点进行了改善和优化,Spring Boot默认了很多的框架使用方式,像maven整合了所以jar包同一个道理.及SpringBoot并不是对Spring功能上的增强,而是提供了一种快速使用Spring的方式而已. 为什么使用Spring Boot? Spring Boot官方是这么说的:Spring Boot它是基于Spring开发项目的起点,Spring Boot的设计主要是让你快速地跑起来Spri

  • Java SpringBoot模板引擎之 Thymeleaf入门详解

    目录 模板引擎简介 引入Thymeleaf模板引擎 分析Thymeleaf模板引擎 测试Thymeleaf模板引擎 1.编写一个TestController 2.编写一个测试页面 test.html 放在 templates 目录下 3.启动项目请求测试 4.结论 Thymeleaf入门: 1.修改测试请求,增加数据传输 2.使用thymeleaf 3.我们去编写下前端页面 4.启动测试! thymeleaf语法学习 1.使用任意的 th:attr 来替换Html中原生属性的值! 2.表达式语法

  • SpringCloud Eureka服务注册中心应用入门详解

    目录 1.多节点无缝切换问题 2.服务注册与发现 Eureka 3.Springboot集成Eureka 3.1 父包pom依赖 3.2 eureka服务端 3.3 客户端 pom依赖 yml配置 3.4 控制台 1.多节点无缝切换问题 分布式节点中的服务宕机或者重启不影响客户端使用 分布式节点中的服务宕机重启不影响业务服务内部通信 如果在某个分布式系统中想要解决上述问题,那么这篇文章就是精华之处. 回顾一下以前的常用手段: 单节点运行,其他节点备用,无法无缝连接,内网通信无法保证 多节点运行,

  • babel插件去除console示例详解

    目录 起因 介绍 窥探 初见AST Program ExpressionStatement CallExpression MemberExpression Identifier StringLiteral 公共属性 如何写一个babel插件? 构造visitor方法 去除所有console 增加env api 增加exclude api 增加commentWords api 细节完善 对于后缀注释 对于前缀注释 发布到线上 安装 使用 起因 已经颓废了很久 因为实在不知道写啥了 突然我某个同事对

  • ssm框架下web项目,web.xml配置文件的作用(详解)

    1. web.xml中配置了CharacterEncodingFilter,配置这个是拦截所有的资源并设置好编号格式. encoding设置成utf-8就相当于request.setCharacterEncoding("UTF-8"); foreEncoding设置成true就相当于response.setCharacterEncoding("UTF-8"); <filter> <filter-name>CharacterEncodingFi

  • Android读取properties配置文件的实例详解

    Android读取properties配置文件的实例详解 因为一些配置信息,多处用到的.且以后可能变更的,我想写个.prorperties配置文件给管理起来. 我把配置文件放在了assets文件夹下 appConfig.properties: serverUrl=http://192.168.1.155 import java.io.InputStream; import java.util.Properties; import android.content.Context; /** * 读取

随机推荐