我可以控制函数内联吗？ Babel 导致 "Cannot access [variable] before initialization"

Question

Babel 导致我出现“无法在初始化前访问 [variable]”错误，这是由 babel 如何转译以下两个函数引起的：

function dangerousStyleValue(name: string, value: Value) {
  if (value == null || typeof value === 'boolean' || value === '') return ''
  if (
    typeof value === 'number' &&
    value !== 0 &&
    !isCustomPropRE.test(name) &&
    !(isUnitlessNumber.hasOwnProperty(name) && isUnitlessNumber[name])
  )
    return value + 'px'
  // Presumes implicit 'px' suffix for unitless numbers
  return ('' + value).trim()
}

export function applyAnimatedValues(instance: Instance, props: Lookup) {
  if (!instance.nodeType || !instance.setAttribute) {
    return false
  }

  const isFilterElement =
    instance.nodeName === 'filter' ||
    (instance.parentNode && instance.parentNode.nodeName === 'filter')

  const { style, children, scrollTop, scrollLeft, ...attributes } = props!

  const values = Object.values(attributes)
  const names = Object.keys(attributes).map(name =>
    isFilterElement || instance.hasAttribute(name)
      ? name
      : attributeCache[name] ||
        (attributeCache[name] = name.replace(
          /([A-Z])/g,
          // Attributes are written in dash case
          n => '-' + n.toLowerCase()
        ))
  )

  if (children !== void 0) {
    instance.textContent = children
  }

  // Apply CSS styles
  for (let name in style) {
    if (style.hasOwnProperty(name)) {
      const value = dangerousStyleValue(name, style[name])
      if (name === 'float') name = 'cssFloat'
      else if (isCustomPropRE.test(name)) {
        instance.style.setProperty(name, value)
      } else {
        instance.style[name] = value
      }
    }
  }

  // Apply DOM attributes
  names.forEach((name, i) => {
    instance.setAttribute(name, values[i])
  })

  if (scrollTop !== void 0) {
    instance.scrollTop = scrollTop
  }
  if (scrollLeft !== void 0) {
    instance.scrollLeft = scrollLeft
  }
}

转译后的输出是：

applyAnimatedValues: function(e, t) {
        if (!e.nodeType || !e.setAttribute) return !1;
        const n = "filter" === e.nodeName || e.parentNode && "filter" === e.parentNode.nodeName,
            r = t,
            {
                style: o,
                children: i,
                scrollTop: a,
                scrollLeft: d
            } = r,
            p = u(r, s),
            h = Object.values(p),
            v = Object.keys(p).map(t => n || e.hasAttribute(t) ? t : c[t] || (c[t] = t.replace(/([A-Z])/g, e => "-" + e.toLowerCase())));
        void 0 !== i && (e.textContent = i);
        for (let u in o)
            if (o.hasOwnProperty(u)) {
                const t = null == (t = o[u = u]) || "boolean" === typeof t || "" === t ? "" : "number" !== typeof t || 0 === t || l.test(u) || f.hasOwnProperty(u) && f[u] ? ("" + t).trim() : t + "px";
                "float" === u ? u = "cssFloat" : l.test(u) ? e.style.setProperty(u, t) : e.style[u] = t
            }
        var m, g;
        v.forEach((t, n) => {
            e.setAttribute(t, h[n])
        }), void 0 !== a && (e.scrollTop = a), void 0 !== d && (e.scrollLeft = d)

我收到此错误：

据我所知，它来自 dangerousStyleValue 函数的内联版本：

const t = null == (t = o[u = u]) || "boolean" === typeof t || "" === t ? "" : "number" !== typeof t || 0 === t || l.test(u) || f.hasOwnProperty(u) && f[u] ? ("" + t).trim() : t + "px";
                "float" === u ? u = "cssFloat" : l.test(u) ? e.style.setProperty(u, t) : e.style[u] = t

我认为这是由我的 babel 配置引起的，即：

{
    const babelLoader = environment.loaders.get('babel');
    const babelLoaderUsed = babelLoader.use.find(
      (el) => el.loader === 'babel-loader'
    );

    babelLoader.test = /\.(js|jsx|ts|tsx)?(\.erb)?$/;

    babelLoader.exclude = /node_modules\/(?!(recoil)\/).*/;
    babelLoaderUsed.options = merge({}, babelLoaderUsed.options, {
      presets: [
        [
          '@babel/preset-env',
          {
            modules: false,
            targets: {
              browsers: ['> 1%', 'IE 11']
            },
            forceAllTransforms: true,
            useBuiltIns: 'entry',
            corejs: {
              version: 2,
              proposals: true
            }
          }
        ],
        '@babel/preset-react',
        '@babel/preset-typescript'
      ],
      plugins: [
        '@babel/plugin-transform-typescript',
        '@babel/plugin-syntax-dynamic-import',
        '@babel/plugin-proposal-object-rest-spread',
        '@babel/plugin-transform-modules-commonjs',
        [
          '@babel/plugin-proposal-class-properties',
          {
            spec: true
          }
        ],
        [
          'module-resolver',
          {
            root: ['./app'],
            alias: {
              assets: './assets'
            }
          }
        ],
        '@babel/plugin-syntax-import-meta',
        '@babel/plugin-proposal-json-strings',
        [
          '@babel/plugin-proposal-decorators',
          {
            legacy: true
          }
        ],
        '@babel/plugin-proposal-function-sent',
        '@babel/plugin-proposal-export-namespace-from',
        '@babel/plugin-proposal-numeric-separator',
        '@babel/plugin-proposal-throw-expressions'
      ]
    });
  }

我不知道我需要更改什么设置才能修复函数的内联方式（或在必要时禁用内联）。我仍然需要支持IE11，这很重要。

Answer 1

我终于想通了，它来自uglifyjs。我关闭了内联，问题就解决了。

我可以控制函数内联吗？ Babel 导致 "Cannot access [variable] before initialization"

Can I control function inlining? Babel is causing "Cannot access [variable] before initialization"

javascript

babeljs

react-spring