关于babel:ES6转换成ES5

37次阅读

共计 1930 个字符,预计需要花费 5 分钟才能阅读完成。

一、介绍

 ECMAScript 6(ES6)的倒退速度十分之快,但古代浏览器对 ES6 新个性反对度不高,所以要想在浏览器中间接应用 ES6 的新个性就得借助别的工具来实现。

Babel 是一个宽泛应用的转码器,babel 能够将 ES6 代码完满地转换为 ES5 代码,所以咱们不必等到浏览器的反对就能够在我的项目中应用 ES6 的个性。
babel 只是转译新规范引入的语法,比方 ES6 的箭头函数转译成 ES5 的函数;而新规范引入的新的原生对象,局部原生对象新增的原型办法,新增的 API 等(如 Proxy、Set 等),这些 babel 是不会转译的。须要用户自行引入 polyfill 来解决
请移步 深刻了解 Babel 原理及其应用

二、应用

1、新建工程文件夹这里起名叫做 es6, 而后在外面创立两个文件夹别离为 src、js 如下图:(src 为待转换 es6 js 寄存目录,js 为编译实现后的 es5 js 寄存目录)

2、在 src 目录下新建一个 js 文件(这里起名叫做 index.js),外面输出 es6 的代码:

let b = 1;
console.log(b);
const name = '张三';
console.log(name);
let c = '胜利了么';
setTimeout(() => {console.log(c)
}, 200)

3、初始化我的项目

1)关上终端命令提示符 进入工程目录(这里也就是 es6 文件夹)输出如下命令初始化我的项目:(这里用的 npm, 国内用户倡议用 cnpm 不懂得能够移步至淘宝镜像应用)命令执行实现后会在根目录生成 package.json 文件。

npm init -y //- y 是指示意全副默认,不须要一个一个敲回车

2)关上咱们能够看到外面的内容(能够依据本人的须要进行批改,比方咱们批改 name 的值。)

{
  "name": "es6",
  "version": "1.0.0",
  "description": "","main":"index.js","scripts": {"test":"echo "Error: no test specified" && exit 1"},"author":"",
  "license": "ISC"
}

三、全局装置 babel 工具

1)在终端中输出以下命令,

npm install -g babel-cli

2)尽管曾经装置了 babel-cli,只是这样还不能胜利进行转换,咱们还须要装置转换包能力胜利转换。

npm install --save-dev babel-preset-es2015 babel-cli

3)装置实现后,咱们能够看一下咱们的 package.json 文件,曾经多了 devDependencies 选项。

{
  "name": "es6",
  "version": "1.0.0",
  "description": "","main":"index.js","scripts": {"test":"echo "Error: no test specified" && exit 1","dev":"babel src --out-dir js"},"author":"",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1"
  }
} 

四、新建.babelrc

在我的项目根目录新建 (.babelrc) 文件输出如图所示代码:

{
    "presets":["es2015"],
    "plugins":[]}

五、当初你能够纵情转换了

终端输出如下命令:(babel 待转换门路 / –out-dir 转换后门路 /)
咱们这里是从 src 转换到 js 目录下

babel src --out-dir js

当初咱们 js 目录上面就生成了编译后的 js 咱们关上看一下 (功败垂成)
是不是每次这样输出一大串命令感觉很麻烦?
通过批改 package.json 外面的别名来实现编译 批改(“dev”:“babel src –out-dir js”)

{
  "name": "es6",
  "version": "1.0.0",
  "description": "","main":"index.js","scripts": {"test":"echo "Error: no test specified" && exit 1","dev":"babel src --out-dir js"},"author":"",
  "license": "ISC"
}

当前你只须要如下命令就能够编译了(是不是感觉很简略呢)

npm run dev

此办法不能用于转换 Vue 语法

// 无论是
created(){}
// 还是
created:function() {}
// 最终转换为:created: function created() {}

正文完
 0