ECMAScript 6 入门-Babel

2023-05-16

配置文件.babelrc
直接在项目的跟目录下建立.babelrc的文件;具体方法:可以在控制台输入echo null>.babelrc;回车即可。
该文件用来设置转码规则和插件,基本格式如下。

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

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

# 最新转码规则
$ npm install --save-dev babel-preset-latest

# react 转码规则
$ npm install --save-dev babel-preset-react

# 不同阶段语法提案的转码规则(共有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": [
      "latest",
      "react",
      "stage-2"
    ],
    "plugins": []
  }

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


命令行转码babel-cli
安装npm install --global babel-cli;这是全局安装。最好也要在本地项目下安装
安装命令:npm install --save-dev 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文件(文件目录src下的文件输出到lib文件目录下)
$ babel src -d lib -s

然后,改写package.json。

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

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

npm run build

总的来说:
首先安装依赖:

# 最新转码规则
$ npm install --save-dev babel-preset-latest

# react 转码规则
$ npm install --save-dev babel-preset-react

# 不同阶段语法提案的转码规则(共有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

# 安装全局脚手架
$ npm install --global babel-cli

# 安装本地脚手架
$ npm install --save-dev babel-cli

然后,将这些规则写入.babelrc.babelrc的建立方法在上面提到。

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

确定package.json是否配置好;

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

运行转码,执行下面的命令:

