6.12.1-1 • Published 2 years ago
system-ts v6.12.1-1
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 的差别
- 使用 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; // 可以通过这个变量查看
- 不建议使用赋值的方式改变 SystemJS 来实现功能,这些操作太原始,太容易出错了。
现在这个阶段 System-ts 项目尚未找到合适的插件方式来实现,你可以使用覆盖方式。但是不建议使用,我们修改了 System 内部的实现,所以可能会与某些功能冲突。
- 未实现 Module Types 特性
原因是这些特性好似将会有一个提案进行解决,并且这些将不同的文件分化为 JS 运行时的功能可以统称为 Loader,使用不同的 Loader 进行加载,原来 SystemJS 的混合插件机制不适合进行这种大型改造。
- 直接删去了 Systemjs 在下一个大版本将会删除的内容
这些内容大多将不会被继续支持,并且也没有多大的使用空间,故直接删除了。
- 在 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);
}
);
- 在 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