Babel:帮我们把高级的语法(ES6)转为低级的语法
/*    Babel 7.x版本  安装如下 (cnpm i @babel/cli -D)
                    //Babel 自带了一个内置的 CLI 命令行工具,可通过命令行编译文件以core为基础。
                    "@babel/cli": "^7.8.4",
                    "@babel/core": "^7.9.6",
            
                    //适应JavaScript的一些新特性
                    "@babel/plugin-proposal-class-properties": "^7.8.3",
                    //每个Babel编译后的脚本文件,都以导入的方式使用Babel的帮助函数,
                    //而不是每个文件都复制一份帮助函数的代码。提高代码重用性,缩小编译后的代码体积.
                    "@babel/plugin-transform-runtime": "^7.9.6",
                    //转码:不同的模块这些es运行环境对es6,es7,es8支持不一,有的支持好,有的支持差,为了充分发挥新版es的特性,
                    //我们需要在特定的平台上执行特定的转码规则,说白了就像是按需转码的意思
                    "@babel/preset-env": "^7.9.6",
                    //main.js:webpack默认打包只能处理JS类型的文件 处理不了非JS类型,
                    //这时候就需要第三方loader加载器进行处理,并在webpack配置中书写匹配规则
                    "babel-loader": "^8.1.0",
  .babelrc下配置                  
  {
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-transform-runtime","@babel/plugin-proposal-class-properties"]
  
   } 
   webpack配置文件下
    { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },//配置
      // Babel 来转换高级ES语法
      此时便可在main.js项目的JS入口编写相关ES6面向对象等方法辣 并log出来
*/

Babel 7 安装与配置的更多相关文章

  1. webpack4.x下babel的安装、配置及使用

    前言 目前,ES6(ES2015)这样的语法已经得到很大规模的应用,它具有更加简洁.功能更加强大的特点,实际项目中很可能会使用采用了ES6语法的模块,但浏览器对于ES6语法的支持并不完善.为了实现兼容 ...

  2. 前端自动化之babel本地化安装

    npm添加package.json cd到项目根目录直接调用npm init 会创建package.json文件 本地安装bebel(并非全局安装,这种情况下cmd命令中babel命令不识别): 步骤 ...

  3. nodejs安装及npm模块插件安装路径配置

    在学习完js后,我们就要进入nodejs的学习,因此就必须配置nodejs和npm的属性了. 我相信,个别人在安装时会遇到这样那样的问题,看着同学都已装好,难免会焦虑起来.于是就开始上网查找解决方案, ...

  4. Java eclipse Myeclipse tomcat安装及配置

    Java eclipse Myeclipse tomcat安装及配置作者:天涯 来源:中国自学编程网 发布日期:1223857747目前,开发Java网页程序,最流行的就是用Myeclipse来进行编 ...

  5. JDK安装与配置

    JDK安装与配置 一.下载 JDK是ORACLE提供免费下载使用的,官网地址:https://www.oracle.com/index.html 一般选择Java SE版本即可,企业版的选择Java ...

  6. Node.js 教程 01 - 简介、安装及配置

    系列目录: Node.js 教程 01 - 简介.安装及配置 Node.js 教程 02 - 经典的Hello World Node.js 教程 03 - 创建HTTP服务器 Node.js 教程 0 ...

  7. 烂泥:redis3.2.3安装与配置

    本文由ilanniweb提供友情赞助,首发于烂泥行天下 想要获得更多的文章,可以关注我的微信ilanniweb 前一段时间写过一篇codis集群的文章,写那篇文章主要是因为当时的项目不支持redis自 ...

  8. mysql源码包手动安装、配置以及测试(亲测可行)

    笔记编者:小波/qq463431476博客首页:http://www.cnblogs.com/xiaobo-Linux/ 记下这篇mysql笔记,望日后有用! redhat6采用centos yum源 ...

  9. 环境搭建系列-系统安装之centos 6.5安装与配置

    按照国际惯例,系列目录先奉上: 系列一:系统安装之centos 6.5安装与配置 系列二:准备工作之Java环境安装 系列三:数据为先之MySQL读写集群搭建 系列四:谈分布式之RabbitMQ集群搭 ...

随机推荐

  1. Python-AES加密算法接口测试

    前言 先前已经学过了Python-SHA256加密算法接口测试,今天我跟大家讲解一下AES加密算法的接口如何写python脚本进行测试. 一:安装pycryptodome模块 pip install ...

  2. 大话Ansible Ad-Hoc命令

    Ansible是一个系列文章,我会尽量以通俗易懂.诙谐幽默的总结方式给大家呈现这些枯燥的知识点,让学习变的有趣一些. Ansible系列博文直达链接:Ansible入门系列 前言 通过前面的文章,大家 ...

  3. Java开发架构篇:DDD模型领域层决策规则树服务设计

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 在上一章节介绍了领域驱动设计的基本概念以及按照领域驱动设计的思想进行代码分层,但是仅 ...

  4. webpack指南(五)TypeScript

    将webpack与TS进行集成. 1. 安装TypeScript 编译器和 loader npm install --save-dev typescript ts-loader 2. 在package ...

  5. Flask开发技巧之异常处理

    Flask开发技巧之异常处理 目录 Flask开发技巧之异常处理 1.Flask内置异常处理 2.HTTPException类分析 3.自定义异常处理类 4.方便的定义自己的错误类 5.注意事项 本人 ...

  6. 【MySQL】深入理解MySQL锁和事务隔离级别

    先看个小案例: 话不多说,上案例,先创建一个表 mysql> CREATE TABLE IF NOT EXISTS `account`( `id` INT UNSIGNED AUTO_INCRE ...

  7. VUE 关键字

    转 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...

  8. Asp.net Identity身份与权限体系设计

    1 Identity 介绍 2 授权系统 图1 体系结构 3 自定义 Attribute 自定义 Attribute 继承于 AuthorizeAttribute,AuthorizeAttribute ...

  9. [Android应用开发] 01.快速入门

    前言 这一篇,主要是把之前[安卓基础]系列的东西,做一个总结和补充.并举了两个例子:电话拨号器.短信发送器做巩固,在此也参考了黑马训练营的教学大纲. Android项目的目录结构 Activity:应 ...

  10. MRCTF 2020 WP

    MRCTF 2020 WP 引言 周末趁上课之余,做了一下北邮的CTF,这里记录一下做出来的几题的WP ez_bypass 知识点:MD5强类型比较,is_numeric()函数绕过 题目源码: I ...