$ npm run build
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ECMAScript 6 入门-Babel 的相关文章

  • TS中的泛型

    一 泛型是什么 有什么作用 当我们定义一个变量不确定类型的时候有两种解决方式 使用any 使用any定义时存在的问题 虽然 以 知道传入值的类型但是无法获取函数返回值的类型 另外也失去了ts类型保护的优势 使用泛型 泛型指的是在定义函数 接
  • 二、Vue3跨组件调用函数[mitt]

    一 跨组件调用函数 安装 npm install mitt 创建文件并写入 bus js import mitt from mitt export const eventBus mitt 使用方法 import eventBus from
  • Vue前端开发中的输入限制与输入规则探究

    前言 在Vue前端开发中 我们经常需要对用户的输入进行限制和规范 以确保数据的准确性和安全性 本文将介绍如何使用Vue的el input组件来实现输入限制和输入规则 并提供相应的代码示例 一 输入限制 最大长度限制 我们可以使用maxlen
  • 第一个Node程序,Node入门

    第一个Node程序 在前面的所有内容中 我们编写的JavaScript代码都是在浏览器中运行的 因此 我们可以直接在浏览器中敲代码 然后直接运行 从本章开始 我们编写的JavaScript代码将不能在浏览器环境中执行了 而是在Node环境中
  • JavaScript 获取时间日期方法

    Date对象包含日期和时间的相关信息 Date对象没有任何属性 它只具有很多用于设置和获取日期时间的方法 方法 说明 getDate 返回Date对象中月份的天数 gateDay 返回Date对象中的星期几 getHours 返回Date对
  • 函数的防抖和节流简述

    防抖和节流 即 限制函数的执行次数 防抖和节流二者非常相似 但还是有细微的不同 防抖 通过 setTimeout 的方式在一定的时间间隔内 将多次触发变成一次触发 比如用户在十秒内一直连续点击 但最后只会触发一次 简单举例 function
  • vue 3 第三十四章:nextTick

    nextTick是Vue3中的一个非常有用的函数 它可以在下一次DOM更新循环结束后执行回调函数 这个函数可以用来解决一些异步更新视图的问题 例如在修改数据后立即获取更新后的DOM节点 以下是一个简单的示例
  • js 将图片转为base64格式

    两种方式 1 利用canvas绘制图片 适用转换本地路径图片 2 通过网络请求图片地址 并返回blob格式 再操作 适用服务器端图片 1 利用canvas绘制 data return img4 mounted this imgToBase6
  • wx.config的时候总是报错63002是什么原因,配置时总是 invalid signature

    真的是真的是 我都弄的崩溃了差点 卡了三天的问题 各种留言各种找人还是不行 为了不再让各位体验那种感觉 zkhh666我的wx 首先说 我用的hbuilderx的uni做的 使用了推荐的插件jweixin module ps 我的问题是ur
  • three.js中聚光灯及其属性介绍

    一 聚光灯及其属性介绍 Three js中的聚光灯 SpotLight 是一种用于在场景中创建聚焦光照的光源类型 它有以下属性 color 聚光灯的颜色 intensity 聚光灯的强度 distance 聚光灯的有效距离 angle 聚光
  • 记录--Vue中如何导出excel表格

    这里给大家分享我在网上总结出来的一些知识 希望对大家有所帮助 一 导出静态数据 1 安装 vue json excel npm i vue json excel 注意 此插件对node有版本要求 安装失败检查一下报错是否由于node版本造成
  • 比较和合并实时脚本和函数

    比较和合并实时脚本和函数 实时脚本 Live Script 和函数 Function 是 MATLAB 中常用的两种代码组织形式 它们在代码编写 调试和重用方面有着不同的特点 本文将比较这两种形式 并探讨如何将实时脚本和函数合并使用 实时脚
  • python执行JavaScript代码

    1 简单使用 import execjs execjs eval new Date 返回值为 2018 04 04T12 53 17 759Z execjs eval Date now 返回值为 1522847001080 需要注意的是返回
  • Vue中的过滤器

    过滤器 定义 对要显示的数据进行特定格式化后再显示 适用于一些简单逻辑的处理 语法 1 注册过滤器 Vue filter name callback 全局 或 new Vue filters 局部 2 使用过滤器 xxx 过滤器名 或 v
  • vue中用高德地图根据经纬度在地图上显示一个定位点

    在 Vue 中使用高德地图显示定位点 你需要做以下几件事 在项目中安装高德地图的 npm 包 npminstall save amap js api 在 main js 中引入高德地图的库并初始化 import AMapfrom amap
  • nodejs微信小程序+python+PHP健身房信息管理系统的设计与实现-计算机毕业设计推荐

    目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1 1背景及意义 1 1 2 国内外研究概况 1 1 3 研究的内容 1 第2章 相关技术 3 2 1 nodejs简介 4 2 2 express框架介绍 6 2
  • js操作excel常用方法,js制作表格代码

    这篇文章主要介绍了js操作excel常用方法 具有一定借鉴价值 需要的朋友可以参考下 希望大家阅读完这篇文章后大有收获 下面让小编带着大家一起了解一下 本文基于react项目实现 起因 接了一个需求 要求实现点击页面上的一个按钮 复制某个表
  • react创建路由两种方式

    react创建路由两种方式 两种方式都需要下载相关依赖 依赖如下 npm i react router dom 方式一 使用 useRoutes 使用 BrowserRouter 或者 HashRouter 在 index tsx 中 im
  • 【vue】$bus 跨组件调用方法

    1 新建bus js import Vue from vue 使用 Event Bus const bus new Vue export default bus 2 main js引用 import bus from libs bus Vu
  • 在JavaScript面向对象编程中使用继承

    面向对象编程是一种重要的编程范式 它通过将数据和操作封装在对象中 实现了代码的模块化和复用 在JavaScript中 我们可以使用继承来实现对象之间的关系 从而使代码更加灵活和可扩展 那么 让我们深入探讨在JavaScript中如何使用继承

