为什么加载组件代码的时候要获取返回值？

[timongh]

@the1812

我之前修改过加载组件的代码。之前我写的是

const exports = {}
eval(code)
return Object.values(exports)[0]

之后被修改成了

const exports = {}
let result = eval(code)
const values = Object.values(exports)
if (values.length === 0 && typeof result === 'object') {
    return result
}
return values[0]

其实我没理解为什么要检查这个返回值。我看过 webpack 文档，umd 格式打包出来是类似这个样子：

(function webpackUniversalModuleDefinition(root, factory) {
  if (typeof exports === 'object' && typeof module === 'object')
    module.exports = factory();
  else if (typeof define === 'function' && define.amd) define([], factory);
  else if (typeof exports === 'object') exports['MyLibrary'] = factory();
  else root['MyLibrary'] = factory();
})(global, function () {
  return _entry_return_;
});

看起来有 exports 就足够了，并不需要返回值，而且也不会产生返回值。

难道除了组件、插件，这段代码还会用来加载其他东西吗？

[the1812]

主要用于非 webpack 打包的产物, 方便手写一小段简单的 JS. (比如快速实现一些很个人化的需求)

例如下面这段代码就可以直接解析并安装为一个样式:

({
  name: 'simplifyComments.noZIndexModify',
  displayName: '简化评论区层级调整',
  style: `
.v-wrap #comment#comment {
  z-index: unset !important;
}
.l-con .tag-channel-pane.tag-channel-pane {
  z-index: unset !important;
}
  `,
})