一、新建工程初始化项目

  1.新建工程文件夹这里起名叫做es6,然后在里面创建两个文件夹分别为src 、dist如下图:(src为待转换es6 js存放目录,dist为编译完成后的es5 js存放目录)

2、在src目录下新建一个js文件,里面输入es6的代码

3. 初始化项目

  npm  init 

二、全局安装babel工具

1)在终端中输入以下命令,

  npm install -g babel-cli

2)安装转换包

  npm install --save-dev babel-preset-es2015 babel-cli

3)在实际项目中es6转es5后可能出现Object.assign()未定义,因此还需安装Babel套件与插件

  1  安装   (适用于Object.assign() 的插件)

  npm install babel-plugin-transform-object-assign
  
  2.安装 (适用于展开运算符 的插件)
    npm install babel-plugin-transform-object-rest-spread
三、新建.babelrc

四、修改package.json

  最后:npm run build

利用babel工具将es6语法转换成es5,Object.assign方法报错的更多相关文章

  1. 利用babel自动编译es6文件

    一.检查File-Watchers中Babel的Arguments,有一项presets的设置,把他更改为=es2015,详细设置如下: $FilePathRelativeToProjectRoot$ ...

  2. 使用babel把es6代码转成es5代码

    第一步:创建一个web项目 使用命令:npm init 这个命令的目的是生成package.json. 执行第二步中的命令后生成的package.json的文件的内容是: { "name&q ...

  3. 利用反射将Datatable、SqlDataReader转换成List模型

    1. DataTable转IList public class DataTableToList<T>whereT :new() { ///<summary> ///利用反射将D ...

  4. 使用命令行工具将Android应用转换成BlackBerry PlayBook应用

    昨天写了篇文章关于Android应用转换的,通过BlackBerry的在线转换工具将Android应用转换成BlackBerry PlayBook应用.有网友反映说方法有点麻烦,所以今天补上新的转换方 ...

  5. 【ES6学习笔记之】Object.assign()

    基本用法 Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target). const target = { a: 1 }; const sou ...

  6. 自制 Python小工具 将markdown文件转换成Html文件

    今天看到了一个Python库,名为markdown.瞬间就给了我一个灵感,那就是制作一个将markdown文件转换成html文件的小工具. 我的实验环境 操作系统: Windows 7 64位 旗舰版 ...

  7. Protocol Buffer使用转换工具将proto文件转换成Java文件流程及使用

    Client与Server的网络通信协议传输使用google protobuf,服务器端使用的是Java 一. Protocol Buffersprotobuf全称Google Protocol Bu ...

  8. Webpack4 学习笔记三 ES6+语法降级为ES5

    前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 Webpack 将es6.es7语法降级为es5 需要通过 babel JavaScript编译器. 安装: npm i babel ...

  9. ES6 代码转成 ES5 代码的实现思路是什么(来自github每日一题)

    将代码字符串解析成抽象语法树,即所谓的 AST 对 AST 进行处理,在这个阶段可以对 ES6 代码进行相应转换,即转成 ES5 代码 根据处理后的 AST 再生成代码字符串 每日一题https:// ...

随机推荐

  1. vue 图片路径问题

    图片路径问题 module.exports = { // 根据环境区分 生产服务器production比如php服务器的地址 和 开发服务器dev的地址 // npm run serve是开发环境de ...

  2. css实例——“旋转”太极八卦图

    话不多说,直接上代码: HTML代码部分: <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

  3. SpringBoot2 集成日志,复杂业务下的自定义实现

    本文源码:GitHub·点这里 || GitEE·点这里 一.日志体系集成 1.日志管理 在系统的开发中,最关键的一个组件工具就是日志,日志打印方便问题排查,或者生产事故回溯,日志记录用来监控并分析系 ...

  4. java输出1-100之间的数并求和for+while+do while实现

    public static void main(String args[]) {//do while int sum = 0; //当前之和 int i = 1; //加数 do { if (i%2= ...

  5. conda和pip重新配置源

    conda设置源之后出现了问题,报错condaHTTPError: 之前按照网上的一些教程设置了清华源之后,过了一段时间,今天来装新的库时报了以上错误,特此记录一下. conda 源重新设置 重新去清 ...

  6. openwrt 单网卡路由模拟实现

    关键字 vlan openwrt 单臂路由 一直以来都认为路由器要至少要求是双网卡,因为至少要有lan/wan.最近看了单臂路由的介绍,自己在虚拟机测试了一把,发现单网口做路由器确实可行! 测试环境 ...

  7. 第23课 - #error 和 #line 使用分析

    第23课 - #error 和 #line 使用分析 1. #error 的用法 (1)#error 是一个预处理器指示字,用于生成一个编译错误消息,这个消息最终会传递到编译器(gcc) 在思考这一点 ...

  8. 复习 | 彻底弄懂Flexbox之Demo篇

    flexbox之前有接触,写项目时也用过,但也只是简单的,对其也是似懂非懂,所以今天下定决心把这个再学一遍,因为似懂非懂就是不懂 本文主要是的demo演示,想看flexbox语法 请移步flexbox ...

  9. turtle角度坐标体系

    seth()改变海龟的行进角度 例如 让海龟的方向朝着45°方向行进 turtle.seth(45) 让海龟的方向朝着-135°反方向行进 turtle.seth(-135) turtle.left( ...

  10. python3-day4

    一.列表生成式,迭代器和生成器 1)列表生成式 把列表  [0,1,2,3,4,5,6,7,8,9]里的每个值添加1 1 >>>a = [0,1,2,3,4,5,6,7,8,9] 2 ...