ztj_05 记一次不正规的引用引发的血案

ztj_05 记一次不正规的引用引发的血案

案发情况描述: 又是阳光明媚的一天，当我开开心心码完代码，开开心心的打包时，恐怖的事件发生了(╯°Д°)╯︵┻━┻。居然打包压缩失败！！！

npm run dev都是一切OK的，只是build的时候报错了

ERROR in 8.2100be82a57e814b8258.chunk.js from UglifyJs
Unexpected token name «i», expected punc «;» [8.2100be82a57e814b8258.chunk.js:29,13]

找到错误文件，打开后发现，代码居然没有被babel转成es5。UglifyJs不支持压缩ES6语法。

//代码里的const let等ES6语法导致压缩报错
const isServer = __WEBPACK_IMPORTED_MODULE_0_vue__["default"].prototype.$isServer;
// 判断参数是否是其中之一
function oneOf (value, validList) {
    for (let i = 0; i < validList.length; i++) {
        if (value === validList[i]) {
            return true;
        }
    }
    return false;
}

开始以为是babel版本问题，瞎折腾了N个小时无果。
后来才想到可能是这段代码的源文件有问题。
用npm run dev去生成chunk文件。找到8.chunk.js.map，查查是由哪里来的代码

8.chunk.js.map

{"version":3,
"sources":[webpack:///./~/[email protected]@iview/src/utils/assist.js",
"webpack:///spin.vue",
"webpack:///report_cycle_manage.vue"
//省略。。。
]}

可以看到webpack直接去加载了node_module里的一个文件。查了下，是我在report_cycle_manage.vue文件中直接引用了。而我的babel设置是忽略node_module中的js的。

造成会直接引用node_module中的js的起因是我用的是webstrom编辑器，在html中使用组件时会自动帮你import。应该是不会引入node_module中的文件的，不知道为啥这次突然出现这个问题ヽ(｀Д´)ﾉ︵ ┻━┻ ┻━┻

report_cycle_manage.vue

import Spin from "../../../node_modules/iview/src/components/spin/spin";

把这段去掉就好了
OK 又可以愉快的去写代码了