当前位置: 首页 > Web前端 > HTML5

Babel入门教程

时间:2023-04-05 14:02:45 HTML5

功能:将ES6+版本代码转换为ES5代码,使其可以在当前环境和旧浏览器环境下运行。这意味着你可以用ES6编写代码而不用担心当前环境是否支持它。1、配置.babelrc使用Babel首先要配置.babelrc文件,该文件存放在项目的根目录下,用于设置转码规则和插件。基本格式如下:{"presets":[...],"plugins":[...]}其中presets字段设置转码规则,可以根据需要安装。#ES2015转码规则$npminstall--save-devbabel-preset-es2015#react转码规则$npminstall--save-devbabel-preset-react#ES7不同阶段的语法提案转码规则(共4个阶段),选择一个$npminstall—save-devbabel-preset-stage-0$npminstall—save-devbabel-preset-stage-1$npminstall—save-devbabel-preset-stage-2$npminstall—save-devbabel-preset-stage-3然后将这些规则添加到.babelrc:{"presets":["es2015","react","stage-2"],"plugins":[...]}II,Command行转码babel-cliBabel提供了命令行转码的babel-cli工具。安装命令如下:$npminstall--globalbabel-cli基本用法如下:#转码结果输出到标准输出$babelexample.js#转码结果写入文件#--out-file或-o参数指定输出文件$babelexample.js--out-filecompiled.js#或$babelexample.js-ocompiled.js#整个目录转码#--out-dir或-d参数指定输出目录$babelsrc--out-dirlib#或$babelsrc-dlib#-s参数生成sourcemap文件$babelsrc-dlib-s以上代码安装在全局环境下,有有两个问题:项目要运行,全局环境必须有babel,也就是说项目对环境有依赖。全局安装Babel不支持不同项目使用不同版本的Babel。针对以上问题,解决方法是在项目中安装babel-cli。#install$npminstall-save-devbabel-cli然后,重写package.json。{//..."devDependencies":{"babel-cli":"^6.0.0"},"scripts":{"build":"babelsrc-dlib"},}转码时,执行$npm运行构建命令就可以了。3、babel-nodebabel-cli工具自带babel-node命令,提供支持ES6的REPl环境。它支持Node的REPL环境的所有特性,可以直接运行ES6代码。$babel-node>(x=>x*2)(1)babel-node命令可以直接运行ES6脚本。将以上代码放入脚本文件es6.js中,直接运行即可。$babel-nodees6.js2babel-node也可以安装在项目中。$npminstall--save-devbabel-cli然后重写package.json。{"scripts":{"script-name":"babel-nodescript.js"}}在上面的代码中,使用了babel-node而不是node,这样script.js本身不需要做任何转码。4.babel-registerbabel-register模块重写了require命令,并添加了一个钩子。之后,每当使用require加载带有.js、.jsx、.es和.es6扩展名的文件时,它们将首先使用Babel进行转码。使用$npminstall-save-devbabel-register时,必须先加载babel-register。require("babel-register");require("./index.js");那就不用手动转码index.js了。需要注意的是,babel-register只会对require命令加载的文件进行转码,不会对当前文件进行转码。另外,它是实时转码,所以只适合在开发环境中使用。5.babel-core如果某些代码需要调用Babel的API进行转码,则需要使用babel-core模块。安装命令如下:$npminstallbabel-core--saves然后就可以在项目中调用babel-core了。varbabel=require("babel-core");//字符串转码babel.transform('code();',options);//=>{code,map,ast}//文件转码(异步)babel.transformFile('filename.js',options,function(err,result){result;//=>{code,map,ast}});//文件转码(同步)babel.transformFileSync('filename.js',options);//=>{code,map,ast}//BabelAST转码babel.transformFromAst(ast,code,options);//=>{code,map,ast}配置对象选项,可以参考官方文档http://babeljs.io/docs/usage/options/。下面是一个例子。vares6Code='让x=n=>n+1';vares5Code=require('babel-core').transform(es6Code,{presets:['es2015']}).code//'"usestrict";\n\nvarx=functionx(n){\nreturnn+1;\n};'上面代码中,transform方法的第一个参数是一个字符串,标识需要转换的ES6代码,第二个参数是转换的配置对象。6.babel-polyfillBabel默认转换新的JavaScript语法(syntax),但不转换新的API,如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义全局对象上的方法(例如Object.assign)不会被转码。例如,ES6在Array对象上添加了Array.from方法。Babel不会转码这个方法。要使此方法起作用,您必须使用babel-polyfill,它为当前环境提供垫片。安装命令如下:$npminstall--savebabel-polyfill然后在脚本头部添加如下代码:import'babel-polyfill';//orrequire('babel-polyfill')七、浏览器环境Babel也可以用于浏览器环境。不过从Babel6.0开始,不再直接提供浏览器版本,而是使用构建工具构建。如果你没有或者不想使用构建工具,你可以通过安装5.x版本的babel-core模块来获得它们。$npminstallbabel-core@old运行上述命令后,在当前目录的node_modules/babel-core子目录下可以找到Babel的浏览器版本browser.js和browser.min.js。然后,在网页中插入以下代码:in以上代码,browser.js是Babel提供的可以在浏览器中运行的转换器脚本。用户的ES6脚本放在script标签中,但必须指定type="text/babel"。另一种方法是使用babel-standalone模块提供的浏览器版本,插入到网页中。注意:ES6代码实时转ES5网页,对性能会有影响。生产环境需要加载转码后的脚本。下面以BabelwithBrowserify为例,介绍如何将代码打包成浏览器可以使用的脚本。首先,安装babelify模块:$npminstall--save-devbabelifybabel-preset-es2015然后,使用命令行转换ES6脚本:$browserifyscript.js-obundle.js\-t[babelify--presets[es2015react]]以上代码将ES6脚本script.js转换为bundle.js,浏览器可以直接加载后者。在package.json中设置如下代码,就不用每次都在命令行输入参数了。{"browserify":{"transform":[["babelify",{"presets":["es2015"]}]]}}8.配合其他工具这里举两个例子:ESLint和Mocha。ESLint用于静态检查代码的语法和风格。安装命令如下:$npminstall--save-deveslintbabel-eslint然后在项目根目录新建配置文件.eslint,在里面添加parser字段。{"parser":"babel-eslint","rules":{…}}然后在package.json中添加相应的脚本。{"name":"my-module","scripts":{"lint":"eslintmy-files.js"},"devDependencies":{"babel-eslint":"...","eslint":"..."}}Mocha是一个测试框架。如果需要使用ES6语法执行测试脚本,可以修改package.json中的scripts.test。"scripts":{"test":"mocha—uiqunit—compilersjs:babel-core/register"}上述命令中--compilers参数指定脚本的转码器,后缀为js的所有文件都是需要先使用babel-core/register转码。