Question

我正在使用Babel和Webpack从ES5生成ES6代码。有一些验证用于减少我在编码时所犯的错误。

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类的实例。这只是为了防止错误。我不希望如果条件在生产中，因为太多，如果条件会减慢应用程序。是否可以使用验证和生产版本生成开发版本，而不使用Babel和Webpack进行验证？

Answer 1

其他答案似乎已过时。使用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-loader或webpack-strip-block之类的东西。

查看我制作的这个小样例回购尝试：https://github.com/pahund/webpack-devprod-experiment

Answer 2

清洁选项将使用来自webpack的define-plugin。

在配置文件中：

new webpack.DefinePlugin({ __DEV: JSON.stringify(true) })

app.js：

if(__DEV){ console.log("logged only in dev env") }

值__DEV将由webpack在编译时提供。

Answer 3

您可以使用assert包来强制执行代码，然后使用webpack-unassert-loader或webpack-strip-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);
    }
}

Answer 4

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

const xMap = MapFactory({
  mySize: function() {return `Hi. My size is currently ${this.size}`}
});
const myMap = xMap.Create();
console.log(myMap.mySize());
console.log("setting [5, \"five\"]")
myMap.set(5, "five");
console.log(myMap.mySize());
console.log(myMap.entries().next().value);

function MapFactory(extensions = {}) {
  const proto = new Map;
  const mappings = Object.getOwnPropertyNames(Map.prototype)
    .reduce( (reduced, key) => { 
      if (proto[key].constructor !== Function) {
        reduced.localProps.push(key);
      } else {
        reduced.proto[key] = function (...args) { return this.map[key](...args); };
      }
      return reduced;
    },
    { localProps: [], proto: {} }
  );
  const XMap = function (map) {
      this.map = map;
      mappings.localProps.forEach( prop =>
        Object.defineProperty(this, prop, { get() {return this.map[prop]; }}) 
      );
  };
  XMap.prototype = {...mappings.proto, ...extensions};
  return { Create: (map = new Map) => new XMap(map) };
}

不仅限于/* develblock:start */ /* develblock:end */，并且产品中没有多余的代码。

Answer 5

我创建了一个sample project来评估该线程中解释的所有不同方法。我最喜欢的是使用string-replace-webpack-plugin。

删除生产分发文件中的一些代码行？

5 个答案: