是否可以覆盖SystemJS配置中的映射别名

Is it possible to override map aliases in SystemJS config?

本文关键字:映射 别名 配置 SystemJS 覆盖 是否      更新时间:2023-09-26

场景

我正在使用一个具有特定名称空间的代码库。但代码库的一部分是本地的,其他几个部分是npm模块,它们都属于同一名称空间。

问题

我想知道是否可以在SystemJS配置中"覆盖"映射别名?我遇到的问题是,我想为库的本地版本声明一个基本别名,然后为npm模块声明更具体的映射别名。

尝试1

起初,我认为这可能做到:

{
    bundles: {
        'bx/google/drive': ['bx/google/drive/files', 'bx/google/drive/permissions', 'bx/google/drive/query']
    },
    map: {
        'bx/': '/src/bx',
        'bx/google/core': 'node_modules/bx.google.core/bundles/bx.google.core.js',
        'bx/google/drive': 'node_modules/bx.google.drive/bundles/bx.google.drive.js',
        'bx/google/analytics': 'node_modules/bx.google.analytics/bundles/bx.google.analytics.js',
        'typescript': 'node_modules/typescript/lib/typescript.js',
        'systemjs': 'node_modules/systemjs/dist/system.src.js'
    },
    packages: {
        bx: {
            defaultExtension: 'js'
        }
    }
}

但这只使用初始bx/别名来解析以该路径开头的任何导入,因此无法加载任何bx npm模块代码。

尝试2

我想我可以使用包映射定义所有bx"子"模块:

System.config({
    bundles: {
        'bx/google/drive': ['bx/google/drive/files', 'bx/google/drive/permissions', 'bx/google/drive/query']
    },
    map: {
        'bx': '/src/bx',
        'typescript': 'node_modules/typescript/lib/typescript.js',
        'systemjs': 'node_modules/systemjs/dist/system.src.js'
    },
    packages: {
        bx: {
            defaultExtension: 'js',
            map: {
                './google/core': 'node_modules/bx.google.core/bundles/bx.google.core.js',
                './google/drive': 'node_modules/bx.google.drive/bundles/bx.google.drive.js',
                './google/drive/files': 'node_modules/bx.google.drive/bundles/bx.google.drive.js',
                './google/drive/permissions': 'node_modules/cx.google.drive/bundles/bx.google.drive.js',
                './google/drive/query': 'node_modules/bx.google.drive/bundles/bx.google.drive.js',
                './google/analytics': 'node_modules/bx.google.analytics/bundles/bx.google.analytics.js'
            }
        }
    }
});

这会失败,但方式不同,因为在使用导入的类之前不会引发错误,因为从npm模块导入的任何bx类都是undefined。(我还必须明确定义所有的bundle导入路径)。

迄今为止的解决方案

到目前为止,我找到的唯一方法是从映射中删除bx/定义,并显式列出/src/bx/中代码的每个映射别名和包。即

{
    bundles: {
        'bx/google/drive': ['bx/google/drive/files', 'bx/google/drive/permissions', 'bx/google/drive/query']
    },
    map: {
        'bx/forms': '/src/bx/forms',
        'bx/preload': '/src/bx/preload',
        'bx/cache': '/src/bx/cache',
        /* etc */
        'bx/google/core': 'node_modules/bx.google.core/bundles/bx.google.core.js',
        'bx/google/drive': 'node_modules/bx.google.drive/bundles/bx.google.drive.js',
        'bx/google/analytics': 'node_modules/bx.google.analytics/bundles/bx.google.analytics.js',
        'typescript': 'node_modules/typescript/lib/typescript.js',
        'systemjs': 'node_modules/systemjs/dist/system.src.js'
    },
    packages: {
        'bx/forms': {
            defaultExtension: 'js'
        },
        'bx/preload': {
            defaultExtension: 'js'
        },
        'bx/cache': {
            defaultExtension: 'js'
        }
    }
}

这并不理想。

问题

因此,我想知道的是,是否可以为本地bx/代码(bx: 'src/bx')定义一个"基本"映射别名,然后用bx npm模块的更具体的映射别名来覆盖它?


**更新**

将基本bx/添加到paths消除了在maps中将所有bx路径单独列为唯一值的需要,但它们仍然需要在packages中单独列出。

{
    bundles: {
        'bx/google/drive': ['bx/google/drive/files', 'bx/google/drive/permissions', 'bx/google/drive/query']
    },
    paths: {
        'bx/': '/src/bx'
    },
    map: {
        'bx/google/core': 'node_modules/bx.google.core/bundles/bx.google.core.js',
        'bx/google/drive': 'node_modules/bx.google.drive/bundles/bx.google.drive.js',
        'bx/google/analytics': 'node_modules/bx.google.analytics/bundles/bx.google.analytics.js',
        'typescript': 'node_modules/typescript/lib/typescript.js',
        'systemjs': 'node_modules/systemjs/dist/system.src.js'
    },
    packages: {
        'bx/forms': {
            defaultExtension: 'js'
        },
        'bx/preload': {
            defaultExtension: 'js'
        },
        'bx/cache': {
            defaultExtension: 'js'
        }
    }
}

在对SystemJ有了更好的了解后,我决定重新审视这个问题,并花了很多时间尝试不同的组合来解决这个问题。

经过多次挠头之后,我令人恼火地发现尝试1只需要一个小的更改就可以工作(除非现在工作是由于systemjs更新?)

从:更改bxmap

'bx/': '/src/bx'

至:

'bx': '/src/bx',

解决了原来的问题。

{
    bundles: {
        'bx/google/drive': ['bx/google/drive/files', 'bx/google/drive/permissions', 'bx/google/drive/query']
    },
    map: {
        'bx': '/src/bx',
        'bx/google/core': 'node_modules/bx.google.core/bundles/bx.google.core.js',
        'bx/google/drive': 'node_modules/bx.google.drive/bundles/bx.google.drive.js',
        'bx/google/analytics': 'node_modules/bx.google.analytics/bundles/bx.google.analytics.js',
        'typescript': 'node_modules/typescript/lib/typescript.js',
        'systemjs': 'node_modules/systemjs/dist/system.src.js'
    },
    packages: {
        bx: {
            defaultExtension: 'js'
        }
    }
}

全局映射不与全局映射链接,但与路径链接。

您可以尝试将bx/定义为路径:

System.config({ paths: { 'bx/': 'path/to/bx/' } })

然后对属于此规则例外的单个条目使用映射配置:

System.config({ map: { 'bx/y': 'custom/location' } })