使用TypeScript中的TypeScript库

Posted 2021-04-09

我正在尝试创建一个简单的TypeScript库并在不同的TypeScript示例项目中对其进行测试，以便我可以验证并显示该库在不同模块格式（包括AMD）下可以从TypeScript中使用。

对于库，我正在将其编译为UMD代码，将其与声明文件一起输出到“build”目录中，稍后我将从package.json文件中引用该目录。像这样：

tsconfig.json

{
    "compilerOptions": {
        "module": "umd",
        "outDir": "build",
        "declaration": true,
        ...
    },
    ...
}

的package.json

{
    "main": "build/index.js",
    "types": "build/index.d.ts",
    ...
}

值得一提的是，该库是多个文件的复合，而index.js只是将它的不同部分粘合在一起，通过单个入口点暴露它们。

现在，从其中一个示例项目中，我的目标是编译为AMD代码，并使用RequireJS来理解结果。我能够编写TypeScript代码，编译器对所有导入都很满意，编辑器（VS Code）正确地提供了自动完成功能。但是，编译后的代码不包含上面提到的库的代码，这是它的依赖项之一。在浏览器中运行代码时，RequireJS无法加载库。以下是此项目的配置方式：

tsconfig.json

{
    "compilerOptions": {
        "module": "amd",
        "outFile": "build/app.js"
    },
    ...
}

的index.html

...
    <script src="node_modules/requirejs/require.js"></script>
    <script src="build/app.js"></script>
    <script>
        require(['main'])
    </script>
...

有了这个，RequireJS正试图从“/library-name.js”加载库，这当然不存在。

关于如何继续，我很无能为力。

答案

您需要提供RequireJS配置，以便RequireJS可以找到您的库。要么是这样，要么您需要将库移动到RequireJS默认查找的位置。两者都是可能的选择。

例如，如果您的开发服务器碰巧为您的示例项目提供了node_modules，其中可能安装了library-name，那么您可以使用如下配置：

require.config({
  paths: {
    "library-name": "/node_modules/library-name/build/index",
  },
});

我假设node_modules是从您的开发服务器建立的站点的根目录提供的。在路径中缺少.js扩展并不是一个错误：你没有把.js放在那里因为RequireJS添加它。

另一答案

我想我已经得到了它，除了其他东西之外的其他问题：RequireJS relative paths。

所以基本上我必须以这种方式配置RequireJS：

require.config({
    packages: [{
        name: 'module-name',
        location: 'node_modules/module-directory/build',
        main: 'index'
    }]
})

否则，如果我只包含索引文件的路径，那么索引使用的所有相对路径都会相对于root进行解析，这非常愚蠢，但是OK ...

让我感到惊讶的一点是，TypeScript（2.6.2）编译器的baseUrl和paths选项没有帮助，实际上编译的代码完全相同，无论这些字段是否被填充（我尝试使用for它们与RequireJS帮助加载索引文件的值相同。

编辑

如果有人感兴趣，这里是SystemJS相同案例所需的配置：

SystemJS.config({
    paths: {
        'module-name': 'node_modules/module-directory/build/index'
    },
    packages: {
        '': {
            defaultExtension: 'js'
        }
    }
})