【问题标题】：Inlining Modules In TypescriptTypescript 中的内联模块
【发布时间】：2017-11-10 09:42:53
【问题描述】：

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

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

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

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

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

谢谢。

【问题讨论】：

这是前端代码还是后端代码？
乍一看，你可能会考虑使用 Webpack 来构建你需要的东西，或者巧妙地使用 Typescript 装饰器......也许你可能会问自己为什么要使用 copy-n-粘贴（或包含文件）方法
如果您仍在考虑这种方法，这篇文章可能值得一读：github.com/Microsoft/TypeScript/issues/4691
require 可能会更好。

【解决方案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

汇总生成以下文件：

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

const inst = new MyClass();

export { inst };

使用 TypeScript

有两种解决方案：

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

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

【讨论】：

【解决方案2】：

您要查找的内容称为 scope hoisting，并且（目前）无法单独使用 Typescript 编译器来完成它。你需要使用 Typescript + Rollup/Webpack 来实现。

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

注意，在 Webpack 范围内提升是由 ModuleConcatenationPlugin 执行的，它仅默认包含在生产构建中。

【讨论】：