打字稿模块成单JS文件？

Question

好的，我完全迷失了。我刚开始在Grunt JS中使用Typescript并需要一些帮助。

我有一个运行我的TS的Grunt文件，然后是一个用于站点就绪文件的uglify进程，这里是配置：

  ts: {
        default: {
            files: {
                '/js/builds/main.js': ['/typescript/main/build.ts'],
                '/js/builds/public.js': ['/typescript/public/build.ts']
            }
        },
        options: {
            target: 'ES5',
            fast: 'never',
            sourceMap: false,
            allowJs: true,
            declaration: false,
            module: 'amd'
        },
    },

    'uglify': {
        options: {
            preserveComments: 'some',
        },
        my_target: {
            files: {
               'src/js/main.js': ['/js/builds/main.js'],
               'src/js/public.js': ['/js/builds/public.js']
            }
        }
    }, 

    watch: {
        'JS': {
            files: [
                   '/js/**/*.js',
                   '/typescript/**/*.ts', 
                   '/typescript/**/**/*.ts'
                ],
            tasks: ['ts', 'uglify'],
            options: {
                spawn: false,
            },
        }
    }

所以现在我正在处理我的Typescript文件，但是我有很多问题，我想使用Typescript作为模块系统但输出到单个文件，现在它设置为AMD，这需要需要JS，我不要知道。

现在我没有时间学习Typescript和Require JS。那么我现在在哪里，

test.js:

export class testMe {
    constructor() { }

    LogingData() {
       console.log( 'Data being logged...' );
    }
}

然后在我的构建ts文件中，

import {testMe} from "./clients/clients"; 

但是，这需要JS或模块加载系统才能运行它？我已经尝试过使用commonJs，但似乎支持那些在Typescript 1.8中删除了（我使用的是2.0）。

那么如何在使用Typescript模块的同时将我的Grunt / Typescript编入单个标准ES5编译代码？

非常感谢

UPDATE

这个问题和答案，Typescript compile to single file没有给出如何设置grunt将Typescript用于单个文件的答案！此外，答案还指出，Typescript 1.8+将解决这个问题 - 但我使用的版本却没有。

我正在使用Grunt将TS代码编译成一个标准的javascript文件，而不使用System或Require JS。所以我可以在我的HTML代码中使用它。

最终目标是拥有两个单一文件。为了解释我有两个部分的单个.ts文件，一个主要的和另一个公共的 - 我没有在公共部分工作，只是主要部分，所以我所有的测试都在那个部分。

所以要布局我的文件/文件夹路径：

    js/
      builds/
          main.js < targer end file
          public.js <- target end file

    typescript
      main/
         settings/
              classA.ts
              somethingelse.ts
         othersection/
               something.ts
      buildMain.ts <- *1

* 1此文件然后通过导入获取所有ts文件（不确定这是否正确）然后构建完整的标准单个.js文件。

我希望能更详细地解释我的查询。

谢谢

更新2：

我想补充一点，我收到一个文件，例如main.js，但这不是一个标准的Javascript编译文件。我不想使用Require JS或任何其他外部模块加载系统。

我想使用外部.ts文件将模块导入到“构建”文件中，并将该文件编译成标准的自包含javascript文件，而不需要包含require js或其他任何内容。

希望能更清楚一点......

谢谢。

Answer 1

如果您不打扰.d.ts文件，您只需使用--module=commonjs（它将被支持）将每个文件编译为.js，然后browserify将所有模块连接在一起。

我使用的是CLI脚本而不是grunt，但它的作用应该很明显：

$ ./node_modules/.bin/tsc --module commonjs main.ts
$ ./node_modules/.bin/browserify main.js -o bundle.js

然后，您可以使用node像浏览器或CLI中的任何其他JavaScript一样运行它。

--outFile也有tsc选项，但这仅限于amd和systemjs模块，所以我认为坚持commonjs和browserify更容易。

browserify是一个了不起的工具。您可以使用--standalone参数生成UMD模块，该参数也可用作全局或exclude any external dependencies。

我强烈建议你阅读官方手册：https://github.com/substack/browserify-handbook

Answer 2

我相信你可以使用--outfile将所有内容整合到一个文件中。诀窍是删除导入和导出语句，并在第一行使用/// <reference path="path/to/file.ts" />来声明依赖/排序关系。由于是导入/导出语句产生对CommonJS或Require的调用，因此省略它们会阻止它们的生成。

参考：https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html

对于两个输出文件，您可能需要两个tsconfig.json。 （我在这里可能不正确。）