使用Webpack库和libraryTarget配置通过全局变量设置我们的自定义库

Use Webpack library and libraryTarget configuration to set our custom library via global var

本文关键字:我们 设置 自定义 全局变量 库和 Webpack libraryTarget 配置 使用      更新时间:2023-09-26

我有一个库"xyz",它目前正作为节点模块通过npm注册表导入。

现在,我想将它添加为库,并通过全局名称"abc"公开它。

我想使用webpack配置来实现这一点。

所以,我知道这是我需要添加到我的webpack配置中的配置?:

 "output": {
        "path": SHELL_PATH + filePath.dist,
        "libraryTarget": "var",
        "library": "abc"
    }

但是,如何将abc链接到xyz库,以便通过全局名称"abc"公开abc库中的方法?

我还需要做什么?

一个选项可以只是将xyz封装在abc库中,并将abc库公开为全局变量。

webpack.config.js

module.exports = {
  entry: './index.js',
  output: {
    libraryTarget: 'var',
    library: 'abc',
    path: './dist',
    filename: 'abc.js'
  }
};

index.js

module.exports = {
  xyz: require('xyz')
};

如果要通过abc.xyz或访问xyz字段

module.exports = require('xyz');

如果要直接通过abc导出xyz字段。