问题 带有TypeScript转换器的JSPM Bundle


我正在进入System.js和JSPM,我已经到了想要将我的TypeScript源代码捆绑到JavaScript包中的地步。

现在,我可以将生成的JavaScript代码捆绑为: jspm bundle some/source/path someDestFile.js

但是我需要先将所有的TypeScript预先构建到JavaScript和 然后 捆绑,发现自己留下了所有已编译(和分离)的JS文件。这远非理想!

我走过了jspm文档 这里,但没有找到解决方案。

为了清楚起见,我不想在我的浏览器中编译TypeScript,而是一个预编译的可靠JavaScript包。

我该怎么做呢?

附:我看到了使用TypeScript转换器安装 这里


5733
2017-07-28 22:10


起源



答案:


您可以使用JSPM构建器执行此操作。 您可以将所有打字稿文件和bundlesfx捆绑到一个文件中,配置jspm.conf.js,如下所示:

System.config({
    defaultJSExtensions: true,
    transpiler: "typescript",
    typescriptOptions: {
        "module": "amd",
        "experimentalDecorators": true
    },
    ...
    packages: {
        "app": {
            "main": "index",
            "defaultExtension": "ts",
            "meta": {
                "*.ts": {
                    "loader": "ts"
                }
            }
        }
});

然后运行:

jspm bundle-sfx src/index dist/app.js

您可以在此处查看完整的workign示例: https://github.com/b091/ts-skeleton/


9
2017-08-12 08:54



这似乎是编译。但我的进口不起作用。我将如何导入角度1.x?我试过了 import * as angular from 'angular' 和 import angular = require('angular')。两者都没用。 - Nicky
忘了我的 /// <ref...>,它现在工作得很好!感谢非常棒的示例项目,它使一些事情变得更加清晰! - Nicky


答案:


您可以使用JSPM构建器执行此操作。 您可以将所有打字稿文件和bundlesfx捆绑到一个文件中,配置jspm.conf.js,如下所示:

System.config({
    defaultJSExtensions: true,
    transpiler: "typescript",
    typescriptOptions: {
        "module": "amd",
        "experimentalDecorators": true
    },
    ...
    packages: {
        "app": {
            "main": "index",
            "defaultExtension": "ts",
            "meta": {
                "*.ts": {
                    "loader": "ts"
                }
            }
        }
});

然后运行:

jspm bundle-sfx src/index dist/app.js

您可以在此处查看完整的workign示例: https://github.com/b091/ts-skeleton/


9
2017-08-12 08:54



这似乎是编译。但我的进口不起作用。我将如何导入角度1.x?我试过了 import * as angular from 'angular' 和 import angular = require('angular')。两者都没用。 - Nicky
忘了我的 /// <ref...>,它现在工作得很好!感谢非常棒的示例项目,它使一些事情变得更加清晰! - Nicky


我相信这个问题已经过时了。我刚用JSPM 0.17.0-beta.31和plugin-typescript(https://github.com/frankwallis/plugin-typescript),“jspm bundle”确实为我预翻译了TypeScript。

“jspm bundle-sfx”现在是“jspm build”。因为最初接受的答案建议切换到现在不需要的bundle-sfx(build),我想澄清是否使用bundle或build的决定。我发现bundle对于加速开发更有用,而build可以生成一个带有更多优化的较小文件,因此您可能希望在开发期间使用bundle并在发布时使用bundle。请注意,如果在库上使用构建,则导入库的代码将无法共享其依赖项。


1
2017-11-15 16:35