babel的使用（一）

最新推荐文章于 2024-09-13 17:32:25 发布
最新推荐文章于 2024-09-13 17:32:25 发布
阅读量72 收藏
点赞数
文章标签： json javascript ViewUI
原文链接：https://segmentfault.com/a/1190000007735499
版权

Babel 入门

http://www.ruanyifeng.com/blo...

Babel packages

https://github.com/babel/babe...

谈谈Babel v6的新特性及未来定位

http://www.open-open.com/lib/...

Babel 在线转换

https://babeljs.io/repl/

Babel 使用指南

http://guoyongfeng.github.io/...

1. Babel core 浏览器环境

安装： npm install --save-dev babel-core@5

2. 命令行转码babel-cli

安装: npm install --save-dev babel-cli

改写package.json

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

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

npm run build

实例

package.json

{
  "name": "es6-sec",
  "version": "1.0.0",
  "description": "",
  "repository": "",
  "license": "",
  "readme": "",
  "scripts": {
    "build": "babel src -d asset"
  },
  "devDependencies": {
    "babel-cli": "^6.18.0",
    "babel-preset-es2015": "^6.18.0"
  }
}

.babelrc

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

js

// 变量，常量
function test() {
    let a = 10;
    const b = 20;
    console.log(a);
    console.log(b);
}
test();

// 数组的解构赋值
function example() {
    return [1, 2, 3];
}
var [a, b, c] = example();
console.log('a:' + a);
console.log('b:' + b);
console.log('c:' + c);

// 对象的解构赋值
function examples() {
    return {
        foo: 1,
        baz: 2
    };
}
var {foo, baz} = examples();
console.log('foo:' + foo);
console.log(baz);

var input = [1, 2, 3];
input.map(item => item + 1);

html

<!DOCTYPE html>
<html lang="ch-CN">
<head>
    <meta charset="UTF-8">
    <title>es6-sec</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<body>
<script type="text/javascript" src="asset/index.js"></script>
</script>
</body>
</html>
weixin_34162401
关注
Babel从入门到使用
maxandcc的博客
07-23 399
1.认识Babel 首先呢，我们来看一下Babel的官网：https://babeljs.io/,官网中给出的官方解释是：Babel is a JavaScript compiler.Use next generation JavaScript, today.（Babel是一个JS的编译器。有了Babel之后，我们就可以使用下代的JS了。）也就是说Babel是可以将ES6代码编译成ES5或者更早的版本，这样就可以不用考虑浏览器的兼容性问题了。 2.使用Babel 在官...
babel日常使用指南
coding house
06-23 838
刚开始使用babel的时候，很多童鞋只是单纯跟着官网或则其他人的代码去安装一大堆bbabel相关的npm包，但是并不知道具体每个包都是什么样的作用，本文就是来阐述日常开发时用到的babel全家桶分别的作用、使用场景以及其原理。 什么是babel 首先来看一下babel是什么？ Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of Ja.
Babel 入门指南
weixin_34161029的博客
06-19 115
Babel 入门指南 ​⚠️ 注意： Babel 可以与很多构建工具（如 Browserify、Grunt、Gulp 等）进行集成。由于本教程选择 Webpack ，所以只讲解与 Webpack 的集成。想了解如何与其它工具集成，请参考：官方文档 - installation 简介 Babel 是一个通用的多用途 JavaScript 编译器。 Babel 能做什么？ Babel 通过...
Babel入门指南
Liangbin1886的博客
05-23 148
圣经中说 , 人类最早的时候都住在同一个地方 , 讲同一种语言 , 他们决定造一座通天的塔 , 所有的人住在里面 , 人类再也不会分散 上帝不同意 , 他让人类讲不同的语言 , 从此难于沟通 人类自此各散东西 , 计划因此失败 在希伯来语当中 , "巴别"就是"变乱"的意思 , 于是就称这座塔为巴别塔 (Tower of Babel) 有些时候我们想要在JS代码当中使用ES6甚至是还未...
openbabel安装
江湖 - 郎中 - 路
12-30 4288
yum install git cmake gcc g++ gcc-g++ git clone git://github.com/openbabel/openbabel.git wget http://bitbucket.org/eigen/eigen/get/3.2.3.tar.bz2 tar xjvf 3.2.3.tar.bz2
利用openbabel2.4.1进行小分子构象搜索
DrugAI
08-22 4649
利用open babel产生小分子多重构象的方法有两种： 一，使用遗传算法（遗传算法）进行构象搜索，属于系统式搜索最低能量构象的方法 obabel -L conformer命令可以详细查看conformer插件的使用方法 以下命令可以为小分子生成20个小分子构象，然后使用-writeconformers参数将所有的构象写成输出结构文件： obabel ligand.mol2 -O l...
Open Babel教程中文版——文件转换
热门推荐
scuwr的博客
11-02 1万+
文件转化 桌面上建立一个Work文件夹 从Protein Data Bank 中下载胰岛素（4ins）的PDB文件，并将其保存在“Work”文件夹中 3.将文件输入格式设置为PDB，将文件名设置未下载的PDB文件 4. 将工作文件夹中输出文件格式设置为MOL，并将输出文件名设置为file:4ins.mol。 点击CONVERT即可完成转换 ** 无文件格式的转换 **除了使用输入和输出文件外，还可以将化学文件格式的内容粘贴到输入框中，并在输出框中查看转换结果 以SMILES格式为例（以及SMILE
babel基本使用详解
08-31
Babel 是一个广泛使用的 JavaScript 编译器，其主要功能是将现代 JavaScript（ES6+）语法转换为浏览器和旧版 Node.js 环境能够理解的 ES5 语法。这个工具对于开发者来说至关重要，因为它允许我们使用最新的语言特性...
babel使用1
08-08
Babel 是一款强大的 JavaScript 编译器，它允许开发者使用最新的 ECMAScript 特性，如 ES6、ES7 和 ES8，而不用担心浏览器兼容性问题。Babel 将这些现代语法转换为广泛支持的 JavaScript 语法，确保代码能在大多数...
atom-babel6-transpiler：Atom软件包的编译器，可使用Babel 6处理代码
01-31
该项目实现了一个，该编译器使用Babel 6来编译您的包文件。 用法 安装套件 在您的package.json添加一个atomTranspilers条目 安装Babel预设和插件，并根据需要配置Babel 详细： 1.首先，从npm注册表中安装软件包：...
babel-handbook：有关如何使用Babel以及如何为Babel创建插件的指导手册
01-28
Babel是一款流行的JavaScript编译工具，它允许开发者使用最新版本的JavaScript语法（如ES6、ES7等）编写代码，并将其转换为兼容现有浏览器或运行环境的旧版JavaScript。这个过程被称为“转译”或者“编译”。Babel的...
Babel使用教程手册
前端大白LKUAN
07-05 5639
Babel 用户手册 这本手册涵盖了关于 Babel 的使用及其相关工具的内容。 目录 介绍安装 Babel babel-cli在项目内运行 Babel CLIbabel-registerbabel-nodebabel-core 配置 Babel .babelrcbabel-preset-es2015babel-preset-reactbabel-preset-
babel的使用及安装配置教程
金焱的博客
09-05 3922
      这几天看了一些网上的前端面经，在提到es6的时候会带着问babel如何配置等问题，今天早上花了1个小时时间去了解并实际操作了一个案例，在这里记录一下所做的工作以便以后复习用。 简介 babel是一个广泛使用的转码器，可以将ES6代码转化为ES5代码，从而在现有环境执行，这意味着，你可以现在就用ES6编写程序，而不用担心现有环境是否支持。 安装及配置 首先在自己的电脑里创建一个文...
