大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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账号...