如何使用 webpack 添加变量构造函数的原型函数答案

【问题标题】：How do I add prototype function of variable constructor with webpack如何使用 webpack 添加变量构造函数的原型函数
【发布时间】：2019-02-25 07:40:40
【问题描述】：

我一直在制作自己的 JS 库，我正在尝试用 webpack 重新制作它。

在我的原始文件中，我将原型函数用于变量构造函数，如下所示：

Date.prototype.fooFunc = function(e){
// return something
};
String.prototype.barFunc = function(e) {
// return something
};


var Library = function(e){
var date = new Date();

this result = date.fooFunc().barfunc();
};

变量构造函数原型函数的代码行变得很长。所以我正在尝试为原型函数制作一个单独的文件。

但我不知道如何在 JS 模块系统中导出预定义变量的属性。我怎样才能穿过它？

已解决

prototypes.js

if ( typeof Date.prototype.myFunc == undefined ) {
  var foo = new Date();
  return foo.something();
};

// no export

webpack.config.js

module.exports = (env, options) => {
  const config = {
    target: 'web',
    entry: {
      'my-library': [
        './src/prototypes.js',
        './src/index.js'
      ],
    },
    output: {
      filename: '[name].min.js',
      library: 'myLibrary',
      libraryTarget: 'var',
      libraryExport: 'default',
      path: path.resolve(__dirname, 'dist')
    },
    optimization: {
      splitChunks: {
        cacheGroups: {
          commons: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            chunks: 'all'
          }
        }
      }
    },
  }
  return config;
}

【问题讨论】：

您是否试图创建一个单独的文件只是为了向其他地方定义的对象的原型添加方法？
@BrunoFenzl NO,... 我自己的代码越来越大，这就是我决定使用 webpack 的原因。而且我没有遇到麻烦将它们更改为模块。但问题是我自己的一些函数使用了预定义对象的自定义原型函数。
预定义对象是指原生 javascript 对象还是您自己定义的其他对象？
@BrunoFenzl 我指的是浏览器中的原生对象，比如 Element、NodeList、Date、String 等。

标签： javascript webpack ecmascript-6 es6-modules

【解决方案1】：

您不需要导出原型方法。将它们添加到对象后，它们就是对象的组成部分，并且始终可以访问。

您必须在您要扩展的对象之后以及在构建过程中的其他地方使用它们之前，将该文件包含在您的原型扩展中。

如果您仅扩展 javascript 原生对象（如 Date 和 Math），请将您的扩展文件作为构建的第一个文件。

【讨论】：