javascript - Cómo compartir código entre múltiples proyectos con angularJS

ng-if

Question

Me preguntaba cuál sería la mejor práctica para compartir bibliotecas comunes y módulos propios entre varios proyectos angularesJS.

Supongamos que estoy trabajando en dos proyectos diferentes. Ambos se basan en bibliotecas como angularJS, bootstrap, etc.

Tengo una estructura de archivos como la siguiente:

• Proyecto 1
  • index.html
  • css
  • js
    • módulo A
    • módulo B
  • lib
    • angular
    • oreja
• Proyecto 2
  • index.html
  • css
  • js
    • módulo B
    • módulo x
  • lib
    • angular
    • oreja

Así que estaba pensando en crear otro directorio con todos los componentes compartidos para obtener algo. me gusta:

• Compartido
  • angular
  • oreja
  • módulo B
• Proyecto 1
  • index.html
  • css
  • js
    • módulo A
• Proyecto 2
  • index.html
  • css
  • js
    • módulo x

Tengo el módulo B escrito como:

angular.module("moduleB", [])
    .service("SB", [function () {/*functionality here*/}]);
    .factory("FB", [function () {/*functionality here*/}]);

y luego lo incluiría en mi Proyecto 1/2 como dependencia como:

angular.module("project1", ["moduleB"]);

para lograr este enfoque.

¿Sería esa la mejor manera? ¿Qué podría ser una alternativa?

Answer 1

O simplemente hacer ...

"dependencies" : {
  "shared-code" : "git://github.com/user/shared-code.git",
}

Answer 2

Otra opción potencial es publicar su código compartido como módulos npm. Si el código es privado, puede usar los Módulos Privados de npm para eso, aunque hay un costo por usar módulos privados.

Con este o con el enfoque de Bower descrito en la respuesta de d.jamison, intente dividir sus módulos en módulos más pequeños según sus propósitos específicos, en lugar de tener grandes módulos monolíticos "AllOurSharedCode".

El beneficio de esto es que si encuentra un error o realiza una mejora, puede ver con mayor facilidad cuál de sus proyectos puede verse afectado. La sintaxis de import require o ES2015 ayuda mucho con eso también, como dirá, por ejemplo, import { calculateLineTotal } from OrderLogic.js , por lo que es trivial encontrar todos los lugares en el código que impactaría un cambio en el import { calculateLineTotal } from OrderLogic.js .

Answer 3

Puede hacerlo de esa manera, pero puede causarle dolores de cabeza si alguna vez desea que el Proyecto 1 y el Proyecto 2 utilicen dos versiones diferentes de los componentes compartidos. Imagine que necesita lanzar el Proyecto 1 con los últimos componentes compartidos, pero el Proyecto 2 todavía se basa en una versión anterior de los componentes compartidos. Que desastre. Algunas otras opciones:

1. Cree los componentes compartidos Bower componentes que podrían incluirse en cualquiera de los proyectos como dependencias (consulte http://briantford.com/blog/angular-bower )
2. Compile todos los activos compartidos en una URL de acceso mutuo (consulte https://medium.com/@KamilLelonek/sharing-templates-between-angular-applications-b56469ec5d85 )
3. Básicamente, copie / pegue componentes entre proyectos, ya sea manualmente o usando algo como trago (consulte https://groups.google.com/forum/#!msg/angular/TxE5yoQkG-U/6-vWAZsqn1YJ )

La segunda opción tiene muchas partes móviles y requiere cambios en sus aplicaciones, sin mencionar la incapacidad de implementar diferentes versiones del código compartido en cada proyecto. El primero tiene la ventaja de ser fácil de dividir en 3 repositorios: Proyecto 1, Proyecto 2 y Compartido. Si Shared es una dependencia de Bower en el Proyecto 1 y el Proyecto 2, una simple bower update le proporcionará la última versión en cualquiera de los proyectos. O puede bloquear un proyecto a versiones particulares de Shared.

La opción 3 parece que le da el mayor control, pero rápidamente perderá la pista de qué versión de Shared está usando su proyecto. La opción 1 resuelve eso.