解决用 gulp 打包 web 项目时报 JS_Parse_Er

问题背景

之前一个上线运行的 web 项目，客户提了点新的需求。于是要修改部分原来的代码。原来的代码采用 ES5 书写。本人现在阶段早已转入了 ES6 的阵营。更新代码完毕后，还是采用 原有的 gulp 打包（我现在的项目中基本都用 webpack 了），竟然出现了如下错误：

Error at new JS_Parse_Error (eval at <anonymous>

控制条的报错信息如下图：

打包报错信息

百思不得其解，原来运行好好的项目，我现在也没做什么大的动作，怎么就跑步起来了呢？甚至连打包都失败了？

原因分析

由于报错信息并没有指向我们自己编写的文件，而都是指向了与 node.js相关的错误信息。于是应该可以判定：

代码本身的书写，包括语法等应该没有问题，否则应该会指向代码中具体错误。

由于经验有限，只得求助于百度、谷歌等。发现类似错误的解决方案中，中文参考资料实在是屈指可数。StackoverFlow 网站中倒是有不少大神提出与解惑相关的问题。无奈，囿于 English 水平实在有限，还是囫囵吞枣而不得其要。没办法，自己在苦思冥想罢。

打包失败代码追踪

最终发现，多半是在 JavaScript 中书写了 ES6 的代码，然后也没有采用 babel 等工具，把它转化为 ES5 的写法，就直接压缩打包了。然后，就报这样的错误了。

解决方案：很简单，把 有关 ES6 的写法全部都转化为 ES5，再打包即可。就本次案例而言，把原来 console.log中的新型语法给注释掉（或者编译掉）即可打包成功。

打包成功

心得

修复错误容易，而定位到错误的根源却着实不易。不过这正是学习的过程，这也是笃进的必然之路。

为什么看似如此简单的一个错误却很难被察觉？我想了想，与思维定式有着莫大的关系。熟悉了 ES6写法后，似乎觉得这样的写法都是自然而然的事情，而很少再去深究细挖了。直到外在的某一事物，在某一时刻撞了一下自己，才恍然意识到，哦，原来我们也是很容易被自己的思维给框住的！