Unexpected token: name (hook)：loader中同时设置include与exclude引发的血案

背景

某日，项目中jenkins构建之后，构建输出中显示有错误，输出如下

ERROR in static/js/hotTemplateManage.1bbbc115c41b7f7ccd26.js from UglifyJs
Unexpected token: name (hook) [static/js/hotTemplateManage.1bbbc115c41b7f7ccd26.js:17404,8]

ERROR in static/js/templateManage.e90b3eb370ff27ea8d3c.js from UglifyJs
Unexpected token: name (hook) [static/js/templateManage.e90b3eb370ff27ea8d3c.js:17404,8]

分析

从输出上看，是UglifyJs报错了, 还是语法错误

先找打包后的代码看看 dist/static/js/hotTemplateManage.1bbbc115c41b7f7ccd26.js 第17404行

    let hook; // 就是这行报错
    if (moduleIdentifier) {
        // server build
        hook = function (context) {
            // 2.3 injection
            context =
                context || // cached call
                    (this.$vnode && this.$vnode.ssrContext) || // stateful
                    (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
            // 2.2 with runInNewContext: true
            if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
                context = __VUE_SSR_CONTEXT__;
            }
            // inject component styles
            if (style) {
                style.call(this, createInjectorSSR(context));
            }
            // register component module identifier for async chunk inference
            if (context && context._registeredComponents) {
                context._registeredComponents.add(moduleIdentifier);
            }
        };
        // used by ssr in case component is cached and beforeCreate
        // never gets called
        options._ssrRegister = hook;
    }
    else if (style) {
        hook = shadowMode
            ? function (context) {
                style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
            }
            : function (context) {
                style.call(this, createInjector(context));
            };
    }
    if (hook) {
        if (options.functional) {
            // register for functional component in vue file
            const originalRender = options.render;
            options.render = function renderWithStyleInjection(h, context) {
                hook.call(context);
                return originalRender(h, context);
            };
        }
        else {
            // inject component registration as beforeCreate hook
            const existing = options.beforeCreate;
            options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
        }
    }
    return script;
}

/* script */
const __vue_script__ = script;
/* template */
var __vue_render__ = function() {
  var _obj, _obj$1;
  var _vm = this;
  var _h = _vm.$createElement;
  var _c = _vm._self._c || _h;
  return _c(
    "div",
    {
      directives: [
        {
          name: "observe-visibility",
          rawName: "v-observe-visibility",
          value: _vm.handleVisibilityChange,
          expression: "handleVisibilityChange"
        }
      ],
      staticClass: "vue-recycle-scroller",
      class:
        ((_obj = {
          ready: _vm.ready,
          "page-mode": _vm.pageMode
        }),
        (_obj["direction-" + _vm.direction] = true),
        _obj),
      on: {
        "&scroll": function($event) {
          return _vm.handleScroll($event)
        }
      }
    },
    [
      _vm.$slots.before
        ? _c(
            "div",
            { staticClass: "vue-recycle-scroller__slot" },
            [_vm._t("before")],
            2
          )
        : _vm._e(),
      _vm._v(" "),
      _c(
        "div",
        {
          ref: "wrapper",
          staticClass: "vue-recycle-scroller__item-wrapper",
          style:
            ((_obj$1 = {}),
            (_obj$1[_vm.direction === "vertical" ? "minHeight" : "minWidth"] =
              _vm.totalSize + "px"),
            _obj$1)
        },
        _vm._l(_vm.pool, function(view) {

代码可以看出：

• 1 不是开发者写的代码，更像是某个包打包后的代码

• 2 项目中有配置babel-loader, 为啥这里的 let未转换为 var，推测是不是babel打包有什么问题

• 3 对比其他打包后的js发现，UglifyJs报错之后 hotTemplateManage.js 和 templateManage.js 均未压缩，其他未报错的js中 let 均转换为 var，看来babel语法转换没问题

• 4 从未压缩js上下文中，看到有调用 vue-recycle-scroller__item-wrapper这样一个样式类，查到这个样式类是vue-virtual-scroller这个包运行时给节点添加的

• 5 于是在 node_modules/vue-virtual-scroller/dist/vue-virtual-scroller.umd.js中找到了，跟上述代码一模一样的代码，确定问题出在这个包中，这个包中的代码 let语法并未转换为var

综合以上

A => babel语法转换没问题, babel的本身配置没问题

B => 打包有问题

C => 问题出在 node_modules/vue-virtual-scroller 这个包的代码上

解决问题

既然是因为node_modules/vue-virtual-scroller的let语法并未转换为var, 那直接把这个包纳入babel-loader打包范围应该就好了

• 1 先找babel-loader配置

{
    test: /\.js$/,
    use: isProduction ? {
        loader: 'babel-loader',
        options: {
            cacheDirectory: true
        }
    } : [{
        loader: 'cache-loader',
        options: {
            cacheDirectory: resolve('.cache-loader')
        }
    }, {
        loader: 'babel-loader',
        options: {
            cacheDirectory: true
        }
    }],
    include: [
        resolve('/node_modules/vue-virtual-scroller'),
        resolve('/node_modules/css-vars-ponyfill'),
        isProduction ? resolve('/node_modules/highlight.js') : [],
        resolve('src')
    ],
    exclude: /(node_modules\/(?!vue-virtual-scroller))|(node_modules\/(?!css-vars-ponyfill))|(node_modules\/(?!highlight.js))/
}

可以发现其实include已经包含了vue-virtual-scroller，但是 exclude中也配置了/node_modules/vue-virtual-scroller，此时exclude的优先级比include的优先级高，故打包时/node_modules/vue-virtual-scroller是不会被babel-loader处理的。

解决方式

直接干掉exclude配置就好

{
    test: /\.js$/,
    use: isProduction ? {
        loader: 'babel-loader',
        options: {
            cacheDirectory: true
        }
    } : [{
        loader: 'cache-loader',
        options: {
            cacheDirectory: resolve('.cache-loader')
        }
    }, {
        loader: 'babel-loader',
        options: {
            cacheDirectory: true
        }
    }],
    include: [
        resolve('/node_modules/vue-virtual-scroller'),
        resolve('/node_modules/css-vars-ponyfill'),
        isProduction ? resolve('/node_modules/highlight.js') : [],
        resolve('src')
    ],
    //exclude: /(node_modules\/(?!vue-virtual-scroller))|(node_modules\/(?!css-vars-ponyfill))|(node_modules\/(?!highlight.js))/
}

最后npm run build 错误圆满解决

【注】若引用，请注明出处哈，版权我所有哈