Babel入门——ES6转ES5

stdying 发布于2019-08-22 11:22 / 1419人阅读

摘要：首先安装使用时在文件头加载然后，就不需要手动对转码了。

原文转载自阮一峰教程

本文讲解如何在nodejs环境下使用babel将ES6代码转ES5以及运行ES6的js文件

配置.babelrc文件

首先安装es2015的presets字段

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

然后写入.babelrc

{
    "presets":[
        "es2015"
    ]
}

命令行转码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-cli安装在项目中

$ npm install --save-dev babel-cli

然后，在package.json中加入：

{
    "scripts":{
        "build":"babel src -d lib"
    }
}

转码的时候，就执行下面的命令:

$ npm run build

关于npm scripts的更多用法详见阮一峰教程

babel-node

可以直接运行ES6代码

babel-node已安装在babel-cli中，所以无须额外安装

$ babel-node index.js

babel-node也已经安装在babel-cli中，无须额外安装
同样，改写package.json

{
    "scripts":{
        "start":"babel-node index.js"
    }
}

babel-register

babel-register模块改写require命令，为它加上一个钩子。此后，每当使用require加载.js、.jsx、.es和.es6后缀名的文件，就会先用Babel进行转码。
首先安装：

$ npm install --save-dev babel-register

使用时在文件头加载：

require("babel-register");
require("./index.js");

然后，就不需要手动对index.js转码了。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92285.html

使用gulp 进行ES6开发

摘要：已经转码成了已经转码成了合并压缩并重命名的文件使用如果我们使用了中的，通过进行模块化开发，那么通过转码后，将被转码成符合规范的和等，但是浏览器还是不认识，这时可以使用对代码再次进行构建。一说起ES6，总会顺带看到webpack、babel、browserify还有一些认都不认识的blabla名词，对于gulp才会一点点的我来说，内心简直是崩溃的，上网查了一些文章，探索着用gulp搭起...

lauren_liuling 2019-08-19 17:31 评论0 收藏0
babel6 入门-配置安装使用_byKL

摘要：入门什么是是一个广泛使用的转码器，可以将代码转为代码，从而在现有环境执行。 babel6 入门什么是babel Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。因为es6比es5的代码更为适合编写程序,但是因为历史的原因,现在普遍的浏览器并不支持es6代码(普遍支持es5),即如果你写es6代码之后,在浏览器上运行出错,因为浏览器的javas...

qianfeng 2019-08-20 14:31 评论0 收藏0
Babel 快速入门

摘要：快速体验安装依赖新建文件夹，在命令行里进入该文件夹，并执行如下命令生成文件是内置的一个，可通过命令行操作来编译文件。入门为了确保转换后的代码能正常的运行，最好在代码之前引入这是一个实现了部分特性的包。参考中文网入门简介 Babel 是一个 JavaScript 编译器，可将我们代码中的 ES6 语法转换为 ES5 的语法，使我们的代码能在不支持 ES6 语法的环境中正常运行。配合一些...

NoraXie 2019-08-22 14:57 评论0 收藏0
ES6常用语法整合

摘要：说到肯定是先介绍了，据阮一峰老师介绍到，是一个广泛使用的转码器，可以将代码转为代码，从而在现有环境执行。输出其他还有等可以查看阮一峰的入门 ES6也出来有一会时间了，他新增的语法糖也的确大大提高了开发者的效率，今天就总结一些自己用到最多的。说到ES6肯定是先介绍Babel了，据阮一峰老师介绍到，Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。这意...

张迁 2019-08-20 15:31 评论0 收藏0
项目中配置Babel转码器的详细教程

先简单说一下Babel吧 Babel是一个ES6转码器，可以将ES6代码转为ES5代码此篇教程是在学习阮老师的《ES6标准入门》时，不会npm的学习总结在阮老师的教程上具体补充，通过以下几个步骤，即可在项目中直接安装Babel转码器，一行命令即可进行ES6转码第一步：创建package.json package.json 文件是一个描述文件，主要有以下3个作用： 1.描述项目依赖了哪些包 2...

zzbo 2019-08-26 12:21 评论0 收藏0