我正在使用Babel
和Webpack
从ES6
生成ES5
代码。有一些验证用于减少我在编码时犯的错误。
class Logger {
/**
* @param {LogModel} info
* {LogTypes} type
* {String} message
* {Date} date
*/
static log(info) {
if(info instanceof LogModel)
throw new Error("not a instance of LogModel");
notify(info);
}
}
在log
函数中,我验证参数是否是LogModel
类的示例。这只是为了防止错误。我不希望if条件出现在生产中,因为太多的if条件会降低应用程序的速度。是否有可能使用Babel
和Webpack
生成带有验证的开发版本和不带有这些验证的生产版本?
6条答案
按热度按时间juud5qan1#
看起来其他的答案已经过时了。有了webpack 4,你可以在你的webpack配置中设置
mode: 'production'
。在代码中,检查开发模式,如下所示:
当webpack使用
mode: 'production'
创建包时,这些if子句中的所有代码沿着if子句本身将自动从包中删除。没有必要显式地使用define插件(它是由webpack“幕后”使用的),也没有必要使用其他答案中提到的
webpack-unassert-loader
或webpack-strip-block
。看看这个小演示回购我已经做了尝试这一点:https://github.com/pahund/webpack-devprod-experiment
hsvhsicv2#
webpack-strip-block是一个很好的解决方案。它在编译时删除了生产代码中的一个代码块。
不限于
assert
,且产品中无冗余代码。bvuwiixz3#
一个更简洁的选项是使用webpack中的define-plugin。
在配置文件中:
new webpack.DefinePlugin({ __DEV: JSON.stringify(true) })
app.js:
if(__DEV){ console.log("logged only in dev env") }
webpack将在编译时提供
__DEV
值。mi7gmzs64#
您可以使用assert包强制执行代码,然后使用webpack-unassert-loader或webpack-strip-assert剥离生产代码的Assert。
8xiog9wr5#
我创建了一个sample project来评估本主题中介绍的所有不同方法。我最喜欢的是使用string-replace-webpack-plugin。
dy1byipe6#
这里有一些很好的选项,但我认为我们可以做得更好。如果你想完全删除
Logger.log()
函数以及对它的调用,比如:... string-replace-loader就能满足我们的需求了
安装
string-replace-loader
:然后,在Webpack配置中:
不需要添加额外的无意义的代码到实际的源代码。享受!