vim复制 editor 私有变量 npm安装 list algorithm post History.js bootstrap后台管理系统模板 bootstrap管理系统模板 多商户商城模板 eclipse闪退 oracle自增长 pip环境变量配置 mysql增删改查语句 android自定义控件 pythonlist pythonfor循环 python打开文件 windows安装python环境 java时间 java编程基础 java字符串长度 java中的继承 java基础框架 java获取本地时间 变量的类型 java项目下载 服务器系统下载 骁龙660和625 脚本大全 mysql时间比较 jsp源码下载 凯立德下载 ps画笔颜色 vue动态路由 python去掉空格 winrar去广告版 视频下载高手 打开mysql
当前位置: 首页 > 学习教程  > 编程语言

Babel详解

2021/2/13 16:27:56 文章标签: 测试文章如有侵权请发送至邮箱809451989@qq.com投诉后文章立即删除

简介 Babel 是一个工具链,主要用于将 ECMAScript 2015 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。 安装 控制台命令窗口执行命令:npm install -g babel-cli。还可以使用阿里云镜像&…

简介

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

安装

  • 控制台命令窗口执行命令:npm install -g babel-cli。
  • 还可以使用阿里云镜像,执行命令:cnpm install -g babel-cli,下载速度更快。
  • 查看是否安装成功:babel --version,即查看安装的babel版本。

使用

  1. 创建babel文件夹
  2. 初始化项目:npm init -y
  3. 创建src/example.js文件,下面是一段ES6代码:
//ES6
let name="THU";
const title="大学";
let arr=[1,2,3,4,5,6,7,8,9,10];
let arr2=arr.map(obj=>obj*2);
console.log(arr2);
console.log(name);
console.log(title);

  1. 配置 .babelrc 文件,这是babel的配置文件,存放在项目的根目录下,该文件用来设置转码规则和插件,其基本格式如下:
{
  "presets": [...],
  "plugins": [...]
}
 presets字段设置转码规则,将es2015加入到.babelrc,
{
  "presets": ["es2015"],
  "plugins": []
}
  1. 安装转码器,在项目中安装,执行命令:

     cnpm install --save-dev babel-preset-es2015
    
  2. 转码(两种方法)

    • 执行命令:babel src -d dist,将src目录下的所有源文件全部编译成对应的es2015文件,会在src同级目录中创建一个dist目录,将编译好的文件放在dist目录中。

    • 自定义脚本,在package.json文件中进行配置

      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev":"babel src -d dist"
       },
    

    再执行命令:npm run dev,这里的“dev”也就是在json文件中配置的键的名称。


本文链接: http://www.dtmao.cc/news_show_700031.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?