Open Babel的安装与使用
Dechin的博客
05-18 1万+
技术背景 Open Babel是化学领域常用的一个文件格式转换工具，它可以支持xyz的坐标格式、SMILES表达式、InChI表达式和mol以及mol2等格式之间的互相转化。比如说，你只有一个甲烷的SMILES表达式C，那么你就可以使用Open Babel将其转化成一个mol2文件，这样就可以用vmd等工具进行分子的可视化(参考这篇博客)。 OBABEL的安装 OBABEL的安装方式有两种，一种...
Gson转换
最新发布
09-13 291
gson格式转换.create());@Overridetry {
Vue使用query传参Boolean类型，刷新之后转换为String问题
q879936814的博客
09-12 376
要解决这个问题，不能直接Boolean处理，因为如果传入false，那么转换成字符串，Boolean(‘false’)会变成true；做项目时发现第一次进入页面时传参是正常的Boolean类型，刷新之后变成了String，这是浏览器进行的一次强制转换；解决方法：使用JSON.parse处理参数。
sqlalchemy JSON 字段写入时中文序列化问题
llc的博客
09-12 341
_table_args__ = ({"comment": "表名称"})...extra = Column(JSON, comment="其他属性")...
C++与QML的数据交互
qq_50679120的博客
09-11 512
这里没什么好说的，在C++中组合好json后，通过信号发送到qml中，qml中是可以解析json的。通过Q_PROPERTY属性，可以轻松地在QML中读取和修改数据，并将其更新到C++中，先创建一个类。在QML接收，直接通过data.can_id这样的形式去访问结构体中的元素。这两个也没什么好说的，在C++中直接发送信号就好了，在C++中声明并注册一个结构体。然后发送信号到QML中。
jackson 中常用注解说明
Gemini1995的博客
09-11 598
Jackson 是一个流行的 JSON 序列化和反序列化库，提供了丰富的注解来控制对象与 JSON 之间的转换过程。
GPS Babel怎么使用
06-10
GPSBabel是一款开源的GPS数据转换工具，支持多种格式之间的互相转换。以下是GPSBabel的使用方法： 1. 下载安装GPSBabel软件，并打开。 2. 选择数据源和目标格式。点击“Formats”按钮，选择要转换的格式，然后在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值