Question

我正在尝试创建一个简单的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”加载库，这当然不存在。

对于如何继续，我一无所知。

Answer 1

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

例如，如果您的开发服务器恰好为您的示例项目提供library-name，其中可能已安装require.config({ paths: { "library-name": "/node_modules/library-name/build/index", }, });，那么您可以使用如下配置：

node_modules

我假设.js是从开发服务器建立的站点的根目录提供的。路径中缺少.js扩展名并非错误：您不会将{{1}}放在那里，因为RequireJS会添加它。

Answer 2

我想我已经得到了它，除了其他事情之外还有其他问题：RequireJS relative paths。

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

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

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

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

修改

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

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

使用TypeScript

2 个答案: