Typescript模块放到单个JS文件中

Typescript Modules Into Single JS file?

本文关键字:JS 文件 单个 模块 Typescript      更新时间:2023-09-26

好吧,我完全迷路了。我刚开始在Grunt JS中使用Typescript,需要一些帮助。

我有一个工作的Grunt文件,它运行我的TS,然后是一个网站准备文件的丑化过程,这是配置:

  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,这需要我不知道的Require JS。

现在我没有时间学习Typescript和Require JS。那么我现在得到的是什么呢,

test.js:
export class testMe {
    constructor() { }
    LogingData() {
       console.log( 'Data being logged...' );
    }
}

然后在我的构建文件中,

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

然而,这需要需要JS或模块加载系统,以使其运行?我尝试过使用commonJs,但似乎在Typescript 1.8中删除了对它的支持(我正在使用2.0)。

那么我如何把我的Grunt/Typescript变成一个单一的标准ES5编译代码,而使用Typescript模块?

多谢

更新

这个问题&答:Typescript编译成单个文件并没有给出如何设置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或其他任何东西。

希望能更清楚一点…

谢谢。

我相信您可以使用——outfile将所有内容放入一个文件中。诀窍是删除导入和导出语句,并在第一行使用/// <reference path="path/to/file.ts" />来声明依赖/排序关系。因为是import/export语句产生了对CommonJS或Require的调用,所以省略它们可以防止它们的生成。

裁判:https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html

对于两个输出文件,您可能需要两个tsconfig.json。(这里我可能说错了)

如果您不打扰.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

然后你可以像在浏览器或CLI中使用node一样运行它。

tsc也有--outFile选项,但这仅限于amdsystemjs模块,所以我认为坚持commonjsbrowserify更容易。

browserify是一个了不起的工具。您可以生成具有--standalone参数的UMD模块,它也可以作为全局的或排除任何外部依赖。

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