随机推荐

  • Vue遇到的bug-03(VUE之使用高德地图API)

    步骤一 xff1a 申请高德地图密钥 xff1b 步骤二 xff1a 在index html中添加高德地图JavaScript API接口 xff1b span class hljs tag lt span class hljs title
  • 纯css模仿微信switch开关按钮

    业务需要需要做一个微信switch开关 效果图 html样式 span class hljs tag lt span class hljs title label span gt span span class hljs tag lt sp
  • SDN实验环境的搭建UBUNTU 14LTS+MININET+RYU

    RYU是NTT主推的开源SDN 控制器项目 xff0c 采用PYTHON语言 因为工作需要 xff0c 进行了一些尝试 xff0c 现将基础环境的搭建和相关参考资料记录如下 1 系统选择UBUNTU 14 LTS xff0c 采用VMWAR
  • 移动端开发小记

    meta 在我们开发移动端的时候 xff0c 首先在head里面写入如下的代码 span class hljs tag lt span class hljs title meta span span class hljs attribute
  • less 简单用法

    less 示例 声明变量 用 64 span class token atrule span class token rule 64 man color span span class token punctuation span f0f0
  • javascript性能优化(1)

    加载 1 javascript的第一条定律 xff1a 将脚本 xff08 js xff09 放到底部 2 每一个http请求都会造成额外的性能负担 xff0c 下载一个100k的文件比下载四个25k的文件要快 xff1b 减少引用外部脚本
  • javascript性能优化(2)

    数据访问 四种基本数据类型 xff1a 1 直接量 xff1a 仅是自身不存储于特定位置 包括 xff1a 字符串 数字 布尔值 对象 数组 函数 正则表达式 xff0c 具有特殊意义的空值 xff0c 以及未定义 2 变量 xff1a v
  • javascript性能优化(3)

    DOM编程 1 文档对象模型 xff08 DOM xff09 访问的dom越多 xff0c 代码的执行速度就越慢 2 innerHtml和DOM方法 更改dom的时候 xff0c 使用innerHTML xff08 字符串拼接 xff09
  • javascript性能优化(4)

    算法和流程控制 代码整体结构是执行速度的决定因素之一 代码量少不一定运行速度快 xff0c 代码量多也不一定运行速度慢 性能损失与代码组织方式和具体问题解决办法直接相关 循环 1 减少对象成员和数组项查找的次数 span class hlj
  • javascript性能优化(5)

    字符串和正则表达式 span class hljs keyword str span 61 span class hljs string 34 a 34 span 43 span class hljs string 34 b 34 span
  • javascript性能优化(6)

    响应接口 长运行脚本 xff08 500万以上 xff09 最好的办法就是避免他们 接口最好在100毫秒响应用户输入 用定时器让出时间片 当一些JavaScript任务不能再100ms之内完成的时候 xff0c 最好的办法就是 xff1a
  • 一些简单的JavaScript加密/解密

    UTF8编码与解码 xff1a span class hljs function span class hljs keyword function span span class hljs title encodeUTF8 span spa
  • git的基本操作

    新上手一个项目 xff0c 难免会忘记git的一些操作指令 xff0c 于是趁现在工作不是很忙 xff0c 自己便整理一下git的一些基本指令 git拉取远程数据 xff0c 并建立新的分支 git clone url 克隆远程仓库代码 g
  • git clone 加速方法

    查询github global ssl fastly net和github com的IP 安装查询工具 xff1a sudo apt install dnsutils nslookup github com nslookup github
  • javascript性能优化(7)

    Ajax 异步 JavaScript 和 XML Ajax 是高性能 JavaScript 的基石 它可以通过延迟下载大量资源使页面加载更快 它通过在客户端和服 务器之间异步传送数据 xff0c 避免页面集体加载 它还用于在一次 HTTP
  • javascript性能优化(8)

    Programming Practices 编程实践 避免二次评估 JavaScript 与许多脚本语言一样 xff0c 允许你在程序中获取一个包含代码的字符串然后运行它 有四种标准 方法可以实现 xff1a eval xff0c Func
  • 编写可维护的JavaScript-编程风格

    可以使用JSHint对代码进行检查 代码规范可以是使开发更高效 基本的格式化 缩进层级 使用制表符进行缩进 Tab使用空格进行缩进 语句结尾 是不是使用分号看个人喜好 xff0c 书上推荐是不使用 xff1b 但是jshint等工具 xff
  • 编写可维护的JavaScript-编程实践

    UI层的松耦合 1 将JavaScript从css中抽离出来 xff1b 现在大部分已经不支持 xff1b 2 将css从JavaScript中抽离出来 不要直接在js内添加样式 xff1b 如 xff1a e style color 61
  • 编写可维护的JavaScript-自动化

    自动化的利弊 优点 xff1a 本地的源代码不必同生产环境保持一致 xff0c 所以你可以任意组织你的代码结构而不必担心在服务器上使用的代码是否需要优化 静态分析可以自动发现错误 在部署之前有多种方式处理JavaScript xff0c 比
  • ECMAScript 6 入门-Babel

    配置文件 babelrc 直接在项目的跟目录下建立 babelrc的文件 xff1b 具体方法 xff1a 可以在控制台输入echo null gt babelrc xff1b 回车即可 该文件用来设置转码规则和插件 xff0c 基本格式如