Babel.js 是否删除生产分发文件中的一些代码行?

sulc1iza  于 2022-12-08  发布在  Babel
关注(0)|答案(6)|浏览(180)

我正在使用BabelWebpackES6生成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条件会降低应用程序的速度。是否有可能使用BabelWebpack生成带有验证的开发版本和不带有这些验证的生产版本?

juud5qan

juud5qan1#

看起来其他的答案已经过时了。有了webpack 4,你可以在你的webpack配置中设置mode: 'production'
在代码中,检查开发模式,如下所示:

if (process.env.NODE_ENV === 'development') {
    if(info instanceof LogModel)
        throw new Error("not a instance of LogModel");
}

当webpack使用mode: 'production'创建包时,这些if子句中的所有代码沿着if子句本身将自动从包中删除。
没有必要显式地使用define插件(它是由webpack“幕后”使用的),也没有必要使用其他答案中提到的webpack-unassert-loaderwebpack-strip-block
看看这个小演示回购我已经做了尝试这一点:https://github.com/pahund/webpack-devprod-experiment

hsvhsicv

hsvhsicv2#

webpack-strip-block是一个很好的解决方案。它在编译时删除了生产代码中的一个代码块。

/* develblock:start */
/* develblock:end */

不限于assert,且产品中无冗余代码。

bvuwiixz

bvuwiixz3#

一个更简洁的选项是使用webpack中的define-plugin
在配置文件中:
new webpack.DefinePlugin({ __DEV: JSON.stringify(true) })
app.js:
if(__DEV){ console.log("logged only in dev env") }
webpack将在编译时提供__DEV值。

mi7gmzs6

mi7gmzs64#

您可以使用assert包强制执行代码,然后使用webpack-unassert-loaderwebpack-strip-assert剥离生产代码的Assert。

var assert = require('assert').ok;

class Logger {
    /**
     * @param {LogModel} info
     *  {LogTypes} type
     *  {String} message
     *  {Date} date
     */
    static log(info) {
        assert(info instanceof LogModel, "Param must be an instance of LogModel");
        notify(info);
    }
}
8xiog9wr

8xiog9wr5#

我创建了一个sample project来评估本主题中介绍的所有不同方法。我最喜欢的是使用string-replace-webpack-plugin

dy1byipe

dy1byipe6#

这里有一些很好的选项,但我认为我们可以做得更好。如果你想完全删除Logger.log()函数以及对它的调用,比如:

Logger.log('Remove me');

... string-replace-loader就能满足我们的需求了

安装string-replace-loader

npm install --save-dev string-replace-loader

然后,在Webpack配置中:

...
    module: {
        rules: [
            //Replace strings
            {
                test: /\.js$/,
                loader: 'string-replace-loader',
                options: {
                    multiple: [
                        //Remove calls to Logger.log()
                        {
                            search: /Logger\.log\s*\(.*?\);?\s*?\n/g,
                            replace: '\n'
                        },
                        //Remove the actual Logger.log() function. This regex may need tweaking depending on your actual code for `log()`.
                        {
                            search: /static\s*log\s*\([^}]*}/gs,
                            replace: ''
                        }
                    ]
                }
            }
        ]
    },
...

不需要添加额外的无意义的代码到实际的源代码。享受!

相关问题