最近在对老项目(多老呢..可能是几年前的吧,比自己入职的时间还久>_<)进行修改。很多时候发现改代码比较简单，但是不简单的是构建问题。笔者在构建的项目是使用的gulp,发现在构建的时候遇到问题，本篇文章主要记录发现问题和解决问题的过程，提供解决构建问题的思路，希望对遇到同样问题的伙伴有所帮助
构建配置
项目中使用的构建工具gulp,gulp 是一个基于流的构建工具，可以自动执行指定的任务,想了解更多参考gulp官网。其中有一个指令是使用gulp-webpack 进行js 打包、gulp-uglify 进行压缩，具体内容如下：
gulp.task("webpack", function() {
return gulp.src("./js/index.js")
.pipe(webpack(webpackConfig))
.pipe(uglify({ mangle: false }))
.pipe(gulp.dest(path.build + "/js/"));
});
//
webpack.config.js
module.exports = {
entry:{
"index":"./js/index.js"
},
output:{
filename: "[name].js",
},
plugins: [//...]
}遇到的问题
执行指令之后发现并未顺利的在build 的文件夹中找到index.js,具体错误内容如下：
internal/streams/legacy.js:57
throw er; // Unhandled stream error in pipe.
^
Error
at new JS_Parse_Error (eval at (D:\git\study\yyb_test\node_modules\uglify-js\tools\node.js:22:1), :1526:18)
at js_error (eval at (D:\git\study\yyb_test\node_modules\uglify-js\tools\node.js:22:1), :1534:11)
at croak (eval at (D:\git\study\yyb_test\node_modules\uglify-js\tools\node.js:22:1), :2026:9)
at token_error (eval at (D:\git\study\yyb_test\node_modules\uglify-js\tools\node.js:22:1), :2034:9)
at unexpected (eval at (D:\git\study\yyb_test\node_modules\uglify-js\tools\node.js:22:1), :2040:9)
at expr_atom (eval at (D:\git\study\yyb_test\node_modules\uglify-js\tools\node.js:22:1), :2542:13)
at maybe_unary (eval at (D:\git\study\yyb_test\node_modules\uglify-js\tools\node.js:22:1), :2716:19)
at expr_ops (eval at (D:\git\study\yyb_test\node_modules\uglify-js\tools\node.js:22:1), :2751:24)
at maybe_conditional (eval at (D:\git\study\yyb_test\node_modules\uglify-js\tools\node.js:22:1), :2756 如何定位
1.输出更多的错误日志
根据错误提示是gulp 在进行代码压缩的时候报错，因此想能够输出更多的日志呢，给uglify加入错误捕获
`.pipe(uglify({ mangle: false }).on('error', function (err) { console.log( err ) }))`在进行构建后错误日志如下：
message:
'D:\\git\\study\\yyb_test\\index.js: Unexpected token: punc ())',
fileName: 'D:\\git\\study\\yyb_test\\index.js',
lineNumber: 148,
stack:
'Error\n at new JS_Parse_Error (eval at (D:\\git\\study\\yyb_test\\node_modules\\uglify-js\\tools\\node.js:22:1), :1526:18)\n at js_error (eval at (D:\\git\\study\\yyb_test\\node_modules\\uglify-js\\tools\\node.js:22:1), :1534:11)\n at croak (eval
at (D:\\git\\study\\yyb_test\\node_modules\\uglify-js\\tools\\node.js:22:1), :2026:9)\n at token_error (eval at (D:\\git\\study\\yyb_test\\node_modules\\uglify-js\\tools\\node.js:22:1), :2034:9)\n at unexpected (eval at (D:\\git\\study\\yyb_test\\node_modules\\uglify-js\\tools\\node.js:22:1), :2040:9)\n at expr_atom (eval at (D:\\git\\study\\yyb_test\\node_modules\\uglify-js\\tools\\node.js:22:1), :2542:13)\n at maybe_unary (eval at (D:\\git\\study\\yyb_test\\node_modules\\uglify-js\\tools\\node.js:22:1), :2716:19)\n at expr_ops (eval at (D:\\git\\study\\yyb_test\\node_modules\\uglify-js\\tools\\node.js:22:1), :2751:24)\n at maybe_conditional (eval at (D:\\git\\study\\yyb_test\\node_modules\\uglify-js\\tools\\node.js:22:1), :2756:20)\n at maybe_assign (eval at (D:\\git\\study\\yyb_test\\node_modules\\uglify-js\\tools\\node.js:22:1), :2780:20)',
showStack: false,
showProperties: true,
plugin: 'gulp-uglify' } 2.根据错误关键词搜索
根据关键词 Unexpected token: punc ())进行Google后发现，原来是代码中有 ES6语法。那么解决方案就是将ES6 的代码转为 ES5，那么如何定位具体的位置呢。
3.问题位置定位
在输出错误信息的时候有个lineNumer: 148，这个是什么呢。根据uglify 的原理应该是讲构建源码进行压缩，因此猜测是否是压缩代码的输入内容，因此尝试去掉uglify压缩功能。
去掉压缩功能后在bulid/index.js生成对应的文件，快速查找到最后148行后发现如下：
原来是我们自己的npm 模块中有个箭头函数。
4.解决问题
修改对应的npm 包中箭头函数语法并npm publish，更新npm 包后再构建，发现就成功了！！
[17:30:50] Starting 'webpack'...
[17:30:50] Version: webpack 1.12.14
Asset Size Chunks Chunk Names
index.js 16.5 kB 0 [emitted] index
[17:30:50] Finished 'webpack' after 328 ms总结
解决的方式虽然很简单，但是关键的是要有定位问题的能力：输出更多的错误日志，了解相关原理大胆猜测，或者使用断点调试的方式来定位问题。希望此思路能对大家解决构建问题能有所帮助，那么就在开心不过了.