首页 > 编程知识 正文

es6为什么要转换为es5,babel处理es6模块

时间:2023-05-05 06:34:33 阅读:274234 作者:2901

ECMAScript 6(ES6)的发展速度非常之快,但现代浏览器对ES6新特性支持度不高,所以要想在浏览器中直接使用ES6的新特性就得借助别的工具来实现。

Babel是一个广泛使用的转码器,babel可以将ES6代码完美地转换为ES5代码,所以我们不用等到浏览器的支持就可以在项目中使用ES6的特性。

babel 6与之前版本的区别:

之前版本只要安装一个babel就可以用了,所以之前的版本包含了一大堆的东西,这也导致了下载一堆不必要的东西。但在babel 6中,将babel拆分成两个包:babel-cli和babel-core。如果你想要在CLI(终端或REPL)使用babel就下载babel-cli,如果想要在node中使用就下载babel-core。babel 6已结尽可能的模块化了,如果还用babel 6之前的方法转换ES6,它会原样输出,并不会转化,因为需要安装插件。如果你想使用箭头函数,那就得安装箭头函数插件npm install babel-plugin-transform-es2015-arrow-functions。

下面进入babel。

配置.balbelrc文件

Babel的配置文件是.babelrc,存放在项目的根目录下。使用Babel的第一步,就是配置这个文件。该文件用来设置转码规则和插件,基本格式如下。
注意:文件名为.balbelrc;与文件中的一致。

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

presets字段设定转码规则,官方提供以下的规则集,你可以根据需要安装。

# ES2015转码规则$ npm install --save-dev babel-preset-es2015# react转码规则$ npm install --save-dev babel-preset-react# ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个$ npm install --save-dev babel-preset-stage-0$ npm install --save-dev babel-preset-stage-1$ npm install --save-dev babel-preset-stage-2$ npm install --save-dev babel-preset-stage-3

然后,将这些规则加入.babelrc。

{ "presets": [ "es2015", "react", "stage-2" ], "plugins": [] }

注意:这块中,用到哪个添加哪个,如果添加了如:’react‘而未做相关设置,babel将不能识别切不能正常编译,运行npm run build 时出现:

//.babelrc{ "presets":[ "es2015", "react" ], "plugins":[]}

注意,以下所有Babel工具和模块的使用,都必须先写好.babelrc

命令行转码babel-cli

Babel提供babel-cli工具,用于命令行转码。
它的安装命令如下。

$ npm install --global babel-cli

基本用法如下。

# 转码结果输出到标准输出$ babel example.js# 转码结果写入一个文件# --out-file 或 -o 参数指定输出文件$ babel example.js --out-file compiled.js# 或者$ babel example.js -o compiled.js# 整个目录转码# --out-dir 或 -d 参数指定输出目录$ babel src --out-dir lib# 或者$ babel src -d lib# -s 参数生成source map文件$ babel src -d lib -s

上面代码是在全局环境下,进行Babel转码。这意味着,如果项目要运行,全局环境必须有Babel,也就是说项目产生了对环境的依赖。另一方面,这样做也无法支持不同项目使用不同版本的Babel。

一个解决办法是将babel-cli安装在项目之中。

# 安装$ npm install --save-dev babel-cli

然后,改写package.json。(其实执行了上面的install后会自动在devDependencies中加入babel-cli)

{ // ... "devDependencies": { "babel-cli": "^6.0.0" }, "scripts": { "build": "babel src -d lib" },}

转码的时候,就执行下面的命令。

$ npm run build

例:
简单的一个例子目录:

pakage.json文件:

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。