首页 文章

TypeScript编译为单个JS文件

提问于
浏览 次
44

我在TypeScript上有一个测试项目，代码可以找到here .

当我使用VS2012创建新项目时，会创建一个 app.ts 文件 . 当我'm changing it'的内容如链接所示并添加名为 GameModule 的新模块时，我'm getting compile error. When I'，删除 app.ts 而不是创建 Main.ts ，一切编译都很好，但是有一个问题 - 只有 Main.ts 被编译为 Main.js ，并且 GameModule.ts 保持未编译状态 .

如何让编译器合并一个JS中的所有代码？

typescript

6 回答

  • 43

    您不需要任何第三方工具或库 .
    您可以使用Microsoft的System.Web.Optimization：

    BundleTable.Bundles.Add(new ScriptBundle("~/scripts/bundle.js").IncludeDirectory("~/scripts/", "*.js", true));

    所有* .js文件（编译* .ts文件的结果）将在运行时组合并可访问：
    http：// ... / scripts / bundle.js

    回复于
  • 8

    使用GUI

    如果安装了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程序将为您做的 . 我对手动程序的看法源于this source .

    最后

    像平常一样构建项目 . 如果它不起作用，请尝试重新加载项目 .

    回复于
  • 3

    如果在当前目录中使用 tsconfig.json 配置文件，则可以使用 tsc --project ./ 构建连接的输出文件 .

    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模板 .

    回复于
  • 37

    添加执行Browserify.js的postbuild

    回复于
  • 15

    您必须使用编译器的命令行参数

    --out FILE 连接并将输出发送到单个文件

    例子

    tsc --out modules.js main.ts app.ts
    回复于
  • 3

    如果我找到了你，还有另一种方法来生成一个JS文件：

    • 使用以下命令创建新的HTML文件并包含所有.ts文件：

    <script type="text/typescript" src="GameModule.ts"></script>

    <script type="text/typescript" src="app.ts"></script>

    <script type="text/javascript" src="http://niutech.github.com/typescript-compile/js/typescript.min.js"></script>

    <script type="text/javascript" src="http://niutech.github.com/typescript-compile/js/typescript.compile.min.js"></script>

    • 在浏览器中打开此HTML文件 . 自动编译的JS代码将被注入到正文末尾的单个 <script type="text/javascript"></script> 标记中 . 您可以使用Web Inspector或Firebug预览和复制它 .

    这是一个工作demo .

    回复于

相关问题