为什么我的脚本仅在缩小后才抛出 'Cannot redefine property: i' 错误？

Question

我有一个脚本，可以将方法添加到一个对象，以便将所有内容干净利落地放在一个地方。这适用于未缩小的 js，但一旦缩小它就会中断，我不知道为什么。有没有人有这方面的经验，可以指导我找到解决方案？为什么我的脚本仅在缩小后才抛出 'Cannot redefine property: i' 错误？

Strategy.js

const Strategy = {};

Object.defineProperty(Strategy, 'map', { value: new Map() });

Object.defineProperty(Strategy, 'registerStrategy', {
  value: function registerStrategy(fn) {
    if (fn.name) {
      this.map.set(fn.name, fn);
      return Object.defineProperty(Strategy, fn.name, { value: fn });
    }

    return false;
  },
});

export default Strategy;

策略-1.js

import Strategy from '../strategy';

export function strategy1(param) {
    return param + ' this is strategy 1.';
}

Strategy.registerStrategy(strategy1);

策略-2.js

import Strategy from '../strategy';

export function strategy2(param) {
    return param + ' this is strategy 2.';
}

Strategy.registerStrategy(strategy2);

webpack.config.js

import path from 'path';

const webpackConfig = {
    module: {
        rules: [
            {
                test: /\.js$/,
                use: [{
                        loader: 'babel-loader',
                        options: {
                            presets: ['env'],
                        },
                    }],
            },
        ],
    },
    mode: 'development',
    watch,
    devtool: 'source-map',
    entry: './src/js/main.js',
    output: {
        filename: 'app.js',
        path: path.resolve(__dirname, './dist/'),
    },
};

export default webpackConfig;

根据 loganfsmyth 的回答更新

Strategy.js

const Strategy = {};

Object.defineProperty(Strategy, 'map', { value: new Map() });

Object.defineProperty(Strategy, 'registerStrategy', {
  value: function registerStrategy(fnName, fn) {
    if (fnName) {
      this.map.set(fnName, fn);
      return Object.defineProperty(Strategy, fnName, {
        value: fn,
        writable: true,
        configurable: false,
      });
    }

    return false;
  },
});

Strategy.registerStrategies = (strats) => {
  Object.keys(strats).forEach((name) => {
    Strategy.registerStrategy(name, strats[name]);
  });
};

export default Strategy;

Answer 1

通常，除了调试目的之外的任何事情都依赖函数名是一个坏主意。 Minifiers 和其他工具经常重命名变量和函数以实现其使代码更小的目标。这会导致 fn.name 返回不同的值，因此如果您在其他地方对该名称进行硬编码，而 minifier 可能不会更改它，或者将其更改为其他内容，您的代码将会中断。

对于像您这样的情况，我通常希望函数为：

Strategy.registerStrategy('strategy2', strategy2);

然后您可以潜在地概括它并利用 ES6 对象 shorthand 语法：

Strategy.registerStrategies({ strategy2 });

并使该功能成为

Strategy.registerStrategies = function(strats) {
  Object.keys(strats).forEach(name => {
    Strategy.registerStrategy(name, strats[name]);
  });
};

为什么我的脚本仅在缩小后才抛出 'Cannot redefine property: i' 错误？

Why does my script throw 'Cannot redefine property: i' Error only after minifying?

javascript

minify

defineproperty

webpack

babeljs