Typescript编译为单个文件

Question

我正在使用TS 1.7,我正在尝试将我的项目编译为一个大文件,我将能够包含在我的html文件中.

我的项目结构如下所示:

-build // Build directory
-src // source root
--main.ts // my "Main" file that uses the imports my outer files
--subDirectories with more ts files.
-package.json
-tsconfig.json

我的tsconfig文件是:

 {
  "compilerOptions": {
    "module":"amd",
    "target": "ES5",
    "removeComments": true,
    "preserveConstEnums": true,
    "outDir": "./build",
    "outFile":"./build/build.js",
    "sourceRoot": "./src/",
    "rootDir": "./src/",
    "sourceMap": true
  }
}

当我构建我的项目时,我希望build.js文件是从我的源代码编译的一个大文件.但是build.js文件是空的,我把所有文件都编译成了js文件.

我的每个TS文件看起来都像这样

import {blabla} from "../../bla/blas";

export default class bar implements someThing {
    private variable : string;
}

我究竟做错了什么 ？

Answer 1

这将在TypeSript 1.8中实现.对于该版本,当模块是amd或system时,outFile选项可以工作.

此时,该功能在Typescript的开发版本中可用.要安装该运行:

$ npm install -g typescript@next

对于以前的版本,即使不明显,模块和outFile选项也无法一起工作.

您可以查看此问题以获取更多详细信息.

如果要输出版本低于1.8的单个文件,则无法使用tsconfig.json中的module选项.相反,您必须使用module关键字创建名称空间.

您的tsconfig.json文件应如下所示:

{
  "compilerOptions": {
    "target": "ES5",
    "removeComments": true,
    "preserveConstEnums": true,
    "outFile": "./build/build.js",
    "sourceRoot": "./src/",
    "rootDir": "./src/",
    "sourceMap": true
  }
}

您的TS文件也应如下所示:

module SomeModule {
  export class RaceTrack {
    constructor(private host: Element) {
      host.appendChild(document.createElement("canvas"));
    }
  }
}

而不是使用import语句,您将不得不引用按命名空间导入.

window.addEventListener("load", (ev: Event) => {
  var racetrack = new SomeModule.RaceTrack(document.getElementById("content"));
});

Answer 2

选项 1 - 如果您不使用模块

如果您的代码仅包含常规 Typescript，而没有模块（导入/导出），则您只需将参数添加outfile到tsconfig.json.

// tsconfig.json
{
    "compilerOptions": {
        "lib": ["es5", "es6", "dom"],
        "rootDir": "./src/",
        "outFile": "./build/build.js"
    }
}

但是这个选项有一些限制。

如果您收到此错误：

Cannot compile modules using option 'outFile' unless the '--module' flag is 'amd' or 'system'

试试下面的“选项 2”。

选项 2 - 使用模块加载器

如果您使用模块（导入/导出），您将需要一个模块加载器来在浏览器中运行您编译的脚本。

当您编译为单个文件（使用outFile）时，Typescript 本身支持编译为amd和system模块加载器。

在 tsconfig 中，您需要设置module为amd或system：

Cannot compile modules using option 'outFile' unless the '--module' flag is 'amd' or 'system'

如果选择AMD，则需要使用require.js运行时。AMD 需要一个 AMD 加载器，require.js 是最受欢迎的选项（https://requirejs.org/）。

如果选择 System，则需要使用 SystemJS 模块加载器 ( https://github.com/systemjs/systemjs )。

选项 3 - 使用模块打包器/构建工具

或许，最好的选择是使用模块打包器/构建工具，比如 Webpack。

Webpack 会将您所有的 TypeScript 文件编译为单个 JavaScript 包。

因此，您将使用webpack编译，而不是tsc.

首先安装 webpack，webpack-cli然后ts-loader：

// tsconfig.json
{
    "compilerOptions": {
        "module": "AMD",
        "lib": ["es5", "es6", "dom"],
        "rootDir": "./src/",
        "outFile": "./build/build.js"
    }
}

如果您使用的是带有打字稿的WebPack，也最好使用module带commonjs：

npm install --save-dev webpack webpack-cli typescript ts-loader

网络包webpack.config.js示例：

// tsconfig.json
{
    "compilerOptions": {
        "module": "commonjs",
        "lib": ["es5", "es6", "dom"],
        "rootDir": "src"
    }
}

现在，要编译，而不是使用tsc命令执行，请使用webpack命令。

package.json 例子：

{
  "name": "yourProject",
  "version": "0.1.0",
  "private": true,
  "description": "",
  "scripts": {
    "build": "webpack" // <---- compile ts to a single file
  },
  "devDependencies": {
    "ts-loader": "^8.0.2",
    "typescript": "^3.9.7",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  }
}

Webpack 的 TypeScript 文档

最后，使用以下命令编译所有内容（最好在监视模式下）：

//webpack.config.js
const path = require('path');

module.exports = {
  mode: "development",
  devtool: "inline-source-map",
  entry: {
    main: "./src/YourEntryFile.ts",
  },
  output: {
    path: path.resolve(__dirname, './build'),
    filename: "[name]-bundle.js" // <--- Will be compiled to this single file
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js"],
  },
  module: {
    rules: [
      { 
        test: /\.tsx?$/,
        loader: "ts-loader"
      }
    ]
  }
};

Answer 3

最简单的方法

您可以使用名为ncc的自定义工具来完成此操作，该工具由Vercel构建和维护。以下是他们在create-next-app 中使用它的方式：

ncc build ./index.ts -w -o dist/

用纱线安装它：

yarn add @vercel/ncc

或 npm：

npm install @vercel/ncc