之前在项目中使用.balelrc文件,但是一直不知道具体怎么使用,就知道可以将es6语法转码为es5语法。

今天就简单的做个例子,也算是记录一下困扰了好久的问题。

转码步骤:

  • 首先在项目的目录中安装Babel

  • 创建配置文件 .balelrc ,存放在项目的根目录下

  • 利用Babel提供的命令行工具@babel/cli,用命令行进行转码

1.1 安装Babel,可以直接使用命令行安装。

npm install --save-dev @babel/core

1.2 配置文件 .babelrc

该文件用来设置转码规则和插件的,基本格式为:

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

presets字段设定转码规则,官方提供一下的规则集,可以按需加载

# 最新转码规则
$ npm install --save-dev @babel/preset-env # react 转码规则
$ npm install --save-dev @babel/preset-react

然后将这些规则加入.babelrc文件

{
"presets":[
"@babel/env",
"@babel.preset-react"
],
"plugins":[]
}

1.3 命令行转码

Babel 提供命令行工具@babel/cli,用于命令行转码。

npm install --save-dev @babel/cli

基本用法:

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

这里附上自己转码配置文件和转码前后文件内容和转码命令(就是自己玩了一下,嘿嘿嘿~)

其实网上的资料还是很多滴,就是自己想要知道怎么自己转码,其实用webpack也是比较简单的。

首先,安装babel-preset-env包:npm install –save-dev babel-preset-env

在根目录下创建.babelrc文件。

为了检验我们的配置是否成功,我们再安装babel-cli包:npm install --save-dev babel-cli,然后我们在根目录下创建一个babel_test文件用于测试,如下:

let arr = [1, 2, 3];
console.log([...arr]);

并在package.json文件中添加npm脚本:

"scripts": {
"dev": "vue-cli-service serve --open",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e",
"babel": "babel ./babel_test/test.js -o ./babel_test/res.js"
},

该脚本的作用就是将test.js进行转码,并将转码后的内容存储到res.js文件中。

在终端执行npm run babel则会在相同目录下生成res.js:

"use strict";
var arr = [1, 2, 3];
console.log([].concat(arr));

该文件已经转码成功,说明我们的配置是正确的。

babel 的简单使用的更多相关文章

  1. babel如此简单

    凡是看到这个标题点进来的同学,相信对babel都有了一定的了解.babel使用起来很简单,简单到都没有必要写一篇文章去介绍,直接看看官方文档就可以.所以我也在怀疑到底该不该写这篇文章.想来想去还是决定 ...

  2. babel 7 简单升级指南

    babel 7 babel 7 发布两天了,试着对当前项目更新了下,仅此记录分享 主要改动参考 官方博客 官方升级指南 主要升级内容 不再支持放弃维护的 node 版本 0.10.0.12.4.5 使 ...

  3. babel 7 简单指北

    babel 7 对于 babel 7,babel 的官网已经介绍得非常详细了,但有时感觉文档和实际使用总是差那么一点东西. 主要包 先来看一下主要的包,babel 7 对于包进行了一些简化. @bab ...

  4. babel简介——简单介绍与实用(转)

    博客讲解内容如下: 1.babel是什么 2.javascript制作规范 3.babel转译器 4.babel的使用 5.常见的几种babel转译器和插件 6.babel最常见配置选项 7.babe ...

  5. webpack4 babel 篇

    demo 代码点此,如果对 babel 不熟,可以看一下babel 7 简单指北. webpack 使用 babel 来打包使用 es6 及以上语法的 js 文件是非常方便的,可以通过配置,将 es6 ...

  6. babel plugin和presets是什么,怎么用?

    https://www.fullstackreact.com/articles/what-are-babel-plugins-and-presets/ 当开发react或者vuejs app时,开发者 ...

  7. Babel知识点相关

    本篇是根据最新babel 7版本写的,里面用到的一些babel相关包都是babel 7的     1,babel是如何工作的 babel是一个转译器,这里我严格区分了转译器和编译器,因为编译器最终生成 ...

  8. babel 与 ast

    什么是 babel Babel 是一个工具链,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中. 什 ...

  9. 前端JavaScript高级面试笔记

    一.ES6 1.模块化 ES6通过export和import实现模块化 ES6的模块化的基本规则或特点, 欢迎补充: 1:每一个模块只加载一次, 每一个JS只执行一次, 如果下次再去加载同目录下同文件 ...

随机推荐

  1. 复制表结构创建分表 再设置自增ID

    CREATE TABLE table_name1 LIKE table_name ALTER TABLE test AUTO_INCREMENT=x

  2. bootstrap-table.js 自适应窗体设置

    $(window).resize(function () { $('#dtOrder').bootstrapTable('resetView') })

  3. MySQL 普通索引和唯一索引的区别

    该文为< MySQL 实战 45 讲>的学习笔记,感谢查看,如有错误,欢迎指正 一.查询和更新上的区别 这两类索引在查询能力上是没差别的,主要考虑的是对更新性能的影响.建议尽量选择普通索引 ...

  4. linux安装python3环境并配置虚拟环境

    1.安装必要库 yum -y install gcc yum -y install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite- ...

  5. pytest文档32-allure描述用例详细讲解

    前言 pytest+allure是最完美的结合了,关于allure的使用,本篇做一个总结. allure报告可以很多详细的信息描述测试用例,包括epic.feature.story.title.iss ...

  6. ECMAScript 6基础

    ECMAScript 和 JavaScript 是什么关系? 1996 年 11 月,JavaScript 的创造者 Netscape 公司,希望JavaScript能够成为国际标准,将其提交给标准化 ...

  7. 如何将BroadcastReceiver中的信息传到Activity中

    方法:在BroadcastReceiver中定义一个接口,在Activity中定义一个BroadcastReceiver的对象,采用动态注册,在Activity中定义接口中的方法并通过Broadcas ...

  8. 一些linux软件国内源

    1. ubuntu 版本号 Ubuntu 12.04 (LTS)代号为precise. Ubuntu 14.04 (LTS)代号为trusty. Ubuntu 15.04 代号为vivid. Ubun ...

  9. SpringBoot从1.5.1→2.2.4项目加包扫雷一:Error:(8, 44) java: 程序包org.springframework.boot.web.support不存在

    更换成新包即可import org.springframework.boot.web.servlet.support.SpringBootServletInitializer;

  10. [CF1311F] Moving Points - 树状数组

    Solution 按 \(x\) 关键字升序排序,依次枚举每个点 考虑对任意 \(x_j < x_i\),那么当 \(v_j \leq v_i\) 时,它们不会相交,且 \(dis\) 就是它们 ...