Question

我是使用TypeScript和RequireJS的新手，我正在转换用Marionette / Backbone编写的大型应用程序。

我对每个ts文件中TypeScript依赖项之间的关系以及针对非AMD兼容文件的RequireJS配置填充程序中的依赖项感到困惑。使用ts文件和requirejs config shim部分中的单个文件和依赖项，我的应用程序可以正常加载。

我尝试将我的TypeScript文件编译成单个输出文件; ts转换器是否知道shim部分中定义的依赖关系？它似乎并不像我的单个输出文件没有所有必需的文件。

这是错误的做法吗？

感谢...

Answer 1

我不会尝试让TypeScript编译器执行捆绑过程。相反，我会有一个两步构建过程。

TypeScript文件为javascript。
使用r.js将所有文件捆绑并缩小为一个.js文件。

你可以在这里找到r.js的东西： http://requirejs.org/docs/optimization.html#download

Answer 2

在Mark的答案中添加了真实生活中的requireJS设置，包括垫片：

运行打字稿编译器：

tsc -p .

具有以下项目级别 tsconfig.json

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": false,
    "target": "es5",
    "outDir": "scripts/dist",
}

接下来，此r.js命令将完成此工作：

node r.js -o buildSpec.js name=src/init mainConfigFile=deps.js baseUrl=../

使用以下 deps.js

require.config({

    baseUrl: "scripts",

    // The shim config allows us to configure dependencies for
    // scripts that do not call define() to register a module
    shim: {
        'underscore': {
            exports: '_'
        },
        'jquery': {
            exports: '$'
        }
    },
    paths: {
        chartJs: '//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min',
        appRouter: 'infra/appRouter',
        paymentsHub: 'infra/paymentsHub'
    }
});

buildSpec.js：

({
    out: "../target/app-optimized.js",
    include:['someExternalModule'],
    paths: {
       jquery: 'lib/jquery/2.2.4/jquery.min'
    }
})

src / init.js：

require.config({
    urlArgs: window.siteVersion,
    waitSeconds: 20
});

require(['scripts/controller'], function () { ... });

将RequireJS填充与TypeScript混合 - 如何编译以进行生产？

2 个答案: