你能够解构 React 组件吗?

3

我正在尝试弄清楚一个网站上的一些操作。我解开了它的Webpack捆绑包,但想知道是否有可能使用部分混淆代码、react dev扩展和一些时间来重构一个React组件。我已经找出了Webpack中一些部分的工作原理,但我找到的去捆绑工具没有产生任何结果。我尝试了debundle、reliable-debundle和debunde-v2。

Debundle v2检测到入口点,但返回的提取0个块。

示例片段如下:

    5332: function(t, e, i) {
      'use strict';
      Object.defineProperty(e, '__esModule', { value: !0 }),
        (e.default = void 0);
      var n,
        a = (function(t) {
          if (t && t.__esModule) return t;
          if (null === t || ('object' != typeof t && 'function' != typeof t))
            return { default: t };
          var e = l();
          if (e && e.has(t)) return e.get(t);
          var i = {},
            n = Object.defineProperty && Object.getOwnPropertyDescriptor;
          for (var a in t)
            if (Object.prototype.hasOwnProperty.call(t, a)) {
              var r = n ? Object.getOwnPropertyDescriptor(t, a) : null;
              r && (r.get || r.set)
                ? Object.defineProperty(i, a, r)
                : (i[a] = t[a]);
            }
          (i.default = t), e && e.set(t, i);
          return i;
        })(i(0)),
        r = o(i(8)),
        s = o(i(5409));
      function o(t) {
        return t && t.__esModule ? t : { default: t };
      }
      function l() {
        if ('function' != typeof WeakMap) return null;
        var t = new WeakMap();
        return (
          (l = function() {
            return t;
          }),
          t
        );
      }
      function h(t, e, i, a) {
        n ||
          (n =
            ('function' == typeof Symbol &&
              Symbol.for &&
              Symbol.for('react.element')) ||
            60103);
        var r = t && t.defaultProps,
          s = arguments.length - 3;
        if ((e || 0 === s || (e = { children: void 0 }), 1 === s))
          e.children = a;
        else if (s > 1) {
          for (var o = new Array(s), l = 0; l < s; l++) o[l] = arguments[l + 3];
          e.children = o;
        }
        if (e && r) for (var h in r) void 0 === e[h] && (e[h] = r[h]);
        else e || (e = r || {});
        return {
          $$typeof: n,
          type: t,
          key: void 0 === i ? null : '' + i,
          ref: null,
          props: e,
          _owner: null,
        };
      }
      function u() {
        return (u =
          Object.assign ||
          function(t) {
            for (var e = 1; e < arguments.length; e++) {
              var i = arguments[e];
              for (var n in i)
                Object.prototype.hasOwnProperty.call(i, n) && (t[n] = i[n]);
            }
            return t;
          }).apply(this, arguments);
      }
      var d = (function(t) {
        var e, i;
        function n(e) {
          var i;
          return (
            ((i = t.call(this, e) || this).unmounting = !1),
            (i.state = { loaded: !1 }),
            i.initialize(),
            i
          );
        }
        (i = t),
          ((e = n).prototype = Object.create(i.prototype)),
          (e.prototype.constructor = e),
          (e.__proto__ = i);
        var a = n.prototype;
        return (
          (a.componentDidUpdate = function(t) {
            var e = this;
            t.src !== this.props.src &&
              this.setState({ loaded: !1 }, function() {
                return e.initialize();
              });
          }),
          (a.initialize = function() {
            var t,
              e = this;
            ((t = this.props.src),
            new Promise(function(e, i) {
              null == t && i(new Error('No image src passed'));
              var n = new Image();
              (n.src = t),
                (n.onload = function() {
                  return e(n);
                }),
                (n.onerror = function(t) {
                  return i(t);
                });
            })).then(function() {
              e.unmounting || e.setState({ loaded: !0 });
            });
          }),
          (a.componentWillUnmount = function() {
            this.unmounting = !0;
          }),
          (a.render = function() {
            var t,
              e = this.props,
              i = e.className,
              n = e.src,
              a = e.alt,
              o = e.width,
              l = e.height,
              d = e.onLoad,
              c = e.style,
              f = this.state.loaded;
            return h(
              'div',
              { className: i, style: u({}, c, { width: o, height: l }) },
              void 0,
              h('img', {
                className: (0, r.default)(
                  s.default.image,
                  ((t = {}), (t[s.default.loaded] = f), t)
                ),
                width: o,
                height: l,
                src: n,
                alt: a,
                onLoad: d,
              })
            );
          }),
          n
        );
      })(a.PureComponent);
      (d.displayName = 'LazySplash'),
        (d.defaultProps = { width: 0, height: 0, alt: '' });
      var c = d;
      e.default = c;
    },

1
网站的URL是什么,你最终想要了解代码方面的知识?听起来你只是在说“我很难理解这个混淆的代码”,如果一个代码格式化工具不能让你更容易地阅读代码,那么我不知道用户在这里能做些什么来帮助你,除非提供更多信息。 - jsejcksn
这是Discord,但这是旧版本,因为它的登录页面不再具有我想要找到的React组件(波浪动画)。 - Maxim
1个回答

0
一个非常基础的解包工具,用于处理使用React Native打包器编译的Javascript捆绑包。
通过遍历编译后的AST,将大型React Native捆绑包解包,并提取单独的模块声明并将它们写入自己的模块中,同时尝试解决依赖导入关系。
      __d(function() {
  "use strict";
}, 0, []);
__d(function(v) {
  "use strict";
}, 1, [0]);

var a = "foo bar baz";

了解更多


这非常有趣,但是这个项目使用了webpack。这就只剩下reliable-debundle和其他一些工具了,但似乎都不能正常工作。 - Maxim

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接