一分钟入门 Babel(下一代 JavaScript 语法的编译器)

2022-06-15 21:00:06 浏览数 (3)

简单来说把 JavaScript 中 es2015/2016/2017/2046 的新语法转化为 es5,让低端运行环境(如浏览器和 node )能够认识并执行。严格来说,babel 也可以转化为更低的规范。但以目前情况来说,es5 规范已经足以覆盖绝大部分浏览器,因此常规来说转到 es5 是一个安全且流行的做法。 ES6转ES5(第一种) 初始化项目

npm init --y

安装依赖

npm install babel-cli -D

npm install babel-preset-es2015 -D

在项目中创建并编辑ES6文件

这里只是使用es6的语法举下例子,看下能否转译成es5语法。我们假设取名index.js,放在项目根目录的src文件夹里。

// src/index.js let a = 1;

let fun = ()=>{ console.log(a); }

编辑package.json

我们需要自己在scripts字段里添加命令:

代码语言:text复制
build-t :单独编译某个文件
build-d:把一个文件夹内的所有文件统一编译到另一个文件夹里(文件夹自动生成,不需要自己创建)
build-o:把一个文件夹内的指定文件编译到另外的文件夹里(文件夹需要自己创建,可以指定文件名)

{ “name”: “babel01”, “version”: “1.0.0”, “description”: “”, “main”: “index.js”, “scripts”: { “build-t”:“babel index.js --presets es2015”, “build-d”: “babel src -d lib --presets es2015”, “build-o”:“babel src/index.js -o dist/index.js --presets es2015” }, “keywords”: [], “author”: “”, “license”: “ISC”, “devDependencies”: { “babel-cli”: “^6.26.0”, “babel-preset-es2015”: “^6.24.1” } }

启动编译

npm run <这里是scripts字段的命令>

下面是编译后的es5文件。

“use strict”;

var a = 1;

var fun = function fun() { console.log(a); };

ES6转ES5(第二种)

其实跟第一种差不多。 初始化项目

更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/119836456

0 人点赞