一。基础认知
babel是js编译器,将新版本js代码转换成大多数浏览器支持的es5,es3代码
浏览器其实也不认识require函数,bable配合webpack解决模块的问题;
主要编译的是语法,es6新增api并不编译,因为本身就没有怎么转,不像箭头函数是语法可以换个语法形式,babel本身默认转不了,所以要借助模块(模块里实现了这个promise对象,实现了api),然后引进来,老版本浏览器也就有这个功能了,
模块语法指的是import export之类的;
<script>
// 1.认识 Babel
// 官网:https://babeljs.io/
// 在线编译:https://babeljs.io/repl
// Babel 是 JavaScript 的编译器,用来将 ES6 的代码,转换成 ES6 之前的代码
// 2.使用 Babel
// ES6
let name = 'Alex';
const age = 18;
const add = (x, y) => x + y;
// Set Map
new Promise((resolve, reject) => {
resolve('成功');
}).then(value => {
console.log(value);
});
Array.from([1, 2]);
class Person {
constructor(name, age) {
Object.assign(this, { name, age });
}
}
new Person('Alex', 18);
import './index.js';
// 使用 Babel 编译后
('use strict');
require('./index.js');
function _instanceof(left, right) {
if (
right != null &&
typeof Symbol !== 'undefined' &&
right[Symbol.hasInstance]
) {
return !!right[Symbol.hasInstance](left);
} else {
return left instanceof right;
}
}
function _classCallCheck(instance, Constructor) {
if (!_instanceof(instance, Constructor)) {
throw new TypeError('Cannot call a class as a function');
}
}
var name = 'Alex';
var age = 18;
var add = function add(x, y) {
return x + y;
};
new Promise(function (resolve, reject) {
resolve('成功');
}).then(function (value) {
console.log(value);
});
Array.from([1, 2]);
var Person = function Person(name, age) {
_classCallCheck(this, Person);
Object.assign(this, {
name: name,
age: age
});
};
new Person('Alex', 18);
// 3.解释编译结果
// Babel 本身可以编译 ES6 的大部分语法,比如 let、const、箭头函数、类
// 但是对于 ES6 新增的 API,比如 Set、Map、Promise 等全局对象,以及一些定义在全局对象上的方法(比如 Object.assign/Array.from)都不能直接编译,需要借助其它的模块
// Babel 一般需要配合 Webpack 来编译模块语法
</script>
二。babel的使用方式
把这些代码输入到命令行工具即可;提前安装node;
标签:function,ES6,name,Babel,age,编译 From: https://www.cnblogs.com/zhoushangquan/p/17113783.html