typescript - realizar - Módulos frente a espacios de nombres: ¿Cuál es la forma correcta de organizar un proyecto grande de manuscrito?

planificacion de un proyecto ejemplo

Question

Soy bastante nuevo en mecanografiar y estoy escribiendo un pequeño marco de prototipos para WebGl. Actualmente estoy refactorizando mi proyecto y me he topado con algunos problemas sobre cómo organizar mi proyecto, ya que ambos enfoques (módulos y espacios de nombres) parecen tener serios inconvenientes.

Esta publicación no se trata de CÓMO usar estos patrones, sino de cómo superar los problemas que cada uno de estos trae.

Status Quo: Usando espacios de nombres

Viniendo de C #, esta parecía la manera más natural de ir. Cada clase / módulo obtiene su espacio de nombres apropiado y proporciono el parámetro "outFile" en el archivo tsconfig.json para que todo se concatene en un archivo grande. Después de la compilación tengo mi espacio de nombres raíz como un objeto global. Las dependencias no están integradas en el proyecto, por lo que manualmente debe proporcionar los archivos * .js necesarios en su html (no es bueno)

Archivo de ejemplo

namespace Cross.Eye {
export class SpriteFont {
//code omitted
}
}

Ejemplo de uso (Debe asegurarse de que el espacio de nombres de la Cruz se carga en el espacio de nombres global antes de proporcionar el archivo js en el html)

namespace Examples {
export class _01_BasicQuad {
context: Cross.Eye.Context;
shader: Cross.Eye.ShaderProgram;
//code omitted
}
}

Pros

• Sencillo de usar si viene desde C # / Java
• Independiente de los nombres de archivo: cambiar el nombre de los archivos no romperá su código.
• Fácil de refactorizar: los IDE pueden renombrar fácilmente los espacios de nombres / clases y los cambios se aplicarán de manera consistente a través de su código.
• Conveniencia: Agregar una clase al proyecto es tan simple como agregar un archivo y declararlo en el espacio de nombres deseado.

Contras

Para la mayoría de los proyectos, recomendamos el uso de módulos externos y el espacio de nombres para demostraciones rápidas y la transferencia de código JavaScript antiguo.

de https://basarat.gitbooks.io/typescript/content/docs/project/namespaces.html

• Un espacio de nombres raíz es siempre (?) Un objeto global (malo)
• No se puede usar (?) Con herramientas como browserify o webpack, lo que es esencial para agrupar la biblioteca con sus dependencias o su código personalizado con la biblioteca cuando realmente se usa.
• Mala práctica si planeas lanzar un módulo npm

Estado del arte (?): Módulos

Typescript es compatible con los módulos ES6, son nuevos y brillantes y todos parecen estar de acuerdo en que son el camino a seguir. La idea parece ser que cada archivo es un módulo y al incluir los archivos en las declaraciones de importación, puede definir sus dependencias de manera muy explícita, lo que facilita que las herramientas de empaquetado empaqueten su código de manera eficiente. Principalmente tengo una clase por archivo que no parece funcionar bien con el patrón de módulo dhte.

Esta es mi estructura de archivos después del refactor:

También tengo un archivo index.ts en cada carpeta, así que puedo importar todas sus clases import * as FolderModule from "./folder"

export * from "./AggregateLoader";
export * from "./ImageLoader";
export * from "./TiledLoader";
export * from "./XhrLoaders";
export * from "./XmlSpriteFontLoader";

Archivo de ejemplo: creo que el problema se vuelve claramente visible aquí ...

import {SpriteFont} from "./SpriteFont";
import {ISpriteTextGlyph, ISpriteChar} from "./Interfaces";
import {Event,EventArgs} from "../../Core";
import {Attribute, AttributeConfiguration} from "../Attributes";
import {DataType} from "../GlEnums";
import {VertexStore} from "../VertexStore";
import {IRectangle} from "../Geometry";
import {vec3} from "gl-matrix";
export class SpriteText {
// code omitted
}

