babel安装

注意:如果没有装node.js,先去装一个!!安装node.js时会默认安装npm。

步骤:

1、新建一个文件夹,装接下来的所有东西。我新建了一个learn-es6文件夹

2、在learn-es6项目文件下创建根目录文件:

-package.json
-src文件夹--index.html--js文件夹---index.js
这一步的关键是
  1. 一定要有src文件夹!!要不然后面会报错
  2. 预定要新建一个package.json文件!

这两个千万不能少,少一个就会报错!

index.html文件内容先为空、index.js内容也先为空(安装完成后,测试用)。

3、配置文件.babelrc

打开MAC的终端:

3.1 先sudo -s获取最高权限;
3.2 然后通过cd进入learn-es6项目文件;
3.3 接着“vim .babelrc”新建一个.babelrc 文件:

键盘输入”i“进入编辑模式,然后输入

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

输入完毕,“esc”键退出。输入“:wq”,冒号是英文的,表示保存并退出。

并且安装以下规则集:

# ES2015转码规则
$ npm install --save-dev babel-preset-es2015# react转码规则
$ npm install --save-dev babel-preset-react# ES7不同阶段语法提案的转码规则(共有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

4、命令行转码babel-cli

注意:babel-cli 安装在项目之中,官网已经强烈建议不要安装在全局环境下!!

终端依旧在learn-es6的位置,执行以下命令:

$ npm install --save-dev babel-cli

5、执行下列命令,没有报错即可。

$ npm run build


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/364255.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

针对新手的Java EE7和Maven项目–第1部分–简单的Maven项目结构–父pom

为什么呢 很多时候,我在日常工作中试图解决一些基本或复杂的Maven / Java EE项目结构问题。 为了提供解决方案,我经常最终会尝试项目结构,测试我在不同应用程序服务器上的部署并细化我的配置。 Maven对于新来者来说可能会有陡峭的学习曲线&a…

sql server 学习记录

sql-server 基础: 1、查看sqlserver的数据表 SELECT name,crdate FROM SysObjects Where XTypeU order by crdate desc 查看数据表的字段 SELECT A.name AS table_name,B.name AS column_name,C.value AS column_description FROM sys.tables A INNER JOIN sys.col…

mysql 子字符串函数_MySQL 内置字符串函数

MySQL内置函数concat()用于连接字段LTRIM(),RTRIM(),TRIM()分别用于去除左边空格,右边空格,以及左右空格都去除NOW()放回当前的日期和时间UPPER() 和LOWER()upper():转换为年夜写输出; lower() 转换为小写输出LEFT()返回串左边的字符RIGHT()返回串右边的字符,办法参考LEFT()LOC…

弱监督学习下商品识别:CVPR 2018细粒度识别挑战赛获胜方案简介

弱监督学习下商品识别:CVPR 2018细粒度识别挑战赛获胜方案简介 细粒度视觉分类(FGCV,Fine-Grained Visual Categorization)即识别细分类别的任务,一般它需要同时使用全局图像信息与局部特征信息精确识别图像子类别。细…

JS中apply和call的应用和区别

因为object没有某个方法,但是别的对象有,可以借助apply或call像别的对象借方法来操作。 猫吃鱼,狗吃肉,奥特曼打小怪兽。 有天狗想吃鱼了 猫.吃鱼.call(狗,鱼) 狗就吃到鱼了 猫成精了,想打怪兽 奥特曼.打小…

解题:NOIP 2018 保卫王国

题面 最小支配集全集-最大独立集 所以先把点权改成正无穷/负无穷来保证强制选/不选某个点到独立集里&#xff0c;然后变成了洛谷的动态DP模板 GTMDNOIP2018ZTY 1 #include<stack>2 #include<cstdio>3 #include<cstring>4 #include<algorithm>5 using n…

petshop4学习_重构DataList实现分页

掌握要点: <IList>,DataGrid翻页事件...详细代码如下,慢慢体会..usingSystem;usingSystem.Collections;usingSystem.Collections.Specialized;usingSystem.Text;usingSystem.Text.RegularExpressions;usingSystem.Web.UI;usingSystem.Web.UI.WebControls;namespaceCustom…

如何与Java 8,NetBeans Platform 8,Jenkins,Jacoco和Sonar进行持续集成

介绍 Java 8出现了&#xff0c;人们所期待的革命终于发布了&#xff0c;我敢肯定&#xff0c;你们中的许多人都在想着同样的问题“我应该在项目中使用它吗&#xff1f;”。 好吧&#xff0c;几个月来我遇到了同样的问题&#xff0c;今天我有一个答案想与大家分享。 很多方面都…

