Babel使用
1、Babel
Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。
2.3.1、配置环境
安装babel命令行工具:
npm install --global babel-cli
安装成功后可以使用babel -V查看版本,可以使用babel -help 查看帮助
创建项目,在当前项目中依赖babel-core
假定当前项目的目录为:E:\Desktop-temp\xww\FastResponse\Mobile\Hybird\vue2_01\vue07_03_babel
使用npm init可以初始化当前项目为node项目
npm install babel-core --save
依赖插件babel-preset-es2015
如果想使用es6语法,必须安装一个插件
npm install babel-preset-es2015
然后在文件夹下面创建一个叫.babelrc的文件,并写入如下代码:
{ "presets": ["es2015"] }
windows不支持直接命令为.babelrc,可以在DOS下使用@echo结合>实现:
.babelrc文件以rc结尾的文件通常代表运行时自动加载的文件,配置等等的,类似bashrc,zshrc。同样babelrc在这里也是有同样的作用的,而且在babel6中,这个文件必不可少。
在babel6中,预设了6种,分别是:es2015、stage-0、stage-1、stage-2、stage-3、react
2.3.2、转换ES6为ES5
当环境准备好了,就可以编写一个es6风格的文件如:es6.js,内容如下:
let add=(x,y)=>x+y; const n1=100,n2=200; var result=add(n1,n2); console.log(result);
在当前目录执行命令:
babel es6.js -o es5.js
转换后的结果es5.js:
"use strict"; var add = function add(x, y) { return x + y; }; var n1 = 100, n2 = 200; var result = add(n1, n2); console.log(result);
从转换后的结果可以看出es6已变成es5了,箭头函数不见了。
2.3.3、使用babel-node运行ES6模块化代码
babel-cli工具自带一个babel-node命令,提供一个支持ES6的REPL环境。它支持Node的REPL(交互式解释器环境)环境的所有功能,而且可以直接运行ES6代码。
在当前目录下创建lib.js文件:
/** *定义模块 */ //导出 export let msg="求和:"; export function sum(n){ let total=0; for(var i=1;i<=n;i++){ total+=i; } return total; }
创建main.js文件调用定义好的模块:
/** * 使用模块 */ //导入 import { sum, msg } from './lib.js'; let result = sum(100); console.log(msg + "" + result);
在命令行执行:babel-node main.js 结果如下:
到这里共讲解了3种可以运行ES6模块化的环境,任选一种可以用于学习。