时间戳

首页 > 解决方案 > 为什么我的脚本仅在缩小后才抛出“无法重新定义属性：i”错误？

javascript - 为什么我的脚本仅在缩小后才抛出“无法重新定义属性：i”错误？

问题描述

我有一个脚本，可以向对象添加方法，以便将所有内容干净地保存在一个地方。这适用于未缩小的 js，但一旦缩小它就会中断，我不知道为什么。有没有人有这方面的经验，可以指导我找到解决方案？为什么我的脚本仅在缩小后才抛出“无法重新定义属性：i”错误？

策略.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 的回答进行更新

策略.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;

标签： javascriptwebpackbabeljsminifydefineproperty

解决方案

通常，除了调试目的之外，依赖函数名称是一个坏主意。缩小器和其他工具经常重命名变量和函数，以实现其使代码更小的目标。这会导致fn.name返回一个不同的值，所以如果你在其他地方硬编码了那个名字，而缩小器可能不会改变它，或者把它改成别的东西，你的代码就会中断。

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

Strategy.registerStrategy('strategy2', strategy2);

然后你可以潜在地概括它并利用 ES6 对象速记语法：

Strategy.registerStrategies({ strategy2 });

并具有该功能

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

推荐阅读