一、新建工程初始化项目

  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. h5跳转微信公众号关注页面

    最近在做h5项目,有个需求是如果用户没有关注公众号,需要引导用户跳转至微信公众号关注页面 制作一个链接,点击该链接跳转到公众号关注页面. 1.从公众平台登进入公众号 2.点击开发>>开发者 ...

  2. 跟着尚硅谷系统学习Docker-【day07】

    day07-20200722   p27.dockerfile案例编写-3   第一步:编写父dockerfile DockerFile_20200722_2 FROM centos RUN yum ...

  3. HKDAS产品技术架构图

  4. Nginx之rewrite使用

    rewrite regex replacement [flag];  flag=[break/last/redirect/permanent] ² regex 是正则表达式 ² replacement ...

  5. postgres 无法删除表

    起因 在postgress下删除表的时候报错 解决 简单的百度了一下,有些人说是用户权限的问题,需要切换到库的拥有者下删除,但是切换后还是没有解决··· 最后换了一种方式搜索,不直接搜索报错命令,直接 ...

  6. Vue和d3.js(v4)力导向图force结合使用,v3版本升级v4【一】

    前段时间因为参与项目涉密,所以一直没有更新博客,有些博友给我私信或者留言要部分博文的源码,因为我的电脑更换,demo的源码没有备份 所以无法提供.大家可针对具体问题问我,有空我定会回复的.另外转发文章 ...

  7. Charles的几个用途

    1.拦截请求,篡改请求和响应 拦截请求,修改请求可以测试网站中一些异常的情况,检查服务端是否有校验的情况 检查是否存在漏洞,就看拦截之后修改过的数据是否写进了数据库 使用方法: 举例一:上传文件 1. ...

  8. python爬虫学习过程记录

    项目为爬取Python词条的信息. 项目代码在我的码云仓库. https://gitee.com/libo-sober/learn-python/tree/master/baike_spider 1. ...

  9. Linux rndis_host 驱动的一个BUG与解决方案

    关键字 rndis_host, linux, kernel, modem 综述 rndis 是微软定义的一套通讯方案.类似的协议还有 qmi/mbim/ecm/ncm. rndis 协议足够简单,可靠 ...

  10. 微服务架构之SpringCloud

    微服务架构之SpringCloud介绍 1.什么是微服务 2.SpringCloud架构 3.SpringCloud组件 4.微服务相关技术 Docker Jenkins