在Typescript中内联模块

Question

我想在TypeScript中使用模块进行内联。例如，如果我在mymodule.ts中有此代码：

export class mymodule {
    constructor() {
        console.log('Hi');
    }
}

当我将此类包含在另一个文件中时：

import { mymodule } from './mymodule.ts'

我想将mymodule类复制粘贴或内联到编译文件中。我使用outFile选项编译为单个文件，但它只是在一个文件中创建多个模块，生成不必要的包装器代码。有没有办法实现这个目标？

感谢。

Answer 1

让我们从JavaScript

开始

Rollup使用JavaScript完成您的需要。

例如，这是一个类：

// MyClass.js
export class MyClass {
    constructor() {
        console.log('Hi');
    }
}

入口点：

// main.js
import { MyClass } from './MyClass';
export const inst = new MyClass();

然后，安装Rollup并运行它：

npm install rollup
./node_modules/.bin/rollup main.js --o bundle.js --f es

Rollup生成以下文件：

class MyClass {
    constructor() {
        console.log('Hi');
    }
}

const inst = new MyClass();

export { inst };

Try it here.

使用TypeScript

有两种解决方案：

1. 使用 tsc 将每个TypeScript文件编译为JavaScript文件，然后使用Rollup（这就是我的工作）;
2. 或者，使用Rollup的插件。

关于第二个解决方案，由于official Rollup plugin使用的是旧版本的TypeScript，我建议您尝试rollup-plugin-typescript2。

如果您使用Rollup插件，则需要Rollup（rollup.config.js）的配置文件。

Answer 2

您正在寻找的是scope hoisting，并且目前无法单独使用Typescript编译器。您需要使用Typescript + Rollup / Webpack才能实现这一目标。

要点是您需要修改tsconfig.json以输出ES2015模块，然后将其传递给您选择的捆绑器以将它们合并为一个文件。

请注意，在Webpack范围内，提升由ModuleConcatenationPlugin执行，默认情况下，仅包含在生产版本中。