grunt集成Babel 实现ES6转ES5

grunt集成Babel 实现ES6转ES5grunt集成Babel实现ES6转ES5背景:原来前端项目使用ES5开发,后来有个小伙伴使用了ES6的高级语言,导致项目无法通过grunt压缩。使用grunt集成babel,实现ES6转ES5,主要有一下几个步骤:1.配置package.jsondevDependencies里面是开发依赖,dependencies里面是项目依赖。”devDependencies”:{“babel-core”:”^6.26.3″,”babel-loader”:”^7.1.5″,

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

grunt集成Babel 实现ES6转ES5

背景:原来前端项目使用ES5开发,后来有个小伙伴使用了ES6的高级语言,导致项目无法通过grunt压缩。

使用grunt 集成babel,实现ES6转ES5,主要有一下几个步骤:

1. 配置package.json

devDependencies里面是开发依赖,dependencies里面是项目依赖。

"devDependencies": { 
   
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "grunt": "^1.1.0",
    "grunt-babel": "^7.0.0",
    "grunt-contrib-copy": "^1.0.0",
    "grunt-contrib-cssmin": "^2.2.1",
    "grunt-contrib-jshint": "^1.1.0",
    "grunt-contrib-uglify": "^3.3.0"
  },
  "dependencies": { 
   
    "grunt-cli": "^1.3.2",
    "webpack": "^3.12.0"
  }

2.下载项目依赖

进入Gruntfiles.js的同级目录,打开控制命令窗口,执行

npm install  grunt-cli
npm install grunt
npm install webpack -g

3.配置Gruntfiles.js

grunt.initConfig({ 
   
        pkg: grunt.file.readJSON('package.json'),
        uglify : { 
   
            my_target: { 
   
                files: [{ 
   
                    expand: true,
                    src: [
                        'scripts/apps/*.js'
                    ],
                    dest: '', //输出目录
                    cwd: '../webapp' //给文件设置一个起点(gruntfiles的相对路径)
                }]
            }
        },
        
        babel: { 
   
            options: { 
   
                presets: ['babel-preset-es2015']
            },
            dist: { 
   
                files: [{ 
   
                    expand: true,
                    src: [
                        'scripts/apps/*.js'
                    ],
                    dest: '',
                    cwd: 'src'
                }]
            }
        }
    });
     // 加载 "uglify" 任务的插件。
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-babel');

    // 默认被执行的任务列表。
    grunt.registerTask('default', ['babel','uglify']);

4.打开控制命令窗口执行grunt

在这里插入图片描述
大功告成啦!

需要注意的是,由于原来项目代码是ES5和ES6混用的状态,所有有部分代码是不符合ES6的标准的。Babel将ES6的语法转化成ES5,会给每一个文件加上“use strict”,导致原来部分使用ES5的代码暴露在严格模式下,这在转化或者运行时会报错。

本人在转化和运行时就遇到了两个错误。一个是声明了一个变量叫interface,但interface是ES6的保留字,导致转化时报错,这个问题到文件里去把变量名改掉就行。
在这里插入图片描述
第二个问题是,变量没有声明就直接引用。这个问题在编译时不会报错,但是在严格模式下会导致项目运行不正常,比如下面的c_start和c_end。解决办法是给变量加上声明。在这里插入图片描述
所以总的来说,还是要统一代码的语法标准,养成良好的编码习惯,不然bug远源源不断。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/193120.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • spring aop用法_概念的种类

    spring aop用法_概念的种类SpringAOP入门——概念及注意点

  • SecureCRTPortable样式设置

    SecureCRTPortable样式设置SecureCRTPortable高大上设置背景设置进入界面——最上方选项——会话选项——外观,进行如下设置设置完成后就会出现高大上的大神界面

  • vscode前端插件简单配置

    vscode前端插件简单配置AutoCloseTaghtml标签自动闭合Chinese(Simplified)(简体中文)LanguagePackforVisualStudioCodevscode中文插件儿EasyLESS项目无框架无webpack时可以使用的一个less转换插件settings.json配置”less.compile”:{ “out”:false,//是否输出css文件,false为不输出 “compress”:false,//是否压缩 “sour..

  • SQL索引优缺点

    SQL索引优缺点前两篇文章我总结了一些SQL数据库索引的问题,这篇主要来分析下索引的优缼点,以及如何正确使用索引。索引的优点:这个显而易见,正确的索引会大大提高数据查询,对结果进行排序、分组的操作效率。索引的缺点:优点显而易见,同样缺点也是显而易见:1:创建索引需要额外的磁盘空间,索引最大一般为表大小的1.2倍左右。2:在表数据修改时,例如增加,删除,更新,都需要维护索引表,这是需要系统开销的

  • 独热编码(One-Hot Encoding)介绍及实现

    独热编码(One-Hot Encoding)介绍及实现一、介绍One-Hot编码,又称为一位有效编码,主要是采用位状态寄存器来对个状态进行编码,每个状态都由他独立的寄存器位,并且在任意时候只有一位有效。独热编码是利用0和1表示一些参数,使用N位状态寄存器来对N个状态进行编码。例如:参考数字手写体识别中:如数字字体识别0~9中,6的独热编码为0000001000自然状态码为:000,001,010,011,100,101…

    2022年10月22日
  • 知识图谱—知识推理综述(三)

    知识图谱—知识推理综述(三)知识图谱—知识推理综述(三)接上一篇文章知识图谱—知识推理综述(二)3基于表示的知识推理3.1方法简述在之前所介绍的知识推理中,都显示的定义了知识推理所需要的规则,条件等等离散符号。而在基于表示的知识推理中,我们第一步是将知识图谱中的节点和关系进行连续向量空间的映射,需要将其物理表示映射为数值表示,然后在利用数学中的相关算法,通过数值计算的方式进行知识推理。对于映射的向量空间而言,其可以是一个或者多个的向量或者矩阵。基于表示的推理的核心在于“如何表示”,在表示学习的过程中,我们需要的是让算法自

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号