Ejemplo de uso. Como puede ver, ya no tengo que recorrer los espacios de nombres, porque puedo importar las clases directamente.

import {
Context,
Shader,
ShaderProgram,
Attribute,
AttributeConfiguration,
VertexStore,
ShaderType,
VertexBuffer,
PrimitiveType
} from "../cross/src/Eye";
import {
Assets,
TextLoader
} from "../cross/src/Load";
export class _01_BasicQuad {
context: Context;
shader: ShaderProgram;
// code omitted.
}

Pros

• Hace que su código sea más modular, ya que ya no está vinculado a los espacios de nombres.
• Puede usar herramientas de agrupación como browserfy o webpack, que también puede agrupar todas sus dependencias
• Usted es más flexible al importar clases y ya no tiene que caminar por las cadenas de espacio de nombres.

Contras

• Muy tedioso si cada clase es un archivo diferente, tendrá que escribir las mismas declaraciones de importación una y otra vez.
• Cambiar el nombre de los archivos romperá su código (mal).
• Los nombres de clase de refactorización no se propagarán a través de sus importaciones (muy mal, aunque podría depender de su IDE, estoy usando el código vs)

OMI ambos enfoques parecen fallar. Los espacios de nombres parecen ser terriblemente obsoletos, poco prácticos para grandes proyectos e incompatibles con herramientas comunes, ya que el uso de módulos es bastante incómodo y rompe algunas de las características para las que estaba adaptando el manuscrito en primer lugar.

En un mundo perfecto, escribiría mi marco utilizando el patrón de espacio de nombres y lo exportaría como un módulo que luego se puede importar y agrupar con sus dependencias. Sin embargo, esto no parece ser posible sin algunos trucos feos.

Así que aquí está mi pregunta: ¿Cómo has resuelto estos problemas? ¿Cómo puedo minimizar los inconvenientes que implica cada enfoque?

Actualizar

Después de adquirir un poco más de experiencia con el desarrollo de scripts y javascript en general, debo señalar que los módulos son probablemente el camino a seguir para el 90% de todos los casos de uso.

Se espera que el último 10% sean proyectos heredados que usan espacios de nombres globales, que desea enriquecer con un poco de escritura a máquina (que por cierto funciona bien).

Gran parte de mi crítica para los módulos puede resolverse (y se ha resuelto) con un mejor soporte de IDE. Desde entonces, Visual Studio Code ha agregado una resolución de módulo automática que funciona muy bien.

Answer 1

tl; dr: No elijas el pasado. Elige el futuro: Módulos.

En los primeros borradores de la especificación de los módulos ES6, hubo una noción de módulos en línea , que luego se eliminó en septiembre de 2013 . Sin embargo, esta noción ya fue implementada por el equipo de TypeScript, en 2012, con las primeras versiones beta del lenguaje: era módulos internos . Luego, la especificación final para los módulos ES6 se lanzó en julio de 2014 sin módulos en línea. Un año más tarde, en julio de 2015, con la versión 1.5 de TypeScript, los módulos internos han sido renombrados a espacios de nombres para evitar confusiones con el estándar.

Los espacios de nombres son una característica heredada. No será parte del lenguaje ECMAScript. Y el equipo de TypeScript continuará siguiendo el estándar. No ha habido mejoras con respecto a los espacios de nombres de TS desde el lanzamiento del estándar de módulos ECMAScript en julio de 2014.

Contras [de los módulos ES6]

• Muy tedioso si cada clase es un archivo diferente, tendrá que escribir las mismas declaraciones de importación una y otra vez.
• Cambiar el nombre de los archivos romperá su código (mal).
• Los nombres de clase de refactorización no se propagarán a través de sus importaciones (muy mal, aunque podría depender de su IDE, estoy usando el código vs)

Podemos esperar algunas mejoras en estos temas con futuras IDE. El primero ya está resuelto por WebStorm.