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环境搭配的更多相关文章

  1. 简单利用gulp-babel搭建es6转es5环境

    es6是什么?借着这个话题,我想说:身为web前端的工作者连es6没听说,转行吧. demo的代码如下: 源码下载 或者 gitclone地址: git@git.oschina.net:sisheb/ ...

  2. reactjs学习一(环境搭配react+es6+webpack热部署)

    reactjs学习一(环境搭配react+es6+webpack热部署) 本文的源码在这里下载 https://github.com/tianxiangbing/webpack-study   或者使 ...

  3. rollup环境搭建(es6转es5、压缩、本地服务器、热更新)

    文件目录 package.json { "name": "my-vue", "version": "1.0.0", &q ...

  4. ES6的开发环境搭建

    在搭建es6开发环境之前,先简单介绍一下es6. ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在2015年6月正式发布了.它的目标,是使得 Java ...

  5. Babel 转码器 § es6转换es5

    Babel 转码器 § es6转换es5 实时转码 /  Repl  -babel-node / babel-register(自动转码引入babel-register模块) 配置文件.babelrc ...

  6. vue2.0在android5.0白屏, es6转es5保证浏览器兼容性

    1. 安装 npm install --save-dev babel-preset-es2015 2. 安装 npm install --save-dev babel-preset-stage-3 3 ...

  7. 利用babel-cli搭建支持ES6的node环境

    现在ES6盛行,开始大量使用ES6的特性敲代码,但限于Node.js本身对ES6的特性支持的不够完备,那么需要借助于其他工具来完成. 基本上,现在都直接写ES6的代码,然后使用babel-cli提供的 ...

  8. 使用webpack+babel构建ES6语法运行环境

    1.前言 由于ES6语法在各个浏览器上支持的情况各不相同,有的浏览器对ES6语法支持度较高,而有的浏览器支持较低,所以为了能够兼容大多数浏览器,我们在使用ES6语法时需要使用babel编译器将代码中的 ...

  9. ES6+转ES5(webpack+babel、指定多个js文件、自动注入)

    接续上篇ES6+转ES5,本篇将使用webpack和babel将多个不同目录下指定的多个ES6+语法的js文件编译为ES5,并将编译后的文件配置注入对应的html文件. 所需环境node.npm.设置 ...

随机推荐

  1. HttpSessionBindingListener和HttpSessionAttributeListener区别

    HttpSessionBindingListener和HttpSessionAttributeListener是两个经常让初学者弄混的监听器,其实它们有很大的区别.这2个监听器在文章中简称为Bindi ...

  2. WCF权限认证多种方式

    WCF身份验证一般常见的方式有:自定义用户名及密码验证.X509证书验证.ASP.NET成员资格(membership)验证.SOAP Header验证.Windows集成验证.WCF身份验证服务(A ...

  3. urllib.parse解析链接

    1. urlparse() 解析链接,注意,返回值比3多一个params的属性 from urllib.parse import urlparse result = urlparse('http:// ...

  4. 【报错】The origin server did not find a current representation for the target resource or is not willing to disclose that one exists.

    提交表单之后, 报错页面显示: HTTP Status 404 – 未找到 Type Status Report 消息 Not found 描述 The origin server did not f ...

  5. Waiter.js

    var Waiter = function() {     var dfd = [],         doneArr = [],         failArr = [],         slic ...

  6. 《JAVA设计模式》之命令模式(Command)

    在阎宏博士的<JAVA与模式>一书中开头是这样描述命令(Command)模式的: 命令模式属于对象的行为模式.命令模式又称为行动(Action)模式或交易(Transaction)模式. ...

  7. [Python3 填坑] 013 几个类相关函数的举例

    目录 1. print( 坑的信息 ) 2. 开始填坑 2.1 issubclass() 2.2 isinstance() 2.3 hasattr() 2.4 getattr() 2.5 setatt ...

  8. [Linux] 002 预备知识

    1. 开源软件 (1) 常见开源软件 Apache NGINXTM MySQL PHP Saamba mongoDB Python Ruby Sphinx -- (2) 开源软件的特点 绝大多数开源软 ...

  9. UML类图及类之间关系

    1.UML基本介绍 UML:统一建模语言,是一种用于软件系统分析和设计的语言工具 2.UML图 UML图分类: 用例图 静态结构图:类图,对象图,包图,组件图,部署图 动态行为图:交互图,状态图,活动 ...

  10. 【洛谷UVA307】小木棍Sticks

    小木棍Sticks[传送门] 算法的话:dfs+超强剪枝: (另外注意UVA上好像不接受万能头[因为万能头WA了两次,瑟瑟发抖]) 思路: 最直接的思路,枚举木棍长度来dfs,但这样很容易就TLE了. ...