[英]What does <Props, State> mean in `React.Component<Props, State>`
[英]Webpack4 in production mode, does not uglify variable names in state of a React.Component?
webpack 4不会在生产模式下更改React组件状态下的变量名称。
我尝试使用“ 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'
}
};
你可以放这样的条件
if (process.env.NODE_ENV === "production") {
this.state = {c:props.initialCount}; //execute in production time
} else {
this.state = {count: props.initialCount};
}
不幸的是,我不相信这种情况会发生。 uglifier无法知道this.state
的使用方式。 例如,您可以以动态方式对其进行索引:
this.state = {count: 8};
console.log(this.state['c' + 'ount']); // 8
即使它可以理解在组件内不会发生这种情况,您也可以这样做
somethingElse(this.state);
不管是什么somethingElse()
如果是this.state
somethingElse()
,如果其键已缩小,则可能无法在this.state
或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]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.