WSS学习(一)---简单部署图

研究了一段时间的WSS&#xff0c;终于找到点头绪了今天把这段时间的思路整理了一下&#xff0c;结果发现就是这么一张图也不知道研究的对不对&#xff0c;有高手发现不对的给点指点有也在研究的大家一起讨论一下简单说明&#xff1a;数据库用SQL2005&#xff0c;报表用SQL2005的…

Wildfly 8.0通过其JAXRS 2.0实现提供了无缝的JSON支持。

很高兴看到Wildfly 8.0使得使用同一组JAXB类中的XML和JSON表示 两者变得更加容易&#xff0c;而无需任何额外的检查或配置不同的JAXB运行时实现。 您需要做的就是 只需从JAXRS资源类中的业务方法中返回JAXB对象 将HTTP Accept标头设置为application / json 返回JAXB类的简单…

vue.config.js配置别名alias、配置生产环境清除console

项目中使用引入文件有时候路径比较深&#xff0c;需要使用"../../../xx.js"这种类似的路劲引入&#xff0c;这种方式比较笨&#xff0c;可以使用webpack的别名alias配置来解决。 首先&#xff0c;先确定项目中是否有path模块&#xff1a; 如果没有path模块需要先安装…

借助Java 8和lambdas,可以一起使用AssertJ和Awaitility

AssertJ和Awaitility是在自动代码测试中使用的两个我最喜欢的工具。 不幸的是直到最近&#xff0c;还不能一起使用它。 但是随后Java 8进入了游戏&#xff0c;几十行代码足以使其在Awaility 1.6.0中实现。 AssertJ提供了一组丰富的断言&#xff0c;其中包含非常有用的错误消息…

小程序-冒泡事件

小程序冒泡事件与非冒泡事件 会随之触发父元素的称为冒泡事件&#xff0c;反之&#xff0c;则是非冒泡事件 wxml&#xff1a; <view class"view1" bindtap"view1click"> <!-- 用 bind 绑定事件 -->view1<view class"view2" bin…

mysql导出表结构 创建_mysql如何导出表结构为文本文件

Log Goup ID&#xff0c;可能会配置多个redo组&#xff0c;每个组对应一个id&#xff0c;当前都是0&#xff0c;占用4字节Start LSN&#xff0c;这个redo log文件开始日志的lsn&#xff0c;占用8字节Log File Number&#xff0c;总是为0&#xff0c;占用4字节Created By&#x…

CSS基础学习-15-1.CSS 浏览器内核

转载于:https://www.cnblogs.com/songsongblue/p/11047935.html

gitlab提交代码push,触发jenkins构建

一、安装插件 Build Authorization TokenRoot Gitlab Hook Plugin二、配置 在linux上执行命令 openssl rand -hex 12获得token&#xff1a; 632f873225efdb5b7e5da411 去掉jenkins的 CSRF Protection设置 找到触发构建的项目&#xff0c;修改触发器 在gitlab的项目中&#xff0…

5分钟搞定jQuery zepto.js 面向对象插件

今天分享一下快速使用jQuery zepto.js的技巧&#xff0c;需要的记得收藏 1.jQuery的引入&#xff1a;本地下载jQuery(后面简称jq)的源文件&#xff0c;开发版本使用非min版&#xff0c;线上使用min版&#xff0c;zepto.js类似&#xff0c;同样的一些基于jq的插件也是如此用法&…

在JDK 8中可通过反射获得构造函数/方法参数元数据

JDK 8较不为人所知的一项新 功能是在编译的Java类中包含参数元数据的可选功能[JDK增强建议&#xff08; JEP &#xff09; 118 ]。 此功能允许Java应用程序在运行时通过反射访问此参数元数据信息。 Java Tutorial的Reflection API路径包括一个名为“ 获取方法参数的名称”的课…

基于面向对象的图片轮播(js原生代码)

无论你想走多远&#xff0c;你都需要不断地走下去。前端最精华的便是原生的js,这也是我们前端工程师的技术分层的重要指标&#xff0c;也提现这你的代码能力&#xff0c;开发的水平。废话不多说&#xff0c;进入今天的主要分享————基于面向对象思想的图片轮播。其效果如下所…

C#定义只能处理枚举类型的泛型类型

1 internal sealed class GenericTypeThatRequireAnEnum<T>2 {3 public static int age 12; //该 static 字段在不同的封闭类型之间是独立不共享的4 5 //静态构造器针对每个封闭类型都会执行一次&#xff0c;泛型类型定义静态构造器的目的就是为了保证传递的类…