时间戳

首页 > 解决方案 > 如何使用 webpack 添加变量构造函数的原型函数

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

问题描述

我一直在制作自己的 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 模块系统中导出预定义变量的属性。我怎样才能穿过它？

解决了

原型.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;
}

标签： javascriptwebpackecmascript-6es6-modules

解决方案

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

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

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

推荐阅读