ES6转ES5环境搭配
1、初始化项目
在项目根目录创建 package.json 文件
npm init //或者 npm init -y
2、安装babel-cli脚手架
npm install babel-cli --save
3、配置文件.babelrc
在项目根目录新建文件,命名为:.babelrc.(注意:以点开头且以点结束的文件,即文件没有扩展名)

3.1、设定转码规则
npm install --save-dev babel-preset-latest
//或者 npm install --save-dev babel-preset-es2015
3.2、设置.babelrc的presets
{
"presets": [
'latest' //或者es2015或者env,总之对应自己安装的转码规则,
],
"plugins": []
}
4、设置相应的scripts脚本:在package.json中设置,(将src文件夹下的js文件,编译转码到dist文件夹下)
"scripts": {
"build": "babel src -d dist"
}
5.转码运行
在项目根目录下的命令行中运行转码,转码运行后将在dist文件夹下生成 es6 转码后生成的 es5 文件,然后可以在程序中引用 es5 文件。
npm run build
ES6转ES5环境搭配的更多相关文章
- 简单利用gulp-babel搭建es6转es5环境
es6是什么?借着这个话题,我想说:身为web前端的工作者连es6没听说,转行吧. demo的代码如下: 源码下载 或者 gitclone地址: git@git.oschina.net:sisheb/ ...
- reactjs学习一(环境搭配react+es6+webpack热部署)
reactjs学习一(环境搭配react+es6+webpack热部署) 本文的源码在这里下载 https://github.com/tianxiangbing/webpack-study 或者使 ...
- rollup环境搭建(es6转es5、压缩、本地服务器、热更新)
文件目录 package.json { "name": "my-vue", "version": "1.0.0", &q ...
- ES6的开发环境搭建
在搭建es6开发环境之前,先简单介绍一下es6. ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在2015年6月正式发布了.它的目标,是使得 Java ...
- Babel 转码器 § es6转换es5
Babel 转码器 § es6转换es5 实时转码 / Repl -babel-node / babel-register(自动转码引入babel-register模块) 配置文件.babelrc ...
- vue2.0在android5.0白屏, es6转es5保证浏览器兼容性
1. 安装 npm install --save-dev babel-preset-es2015 2. 安装 npm install --save-dev babel-preset-stage-3 3 ...
- 利用babel-cli搭建支持ES6的node环境
现在ES6盛行,开始大量使用ES6的特性敲代码,但限于Node.js本身对ES6的特性支持的不够完备,那么需要借助于其他工具来完成. 基本上,现在都直接写ES6的代码,然后使用babel-cli提供的 ...
- 使用webpack+babel构建ES6语法运行环境
1.前言 由于ES6语法在各个浏览器上支持的情况各不相同,有的浏览器对ES6语法支持度较高,而有的浏览器支持较低,所以为了能够兼容大多数浏览器,我们在使用ES6语法时需要使用babel编译器将代码中的 ...
- ES6+转ES5(webpack+babel、指定多个js文件、自动注入)
接续上篇ES6+转ES5,本篇将使用webpack和babel将多个不同目录下指定的多个ES6+语法的js文件编译为ES5,并将编译后的文件配置注入对应的html文件. 所需环境node.npm.设置 ...
随机推荐
- 【SpringBoot】 Java中如何封装Http请求,以及JSON多层嵌套解析
前言 本文中的内容其实严格来说不算springboot里面的特性,属于JAVA基础,只是我在项目中遇到了,特归纳总结一下. HTTP请求封装 目前JAVA对于HTTP封装主要有三种方式: 1. JAV ...
- QQ空间分享网址
现在大部分网站都在每个界面设计了分享这个功能,但还是有的网页没有(比如 B 站只能分享具体的视频).在原来的 QQ 空间分享的地方已经找不到法自己创建分享.上网一搜有分享的接口,可这个接口是给开发者用 ...
- 《图解设计模式》读书笔记3-1 Singleton模式
目录 单例模式 饿汉式 懒汉式 线程安全的懒汉式 单例模式 确保任何情况下都只有一个实例 饿汉式 public class Singleton { //在类被加载的时候运行一次,这是本类构造函数的唯一 ...
- How to resolve error “Failed to resolve: org.jetbrains.kotlin:kotlin-stdlib-jre7…” when building in Android Studio Ask Question
//implementation"org.jetbrains.kotlin:kotlin-stdlib-jre7:$kotlin_version" implementation & ...
- Card Collector AtCoder - 5168(二分图匹配的HALL定理)
题意: 给定一个H行W列的矩阵,在矩阵的格点上放带权值的卡片(一个点上能放多张). 现在从每行每列各拿走一张卡片(没有可以不拿),求可以拿到的最大权值. 卡片数N<=1e5,H,W<=1e ...
- (转载)Java 8 认识 HashMap
原链接:传送门 摘要 HashMap是Java程序员使用频率最高的用于映射(键值对)处理的数据类型.随着JDK(Java Developmet Kit)版本的更新,JDK1.8对HashMap底层的实 ...
- df认识
import pandas as pd #自己创建一个df df = pd.DataFrame({ ,,], 'col2':["zs",'li','zl'], 'col3':[3. ...
- web开发jsp页面遇到的一系列问题
一:web总结 1.jsp页面知识点巩固 1.1字符串数字格式化转换 <%@ taglib prefix="fmt" uri="http://java.sun.co ...
- [NOIP2016]借教室
NOIP2012提高组D2T2. 这道题目非常基础,正解貌似是二分+差分数组,在这里提供一种线段树的思路. 很容易发现题目让我们每次修改一段区间,然后我们只需要看每一个区间内有没有负数就可以了.可以用 ...
- k3 cloud中列表字段汇总类型中设置了汇总以后没有显示出汇总值
处理方法,需要bos中的分组列信息中设置求和: 选择对应字段将其从左侧添加到右侧 方法二: 直接针对[价税合计]字段的列表汇总类型进行设置,步骤如下图所示