Webpack4 в производственном режиме, не изменяет имена переменных в состоянии React.Component? - PullRequest
Новая
       12

Webpack4 в производственном режиме, не изменяет имена переменных в состоянии React.Component?

0 голосов
/ 27 июня 2019

Переменные имена в состоянии реагирующего компонента не будут изменены в производственном режиме веб-пакетом 4.

Я пытаюсь "uglifyjs-webpack-plugin": "^ 2.1.3", но это не имеет значения.

Например, 

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: props.initialCount};
  }
  // ...
}

Я хочу в производстве, название штата count было безобразно. Я ожидаю что-то вроде 

this.state = {c:props.initialCount};

webpack.config.js выглядит следующим образом, // загружаем пакеты 

const path = require('path');
const webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

// определить путь 

const STATIC_DIR = path.resolve(__dirname,
    'static',
    'app', 'js');
const SOURCE_DIR = path.resolve(STATIC_DIR, 'src');

module.exports = {
    mode: "production",
    devtool: 'source-map',

// определить запись 

    entry: {
        plugin: path.resolve(SOURCE_DIR, 'index.js')
    },

// определить вывод 

    output: {
        filename: '[name]-2.4.0.js',
        path: STATIC_DIR
    },

Вот важная часть, 

    module: {
        rules: [
            {
                test: /\.jsx?/,
                include: SOURCE_DIR,
                use: {
                    loader: 'babel-loader',
                    options: {
                        // compact: false,
                        // presets: ["es2015", "react"],
                        plugins: ['transform-class-properties']
                    }
                }
            }
        ]
    },
    externals: {
        jquery: 'jQuery'
    }
};

Ответы [ 2 ]

1 голос
/ 27 июня 2019

К сожалению, я не верю, что это произойдет. Uglifier не может знать, как используется this.state и. Например, вы можете индексировать его динамически: 

this.state = {count: 8};
console.log(this.state['c' + 'ount']);  // 8

Даже если бы он мог понять, что внутри компонента этого не произойдет, вы могли бы сделать 

somethingElse(this.state);

и что бы там ни было somethingElse(), он, вероятно, не смог бы сделать головы или хвосты this.state, если его ключи были минимизированы.

Я не рекомендую этого, но один из способов сделать это окольным путем - использовать строковые переменные для ключей и имена вычисляемых свойств - 

const COUNT_KEY = (process.env.NODE_ENV === "production" ? 'c' : 'count');
this.state = {[COUNT_KEY]: 8};
console.log(this.state[COUNT_KEY]);

, который может быть увеличен, например, до это в производстве: 

const t = "c";
this.state = {[t]: 8};
console.log(this.state[t]);
1 голос
/ 27 июня 2019

вы можете поставить условие вот так 

if (process.env.NODE_ENV === "production") {
    this.state = {c:props.initialCount};     //execute in production time
} else {
    this.state = {count: props.initialCount};
}
...