Question

我有一个大约10个ts文件的小型Typescript项目。我想将我的所有文件编译成es5和一个名为es5的{{1}}文件。

目前，我的all.js设置为

tsconfig.json

所有内容都已编译，但每个文件都被

包装

{
  "compilerOptions": {
    "module": "system",
    "target": "es5",
    "outFile": "./all.js"
}

SystemJS看起来很酷但我现在没有心情去学习，我不相信这是必要的。如果我可以将我的所有JS都放到一个文件中，那将完全满足我的需求。

如果从编译器选项中删除System.register("SomeTSFile", [], function(exports_4, context_4) { ... }，我的"module": "system",文件将完全空白。显然，这是因为某些原因，you cannot use "modules": none when outputting to one file。（我不明白为什么）

如何在不涉及SystemJS或任何其他复杂情况的情况下将所有TS编译成一个JS文件？

Answer 1

.ts文件的内容决定了这是否可行......

如果您避免将TypeScript代码转换为模块（通过避免顶级import或export声明），则单文件编译的输出将不包含对模块加载器的任何依赖性。

例如：typescript compiler itself编写时没有任何顶级导入或导出声明，因此编译成单个文件.js，没有任何加载器依赖。

请注意，在命名空间中使用export不是“顶级”导出。命名空间内的导入是可能的，但受到严格限制：an example here

“在TypeScript中，就像在ECMAScript 2015中一样，任何包含   顶级导入或导出被视为一个模块。“

The typescript handbook

Answer 2

这是我最终使用的方法：

安装汇总和插件（此处列出的许多插件都是可选的，但此配置应涵盖您使用模块的任何方式）

npm install rollup-plugin-buble rollup-plugin-commonjs rollup-plugin-node-resolve rollup-plugin-typescript rollup-plugin-uglify typescript --save-dev

此示例汇总配置文件显示如何防止汇总捆绑您的依赖项：

<强> rollup.config.js

'use strict';

import 'rollup';
import typescript from 'rollup-plugin-typescript';
import buble from 'rollup-plugin-buble';
import commonjs from 'rollup-plugin-commonjs';
import nodeResolve from 'rollup-plugin-node-resolve';
import uglify from 'rollup-plugin-uglify';
import {minify} from 'uglify-js';

/**
 * Default/development Build
 */
const config = {
    entry: 'src/index.ts',
    exports: 'auto',
    globals: {
        'jquery': '$',
        'angular': 'angular'
    },
    external: ['angular', 'jquery'],
    targets: [{dest: 'dist/myModuleName.js', format: 'umd', moduleName: 'myModuleName', sourceMap: true}],
    plugins: [

        typescript({
            typescript: require('typescript')
        }),
        buble(),
        nodeResolve({
            jsnext: true,
            main: true
        }),
        commonjs({
            namedExports: {
                'node_modules/jquery/dist/jquery.min.js': ['jquery'],
                'node_modules/angular/angular.min.js': ['angular']
            }
        })
    ]
}

// Minified JS Build
if (process.env.BUILD === 'minify') {
    config.targets = [{dest: 'dist/myModuleName.min.js', format: 'umd', moduleName: 'myModuleName', sourceMap: false}];
    config.plugins.push(
        uglify({}, minify)
    );
}

// Report destination paths on console
console.info(`\u001b[36m\[Rollup ${process.env.BUILD} build\]\u001b[97m \nConverting Typescript from ${
config.entry} to javascript, exporting to: ${config.targets[0].dest}`);

export default config

将脚本添加到 package.json

"scripts": { "build": "rollup -c rollup.config.js --no-conflict --environment BUILD:development", "minify": "rollup -c rollup.config.js --environment INCLUDE_DEPS,BUILD:minify" }

提供要汇总的汇总文件：

<强>的src / index.ts

`export * from './myModule';`

如果您要编写库，可以选择使用文件来收集要导出的模块，这些是您打算公开可用的功能。

<强>的src / myModule.ts

export {myClass} from './myFile'; export {myOtherClass, myFunction} from './myUtils/myFile'; export * from "./myUtils/myOtherFile";

运行npm run build或npm run build && npm run minify以获得缩小版本。

Answer 3

将 triple slash directives 用于打字稿编译器（tsc）

三斜杠引用指示编译器在编译过程中包括其他文件。

index.ts：

/// <reference path="./domHelpers.ts" />

function add(a: number, b: number): number {
    return a + b;
}

q('#sum').textContent = add(2, 5).toString();

domHelpers.ts

function q(query: string): Element {
    return document.querySelector(query);
}

function qa(query: string): NodeListOf<Element> {
    return document.querySelectorAll(query);
}

构建步骤：

tsc --out bundle.js ts/index.ts

将生成带有内容的bundle.js

function q(query) {
    return document.querySelector(query);
}
function qa(query) {
    return document.querySelectorAll(query);
}
/// <reference path="./domHelpers.ts" />
function add(a, b) {
    return a + b;
}
q("#sum").textContent = add(2, 5).toString();

Answer 4

这就是我的做法

tsconfig文件应将moduleResolution设置为classic
tsconfig文件应将模块设置为none
使用Typescript名称空间语法，并将所有文件保留在同一名称空间

完成!!!

此sol仅适用于不需要模块系统的人，使用此sol将无法使用import export module系统语法

Answer 5

您可以使用编译器本身吗？ - 作为后期制作流程。 TSC采用允许您执行此操作的参数。

tsc --out compiledSingleFile.js one.ts two.ts

或者在构建管道中使用Gulp -

https://www.npmjs.com/package/gulp-tsc

Answer 6

使用TypeScript 3.4，将许多* .ts脚本转换为单个.js输出文件没有问题。

这是我与tsc --project src/test/tsconfig.json一起使用的tsconfig.json的简约版本。

{
  "compilerOptions": {
    "outFile": "../../build/test/Code.js",
    "module": "none",
    "skipLibCheck": true,
  },
  "include": ["**/*.ts"],
}

如何将我的Typescript编译成一个没有模块加载系统的JS文件？

6 个答案: