我有一个关于TypeScript的测试项目,代码可以在这里找到.
当我使用VS2012创建新项目时,app.ts会创建一个文件.当我改变链接所示的内容并添加新模块时GameModule,我收到编译错误.当我',删除app.ts和创建Main.ts,所有编译都很好,但有一个问题 - 只Main.ts编译Main.js,并GameModule.ts保持未编译.
如何让编译器合并一个JS中的所有代码？
Mar*_*son 45
如果安装了Visual Studio 2013和TypeScript扩展,请在解决方案资源管理器中右键单击您的项目并选择Properties.单击TypeScript Build选项卡.选择Combine JavaScript output into file:并在选项旁边的输入字段中键入要用于组合文件的名称.请记住,您可以在此字段中使用变量.例如:"$(ProjectDir)dist\js\myCombinedFile.js".
如果在任何地方都找不到此GUI选项,请手动修改项目配置文件.转到项目文件夹; 右键单击解决方案资源管理器中的项目,然后单击Open folder in File Explorer.在弹出的文件夹中,您将看到几个文件.myProject.csproj使用您选择的任何文本编辑器编辑文件.找到两行如下:
<PropertyGroup Condition="'$(Configuration)' == 'Debug'">
和
<PropertyGroup Condition="'$(Configuration)' == 'Release'">
在两个子节点树中,向每个父节点添加一个新子节点:
<TypeScriptOutFile>$(ProjectDir)dist\js\myCombinedFile.js</TypeScriptOutFile>
当您返回Visual Studio时,他应该询问您是否重新加载项目.当然,必须采取这些措施才能使更改生效!
我刚才描述的手动程序正是GUI程序将为您做的.我对手动程序的看法源于此来源.
像平常一样构建项目.如果它不起作用,请尝试重新加载项目.
小智 39
您必须使用编译器的命令行参数
--out FILE 连接并将输出发送到单个文件
tsc --out modules.js main.ts app.ts
Xav*_*nas 15
您不需要任何第三方工具或库.
您可以使用Microsoft的System.Web.Optimization:
BundleTable.Bundles.Add(new ScriptBundle("~/scripts/bundle.js").IncludeDirectory("~/scripts/", "*.js", true));
所有*.js文件(编译*.ts文件的结果)将在运行时组合并可访问:
http:// .../scripts/bundle.js
tsc --project ./如果tsconfig.json在当前目录中使用配置文件,则可以用于构建连接的输出文件.
该tsconfig.json文件可能如下所示:
{
"compileOnSave": true,
"compilerOptions": {
"module":"system",
"target": "es5",
"sourceMap": true,
"outFile": "dist/app-build.js"
},
"files":[
"./src/index.ts",
"./typings/browser.d.ts"
]
}
经典文件布局将是:
project/
- src/
- index.ts
... all my ts files
- dist /
- vendor.js # angular, jquery...
- app-build.js # our build project
- system.js # Module loader we used
- index.html # call all js
- typings/
- browser.d.ts
- main.d.ts # for node.js server side, not included
- package.json
- tsconfig.json
坏消息是我们需要调用SystemJS(与RequireJS一样,但从Tsc 1.8开始,CommonJS不接受连接构建)
因此,让我们快速了解SystemJS:添加SystemJS,并在index.html以下位置调用模块:
<html lang="en" ng-app="skeleton">
<head>
<script src="system.js" type="text/javascript"></script>
<script src="angular.min.js"></script>
<script src="app-build.js" type="text/javascript"></script>
</head>
<body>
<skeletonDirective></skeletonDirective>
<script type="text/javascript">
System.import('index')
</script></body></html>
一个很大的优点是你也可以让你的ide捆绑给你.IDE无论如何都需要编译才能理解类型,所以我们可以避免编译两次.您暂时不需要Gulp,browserify或任何其他内容.SystemJS可能会执行大多数操作,例如加载html模板.
| 归档时间： |
|
| 查看次数： |
55960 次 |
| 最近记录： |