使用TypeScript中的TypeScript库

问题描述 投票:0回答:2

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

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

typescript requirejs amd typescript-typings
2个回答
2
投票

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

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

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

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


0
投票

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

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

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

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

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

编辑

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

SystemJS.config({
    paths: {
        'module-name': 'node_modules/module-directory/build/index'
    },
    packages: {
        '': {
            defaultExtension: 'js'
        }
    }
})
© www.soinside.com 2019 - 2024. All rights reserved.