System TS

System TS 是 Systemjs 的 Typescript 重写版本，使用模块化语法去除了全局变量的引用，并通过模块导出方便了直接使用。同时，依据 Typescript 的代码提示可以得到非常好的体验。

该版本已经通过了 官方的文件测试，支持的功能都是可以使用的。部分原有的 SystemJS 功能请参考 这里

简单使用

npm install system-js

import { SystemJS } from "system-ts";

const system = new SystemJS();
globalThis.System = system; // systemjs 模块需要全局变量的支持，但是这里可以由开发者决定植入

与 Systemjs 的差别

1. 使用 SystemJS 内部进行 imports-map 管理，而不是依靠 DOM。

我在使用过程中发现， Worker 中是不支持 imports-map 中的裸模块声明的，但是既然都使用了 SystemJS 作为模块了，那就直接统一线程上的裸模块导入方案好了。 但是我将 SystemJS 自动识别 Script 标签导入的 importMap 的特性删除了，原因是这一部分应该由开发者决定更新的时机。

// 详细使用方式请参阅 Can I Use

const importMap = {};

const root = location.href; // 注意：如果你想要在 Worker 中使用，location 是不同于主线程的
System.applyImportMap(importMap); // apply 是覆盖，而 extend 是在原始基础上融合，不推荐 apply
System.extendImportMap(importMap, map);
System.importMap; // 可以通过这个变量查看

2. 不建议使用赋值的方式改变 SystemJS 来实现功能，这些操作太原始，太容易出错了。

现在这个阶段 System-ts 项目尚未找到合适的插件方式来实现，你可以使用覆盖方式。但是不建议使用，我们修改了 System 内部的实现，所以可能会与某些功能冲突。

3. 未实现 Module Types 特性

原因是这些特性好似将会有一个提案进行解决，并且这些将不同的文件分化为 JS 运行时的功能可以统称为 Loader，使用不同的 Loader 进行加载，原来 SystemJS 的混合插件机制不适合进行这种大型改造。

4. 直接删去了 Systemjs 在下一个大版本将会删除的内容

这些内容大多将不会被继续支持，并且也没有多大的使用空间，故直接删除了。

5. 在 Classic Worker 中也可以使用

虽然我们将 SystemJS 进行了 Typescript 模块化，但是在 Classic Worker 中 需要 iife 的全局声明，不支持 module。

那我们就可以使用 umd 版本了。Module Worker 和 ESM 是一样的，不再重复说明。

importScripts("https://cdn.jsdelivr.net/npm/system-ts/dist/umd/s.js");
globalThis.System = new SystemJS.SystemJS(); // 对的，umd 将内容封装在 SystemJS 中，你需要多访问一层
System.import("../fixtures/register-modules/es6-withdep.js").then(
    function (m) {
        postMessage({
            p: m.p,
        });
    },
    function (err) {
        console.error(err);
    }
);

6. 在 Nodejs 端也可以使用

import { SystemJS } from "system-ts";
import fetch, { Response } from "node-fetch";
import path from "path";
import { pathToFileURL } from "url";

global.System = new SystemJS();

// 重置 baseUrl 为磁盘地址，这样访问才是正确的
System.setBaseUrl(pathToFileURL(process.cwd() + "/").href);

// Nodejs 端 没有 fetch，可以使用 node-fetch
System.fetch = async function (url, options) {
    if (url.startsWith("file://")) {
        return fs.readFile(url.replace("file://", ""), "utf-8").then((res) => {
            return new Response(res, {
                headers: {
                    "content-type": "text/javascript",
                },
            });
        });
    } else {
        return fetch.call(this, url, options);
    }
};

License

MIT License