typescript - 如何在没有模块加载系统的情况下将我的 Typescript 编译成单个 JS 文件？

Question

我有一个大约 10 个ts文件的小型 Typescript 项目。我想将我的所有文件编译es5成一个es5名为all.js.

目前，我的tsconfig.json设置为

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

一切都在编译，但每个文件都被

System.register("SomeTSFile", [], function(exports_4, context_4) {
...
}

SystemJS 看起来很酷，但我现在没有心情学习它，我认为没有必要。如果我可以将所有 JS 放入一个文件中，那将完全满足我的需求。

如果我"module": "system",从我的编译器选项中删除，我的all.js文件就会完全空白。显然，这是因为由于某种原因，您无法"modules": none在输出到一个文件时使用。（我不明白为什么）

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

score 6 · Accepted Answer

对 typescript-compiler (tsc)使用三斜杠指令

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

索引.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();

score 6 · Accepted Answer

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

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

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

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

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

打字稿手册

score 2 · Accepted Answer

这是我最终使用的方法。此过程将创建一个文件，该文件可以与<script src="myModuleName.min.js"></script>HTML 页面上的标签链接，以便在浏览器中使用。

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

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

此示例汇总配置文件显示了如何防止汇总也捆绑您的依赖项。在这种情况下，我使用的是 jQuery 和 Angular，但我不想将它们包含在我提供给用户的包中——所以我将它们列为外部变量，它们都恰好有一个全局变量——此示例文件显示了如何处理这种情况：

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 {myOtherClass, myFunction} from './myUtils/myFile';
export * from "./myUtils/myOtherFile";

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

score 1 · Accepted Answer

我就是这样做的

tsconfig 文件应将 moduleResolution 设置为经典
tsconfig 文件应将模块设置为无
使用 Typescript 命名空间语法并将所有文件保存在同一个命名空间中

完毕！！！

此 sol 仅适用于不需要模块系统的人，使用此 sol 您将无法使用导入导出模块系统语法

score 1 · Accepted Answer

使用 TypeScript 3.4，我可以毫无问题地将许多 *.ts 脚本转换为单个 .js 输出文件。

这是我使用的 tsconfig.json 的极简版本tsc --project src/test/tsconfig.json

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

score 1 · Accepted Answer

你可以使用编译器本身吗？- 作为后期构建过程。TSC 接受允许您执行此操作的参数。

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

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

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

typescript - 如何在没有模块加载系统的情况下将我的 Typescript 编译成单个 JS 文件？

6 回答 6

Related

Reference