es6(1)——Babel-阿里云开发者社区

开发者社区> 零零水> 正文

es6(1)——Babel

简介: Babel 参考阮一峰的文章所写。 已细化重点知识,确保可以按步骤复现。并省略某些不常用的内容 解释: 1. 简单来说,就是可以把ES6的代码转换成ES5的代码,这样你就可以在ES5的环境中运行ES6而不必担心兼容性了; 2. ES7的转换也可以靠这个来完成; 3. 其是放置在node_modules文件夹下的插件,就像使用其他通过npm install安装的插件一样使用; 4. 默认只转换语法,不转换API。
+关注继续查看

Babel

参考阮一峰的文章所写。

已细化重点知识,确保可以按步骤复现。并省略某些不常用的内容

解释:

1. 简单来说,就是可以把ES6的代码转换成ES5的代码,这样你就可以在ES5的环境中运行ES6而不必担心兼容性了;
2. ES7的转换也可以靠这个来完成;
3. 其是放置在node_modules文件夹下的插件,就像使用其他通过npm install安装的插件一样使用;
4. 默认只转换语法,不转换API。比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。

【使用方法】

1. 在项目的根目录下创建一个文件,文件名是.babelrc,记得放在项目根目录(一般是和package.json还有readme.md同一个目录下);
2. 注意1:上面那个文件,在windows下不能直接创建(会提示说必须输入文件名),  
   解决方法1:用linux、mac或者用IDE(比如webstorm)来创建;
   解决方法2:从我的github中直接下载文件
3. 注意2:那个文件的babelrc就是后缀名,而不是txt格式的(所以会提示没有文件名);
4. 用编译器打开(或者用记事本打开也行,注意编码格式是UTF8),文件内基本格式如下:

    {
      "presets": [],
      "plugins": []
    }
    
5. 这个文件用于设置转码规则和插件;
6. presets是转码规则,值的数组里面,填写规则。
7. plugins是插件,有需要就写,不需要的话这个可以省略。
8. 按需安装转码规则(见下面);
9. 将对应的字符串添加到.babelrc中(千万别忘了,我试了半天总转失败,结果发现我没加)
10. 运行转码命令/内嵌到package.json里在项目运行时转码;

转码规则和转码安装:

1. 首先应该安装对应的转码规则集(他的规则像安装npm插件一样安装);
2. 然后在"presets"这个数组中填写对应的值;
3. 官方提供的规则集如下(转自[阮一峰的博客](http://es6.ruanyifeng.com/#docs/intro)):

        注:
        $表示命令行,实际输入的时候从npm开始输入(应该不会有人不知道吧);
        #表示注释,不要输这个后面的文字啊
        
        # ES2015转码规则
        $ npm install --save-dev babel-preset-es2015
        # 添加的字符串为:"es2015"(""表示这是个字符串),下同
        
        # react转码规则
        $ npm install --save-dev babel-preset-react
        # 添加的字符串为:"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
        # 添加的字符串为:"stage-0"至"stage-3"中的一个(显然后面包含前面)
        
4. 安装完转码规则之后(根据实际需要安装,不用全部装),在.babelrc文件的"presets"的值中添加对应的字符串作为数组元素,参考上面;

方法一:全局使用babel-cli转码(命令行、单文件、所有文件夹输出结果)

优点:

1.简单直接暴力,全局安装,哪里都能用;

缺点:

1.项目要求有环境依赖,换了环境不能用(比如说换台电脑,但他没装babel-cli就尴尬了);

前置准备:

1. 先配置好,参考【使用方法】
2. 命令行输入以下代码,来全局安装babel-cli工具
       npm install --global babel-cli
       

步骤:

1.控制台输出转换结果(控制台输出):

1. 命令行输入以下代码:(下同,都是控制台输入)
       babel input.js
2. 然后控制台会输出以下内容(转换结果,下同,结果内容都是以下的内容):
       "use strict";
       
       var input = [];
       input.map(function (item) {
         return item + 1;
       });
       

2.将转换结果输出到指定文件内(单文件转换):

1. 输入:
       babel input.js -o output.js
2. 输出:
       同目录下自动生成output.js,文件内容是上面的转换结果
3. -o表示--out-file,即输出为文件
       

3.将一个目录下的所有文件(递归执行)全部转码输出到某个文件夹下(同名转换):

1. 先建立一个input文件夹,把之前的input.js复制一份进去;
2. 输入:
       babel input -d output
3. -d表示--out-dir,即输出到文件夹,前面的input表示输入文件夹名,后面的output表示的是输出的文件夹名;
4. 输出:output目录被创建,里面有input文件夹下的同名input.js,但内容是转换后的
5. input文件下所有文件都会被转换,转换过程是递归的(即子文件夹下的子文件,甚至更深层也会被转换);

非全局使用babel-cli转码(作为项目的依赖转码)

优点:

1.非全局,不要求PC环境全局安装babel-cli;
2.方便版本管理

缺点:

1.需要配置package.json,比较麻烦一些;

前置准备:

1. 先配置好,参考【使用方法】
2. 修改package.json,添加相应的脚本代码;
3. 具体来说,根目录下创建一个package.json,然后文件内容如下:
       {
         "devDependencies": {
           "babel-cli": "^6.0.0"
         },
         "scripts": {
           "build": "babel input -d output"
         }
       }
       

转换方法:

1. 先建立一个input文件夹,把之前的input.js复制一份进去;
2. 然后在根目录(即package.json以及.babelrc所在目录的控制台输入:
       npm run build
3. 效果和全局使用的【转换方法3】是一样的;

注1:

npm run build里的build,指的是package.json里面,scripts里的build属性的属性名,如果把属性名改为test,那么就是npm run test

注2:

npm run build相当于执行了babel input -d output这个指令。只不过这里的babel来源于node_modules文件夹下的babel-cli,而不是之前通过控制台运行的全局的babel-cli

其他转码

如:

  1. 提供一个可以直接运行ES6的REPL环境,无需转码直接运行ES6脚本,点击直达
  2. 加钩子,每当使用require加载.js、.jsx、.es和.es6后缀名的文件,自动转码点击直达
  3. 对某些代码进行转码(按需转码)点击直达
  4. 对API进行转码 点击直达
  5. 在浏览器环境中实时转码(会影响性能,而以上是直接转完后发给浏览器) 点击直达
  6. 还有在线转换(输入ES6代码,输出ES5代码,然后复制拿走使用) 点击直达%3B)
  7. 还有关于Google公司的Traceur转码器,或者是babel和其他框架的配合等,请点击右方链接直达阮一峰的博客来查阅

关于插件

1、例如Object.assign这样的方法,在IE下不行。那么就需要用插件

如这个插件:https://babeljs.io/docs/plugins/transform-runtime/

就可以让IE支持这个功能

或者

另外提一句,Babel默认情况下,是不能转换Set和Map等数据类型的,引自:

Babel 默认只转换新的 JavaScript 句法(syntax),而不转换新的 API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。
举例来说,ES6在Array对象上新增了Array.from方法。Babel 就不会转码这个方法。如果想让这个方法运行,必须使用babel-polyfill,为当前环境提供一个垫片。

阮一峰

我自己实践测试来看:

  1. 必须引用babel-polyfill才能正常运行Set和Map类型(不然会报错);
  2. 引入的方法就是安装这个插件,然后import或者require他就行;
  3. 但单独js引入是不行的,需要利用webpack之类的打包(因为一般情况,浏览器是不支持直接跑js文件的require语法);

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10089 0
使用SSH远程登录阿里云ECS服务器
远程连接服务器以及配置环境
2511 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
9161 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13892 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
22405 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
4508 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7365 0
+关注
零零水
主攻JS
234
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载