online - typescript official documentation
TypeScript compilando como un solo archivo JS (6)
Usando la GUI
Si tiene instalado Visual Studio 2013 y la extensión de TypeScript, haga clic con el botón derecho en su proyecto en el explorador de soluciones y elija Properties . Haga clic en la pestaña de TypeScript Build . Seleccione Combine JavaScript output into file: y escriba un nombre para usar para su archivo combinado en el campo de entrada justo al lado de la opción. Recuerde que puede usar variables en este campo. Por ejemplo: "$ (ProjectDir) dist / js / myCombinedFile.js".
A mano
Si no puede encontrar esta opción de GUI en cualquier lugar, modifique su archivo de configuración de proyecto manualmente. Ve a la carpeta de tu proyecto; Haga clic derecho en el proyecto en el explorador de soluciones y haga clic en Open folder in File Explorer . En la carpeta que aparece, verá un par de archivos. Edite el archivo myProject.csproj con cualquier editor de texto de su elección. Encuentra dos líneas que dicen así:
<PropertyGroup Condition="''$(Configuration)'' == ''Debug''">
y
<PropertyGroup Condition="''$(Configuration)'' == ''Release''">
Dentro de los dos nodos secundarios de árbol, agregue un nuevo hijo a cada padre:
<TypeScriptOutFile>$(ProjectDir)dist/js/myCombinedFile.js</TypeScriptOutFile>
Cuando regrese a Visual Studio, debería preguntarle si debe o no volver a cargar el proyecto. Por supuesto, esto es algo que se debe hacer para que los cambios entren en vigencia.
El procedimiento manual que acabo de describir es exactamente lo que el procedimiento de GUI haría por usted. Mis pensamientos sobre el procedimiento manual provienen de esta fuente .
Finalmente
Construya su proyecto como lo haría normalmente. Si no funciona, intenta volver a cargar tu proyecto.
Tengo un proyecto de prueba en TypeScript, el código se puede encontrar here .
Cuando estoy creando un nuevo proyecto con VS2012, se app.ts un archivo app.ts Cuando estoy cambiando su contenido como lo muestra el enlace y agrego un nuevo módulo llamado GameModule , GameModule un error de compilación. Cuando '', borrando app.ts y creando Main.ts en Main.ts lugar, todo compilando bien, pero hay un problema: solo Main.ts se compila en Main.js , y GameModule.ts permanece sin compilar.
¿Cómo puedo hacer que el compilador combine todo el código en un JS?
Agregue una postconstrucción que ejecute Browserify.js
No necesita ninguna herramienta o biblioteca de terceros para esto.
Puede usar System.Web.Optimization de Microsoft:
BundleTable.Bundles.Add(new ScriptBundle("~/scripts/bundle.js").IncludeDirectory("~/scripts/", "*.js", true));
Todos los archivos * .js (resultados de la compilación de sus archivos * .ts) se combinarán y serán accesibles en tiempo de ejecución en:
http: // ... / scripts / bundle.js
Puede usar tsc --project ./ para compilar un archivo de salida concatenado si usa el archivo de configuración tsconfig.json en el directorio actual.
El archivo tsconfig.json puede verse así:
{
"compileOnSave": true,
"compilerOptions": {
"module":"system",
"target": "es5",
"sourceMap": true,
"outFile": "dist/app-build.js"
},
"files":[
"./src/index.ts",
"./typings/browser.d.ts"
]
}
El diseño clásico de los archivos sería:
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
La mala noticia es que necesitamos una llamada a SystemJS (funciona igual con RequireJS, pero a partir de Tsc 1.8, CommonJS no se acepta para compilación concatenada)
Así que aprendamos rápidamente sobre SystemJS: Agregue SystemJS y llame a un módulo en 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>
Una gran ventaja es que también puedes dejar que tu ide lo agrupe por ti. El IDE necesita compilar de todos modos para comprender los tipos, por lo que podemos evitar compilarlo dos veces. No necesita Gulp, browserify o nada por el momento. SystemJS podría hacer la mayoría de las cosas, como cargar una plantilla html.
Si te entendí bien, hay otra forma de producir un solo archivo JS:
Cree un nuevo archivo HTML e incluya todos sus archivos .ts usando:
<script type="text/typescript" src="GameModule.ts"></script><script type="text/typescript" src="app.ts"></script>Agregue archivos .js de compilación de TypeScript :
<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>Abra este archivo HTML en un navegador. El código JS compilado automáticamente se inyectará en una sola etiqueta
<script type="text/javascript"></script>al final del cuerpo. Puede obtener una vista previa y copiarlo usando Web Inspector o Firebug.
Aquí hay una demo funcional.
Tienes que usar argumentos de línea de comandos del compilador
--out FILE Concatenar y emitir salida a un solo archivo
ejemplo
tsc --out modules.js main.ts app.ts