javascript - script - Angular Cli Webpack, ¿Cómo agregar o agrupar archivos js externos?

crear proyecto angular 6 (5)

No estoy seguro de cómo incluir archivos JS (proveedores) después de cambiar Angular Cli de SystemJs a Webpack.

Por ejemplo

Opcion A

Tengo algunos archivos js que se instalaron a través de npm. Agregar etiquetas de script a la etiqueta de encabezado como esta no funciona. Tampoco parece ser la mejor manera.

<head> <script src="node_modules/some_package/somejs.js"> </head> //With systemJs I could do this <head> <script src="vendor/some_package/somejs.js"> </head>

Opcion B

Incluya estos archivos js como parte del paquete webpack. Esta parece ser la forma en que probablemente debería hacerse. Sin embargo, no estoy seguro de cómo hacerlo, ya que todo el código del paquete web parece estar oculto detrás del paquete del nodo angular-cli-webpack. Estaba pensando que tal vez hay otra configuración de paquete web a la que podríamos tener acceso. Pero no estoy seguro, ya que no vi uno al crear un nuevo proyecto angular-cli-webpack.

Más información:

Los archivos js que estoy tratando de incluir deben incluirse antes del proyecto Angular. Por ejemplo, jQuery y un tercero js lib que no está realmente configurado para cargar módulos o mecanografiar.

Referencias https://github.com/angular/angular-cli/blob/master/WEBPACK_UPDATE.md https://github.com/angular/angular-cli/tree/webpack

Es posible que desee echar un vistazo a esta página: https://github.com/angular/angular-cli#global-library-installation

Muestra los conceptos básicos de cómo incluir archivos .js y .css

Algunas bibliotecas de JavaScript deben agregarse al ámbito global y cargarse como si estuvieran en una etiqueta de script. Podemos hacer esto usando las propiedades de aplicaciones [0] .scripts y aplicaciones [0] .styles de angular-cli.json.

Hay una sutil diferencia en el uso de scripts:[] luego de agregar algo al <head> con <script> . Scripts de scripts:[] se agregan a scripts.bundle.js que siempre se carga en la etiqueta del cuerpo y, por lo tanto, se cargará DESPUÉS de los scripts en <head> . Por lo tanto, si el orden de carga del script es importante (es decir, necesita cargar un polyfill global), entonces su única opción es copiar manualmente los scripts en una carpeta (por ejemplo, con un script npm) y agregar esta carpeta como un activo a .angular-cli.json .

Entonces, si realmente depende de que se cargue algo antes del ángulo ( Opción A ), entonces debe copiarlo manualmente en una carpeta que se incluirá en la compilación angular y luego puede cargarlo manualmente con un <script> en <head> .

Por lo tanto, para lograr la opción a debe:

crear una carpeta de vendor en src/
agregue esta carpeta como un activo a .angular-cli.json :

"styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js" ],

copie su script de proveedor node_modules/some_package/somejs.js al vendor
cárguelo manualmente en index.html : <head> <script src="vendor/some_package/somejs.js"> </head>

Sin embargo, la mayoría de las veces solo necesita este enfoque para los paquetes, que deben estar disponibles globalmente, antes que todo lo demás (es decir, ciertos polyfills). La respuesta de Kris es válida para la Opción B y obtienes el beneficio de la compilación del paquete web (Minificación, Hashes, ...).

Sin embargo, si sus scripts no necesitan estar disponibles globalmente y están listos para el módulo, puede importarlos en src/polyfills.ts o incluso mejor importarlos solo cuando los necesite en sus componentes específicos.

Hacer que las secuencias de comandos estén disponibles globalmente a través de scripts:[] o al cargarlas manualmente trae su propio conjunto de problemas y, en realidad, solo debe usarse cuando sea absolutamente necesario.

No he usado angular-cli antes, pero actualmente estoy trabajando con una compilación Angular / Webpack. Para proporcionar mi aplicación con jQuery y otros proveedores, uso el complemento de ProvidePlugin() , ProvidePlugin() . Esto normalmente se ubicará en su webpack.config.js : aquí hay un ejemplo para las bibliotecas jquery, lodash y moment. Aquí hay un enlace a la documentation (que es vago en el mejor de los casos)

plugins: [ new webpack.ProvidePlugin({ $: ''jquery'', _: ''lodash'', moment: ''moment'', }) ]

Increíblemente, en realidad le permite usarlo de inmediato, siempre que todas las demás configuraciones del paquete web se hayan realizado correctamente y se hayan instalado con npm .

.angular-cli.json abrir el archivo .angular-cli.json y debe buscar "scripts:" o si desea agregar CSS externo, debe encontrar la palabra "styles": en el mismo archivo.

como ejemplo se muestra a continuación, verá cómo el bootstrap Js ( bootstrap.min.js ) y el bootstrap CSS ( bootstrap.min.css ) se incluyen en .angular-cli.json :

plugins: [ new webpack.ProvidePlugin({ $: ''jquery'', _: ''lodash'', moment: ''moment'', }) ]

Sin duda, si tiene su propio archivo js, puede agregar su ruta de archivo aquí en .angular-cli.json en el mismo lugar (en "scripts":[] ).

Última prueba con angular-cli 7.xx con Angular 7.xx

Esto se puede lograr usando scripts:[] en .angular-cli.json .

{ "project": { "version": "1.0.0", "name": "my-project" }, "apps": [ { "root": "src", "outDir": "dist", "assets": ["assets"], "index": "index.html", "main": "main.ts", "polyfills": "polyfills.ts", "test": "test.ts", "tsconfig": "tsconfig.json", "prefix": "app", "mobile": false, "styles": [ "styles.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.js" ], "environments": { "source": "environments/environment.ts", "dev": "environments/environment.ts", "prod": "environments/environment.prod.ts" } } ], "addons": [], "packages": [], "e2e": { "protractor": { "config": "./protractor.conf.js" } }, "test": { "karma": { "config": "./karma.conf.js" } }, "defaults": { "styleExt": "css", "prefixInterfaces": false } }

Nota: Como sugiere la documentación en la instalación de la biblioteca global: si cambia el valor de su propiedad de styles (o scripts ), entonces:

Reinicie ng serve si lo está ejecutando,

..para ver los scripts ejecutados en un ** contexto global a través del archivo scripts.bundle.js .

Nota: Como se discute en los comentarios a continuación. Las bibliotecas JS que admiten módulos UMD a través de importaciones de es6 como jQuery también se pueden importar a sus archivos de mecanografía utilizando la sintaxis de importación de es6. Por ejemplo: import $ from ''jquery''; .