Javascript 打字稿编译为单个文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34474651/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Typescript compile to single file
提问by David Limkys
I'm using TS 1.7 and I'm trying to compile my project to one big file that I will be able to include in my html file.
我正在使用 TS 1.7 并且我正在尝试将我的项目编译为一个大文件，我将能够将其包含在我的 html 文件中。
My project structure looks like this:
我的项目结构如下所示：
-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
my tsconfig file is:
我的 tsconfig 文件是：
{
"compilerOptions": {
"module":"amd",
"target": "ES5",
"removeComments": true,
"preserveConstEnums": true,
"outDir": "./build",
"outFile":"./build/build.js",
"sourceRoot": "./src/",
"rootDir": "./src/",
"sourceMap": true
}
}
When I build my project I expect the build.js file to be one big file compiled from my source. But ths build.js file is empty and I get all of my files compiled o js files.
当我构建我的项目时，我希望 build.js 文件是从我的源代码编译的一个大文件。但是这个 build.js 文件是空的，我把所有的文件都编译成了 js 文件。
Each of my TS files look a bit like this
我的每个 TS 文件看起来有点像这样
import {blabla} from "../../bla/blas";
export default class bar implements someThing {
private variable : string;
}
What am I doing wrong ?
我究竟做错了什么 ？
采纳答案by toskv
This will be implemented in TypeSript 1.8. With that version the outFileoption works when moduleis amdor system.
这将在TypeSript 1.8 中实现。使用该版本时，outFile选项在module为amd或system时起作用。
At this time the feature is available in the development version of Typescript. To install that run:
目前该功能在 Typescript 的开发版中可用。要安装该运行：
$ npm install -g typescript@next
For previous versions even if it's not obvious the moduleand the outFileoptions can not work together.
对于以前的版本，即使模块和outFile选项不明显，也不能一起工作。
You can check thisissue for more details.
您可以查看此问题以获取更多详细信息。
If you want to output a single file with versions lower than 1.8 you can not use the moduleoption in tsconfig.json. Instead you have to make namespaces using the module keyword.
如果要输出版本低于 1.8 的单个文件，则不能使用tsconfig.json 中的module选项。相反，您必须使用module 关键字来创建名称空间。
Your tsconfig.jsonfile should look like this:
您的tsconfig.json文件应如下所示：
{
"compilerOptions": {
"target": "ES5",
"removeComments": true,
"preserveConstEnums": true,
"outFile": "./build/build.js",
"sourceRoot": "./src/",
"rootDir": "./src/",
"sourceMap": true
}
}
Also your TS files should look like this:
此外，您的 TS 文件应如下所示：
module SomeModule {
export class RaceTrack {
constructor(private host: Element) {
host.appendChild(document.createElement("canvas"));
}
}
}
And instead of using the import statement you'll have to refer to the imports by namespace.
而不是使用 import 语句，您必须通过命名空间来引用导入。
window.addEventListener("load", (ev: Event) => {
var racetrack = new SomeModule.RaceTrack(document.getElementById("content"));
});
回答by Daniel
Using more recent version of Typescript I was able to compile all ts files to a single big Javascript file using the configuration below:
使用更新版本的 Typescript，我能够使用以下配置将所有 ts 文件编译为一个大的 Javascript 文件：
tsconfig.json:
tsconfig.json：
{
"compilerOptions": {
"lib": ["es5", "es6", "dom"],
"rootDir": "./src/",
"outFile": "./build/build.js"
}
}
回答by Paul Razvan Berg
You can achieve this with a custom tool called ncc, built and maintained by ZEIT. Here's how they're using it in create-next-app:
您可以使用名为ncc的自定义工具来实现这一点，该工具由ZEIT构建和维护。以下是他们在create-next-app 中使用它的方式：
ncc build ./index.ts -w -o dist/
Install it with yarn:
用纱线安装它：
yarn add @zeit/ncc
Or npm:
或 npm：
npm install @zeit/ncc
