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.设置 ...
随机推荐
- go tour - Go 入门实验教程
在线实验地址 - 官网 在线实验地址 - 国内 可以将官方教程作为独立程序在本地安装使用,这样无需访问互联网就能运行,且速度更快,因为是在你的机器上构建并运行代码示例. 本地运行此教程的中文版的步骤如 ...
- 16/8/23-jQuery子调用匿名函数
通过创建一个自调用匿名函数,创建一个特殊的函数作用域,该作用域中的代码不会和已有的同名函数.方法和变量以及第三方库冲突. 自调用匿名函数写法 方法一: (function(){ //... })(); ...
- Win7 64位注册32位DLL
记忆力越来越差,备忘. 参考地址 https://support.microsoft.com/en-us/help/249873/how-to-use-the-regsvr32-tool-and-tr ...
- nodejs基础-nvm和npm
nvm npm 更新 npm install npm@latest -g 本地安装 npm install 包名称 require(”包名“) 全局安装 npm install 包名 -g 可以直接作 ...
- C++学习笔记(三)--数组、字符串
1.数组,C++中不允许数组的下标值为变量,只能是常量或者常量表达式,必须先定义后使用.数组赋初值几种常见方式: int a[] = {1,2,3,4,5}: int a[4] = {2,1,3,4} ...
- 洛谷 P1339 [USACO09OCT]热浪Heat Wave(dijkstra)
题目链接 https://www.luogu.org/problemnew/show/P1339 最短路 解题思路 dijkstra直接过 注意: 双向边 memset ma数组要在读入之前 AC代码 ...
- python学习第三天格式化输出%s %d
编程语言为什么要格式化输出吗,一般print()就够了,有些复杂的格式输出比较麻烦,用格式化输出更加高效, info=""" ---------------------- ...
- 71.Edit Distance(编辑距离)
Level: Hard 题目描述: Given two words word1 and word2, find the minimum number of operations required ...
- Java集合、IO流、线程知识
一.集合: 1. 集合框架: 1)Collection (1)List:有序的,有索引,元素可重复. (add(index, element).add(index, Collection).remov ...
- elasticsearch 基础 —— _mget取回多个文档及_bulk批量操作
取回多个文档 Elasticsearch 的速度已经很快了,但甚至能更快. 将多个请求合并成一个,避免单独处理每个请求花费的网络延时和开销. 如果你需要从 Elasticsearch 检索很多文档,那 ...