0

estoy trabjando en un proyecto y tengo bastantes problemas con yarn.

El entorno de trabajo es:

SO: Windows 10

Framework: Symfony 5.1.3

El caso es que para este proyecto necsito tener DataTables, jQuery y probablemente en un futuro necesito una librería como CKEditor O similar. Pero tengo el problema con que no sé como funciona YARN para añadir este tipo de cosas.

Ahora mismo para que funcione lo que tengo puesto es esto, porque no he conseguido que funcione con yarn:

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
        <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap.min.css">

Por ejemplo, para instalar Bootstrap he hecho lo siguiente (utilizando el npm):

https://getbootstrap.com/docs/4.0/getting-started/download/

Para añadir dataTables he seguido también su guía para instalar (vía Yarn):

https://datatables.net/download/

Para añadir CKEDITOR he seguido también su documentación:

https://ckeditor.com/docs/ckeditor4/latest/guide/dev_installation.html

Luego tengo esto en mi app.js

import '../css/app.css';

require('bootstrap');
require('ckeditor4');
require( 'datatables.net-bs4' )();
require('datatables.net-bs4/js/dataTables.bootstrap4');

var $  = require( 'jquery' );
var dt = require( 'datatables.net' )( window, $ );

Pero no funciona ni jQuery, ni DataTables ni CKEDITOR ni Bootstrap

Esto es lo que devuelve cada uno al usarlo:

Uncaught ReferenceError: CKEDITOR is not defined

Para jQuery : Uncaught ReferenceError: $ is not defined

Lo mismo para DataTable()

Uncaught ReferenceError: DataTable is not defined

Y con bootstrap, simplemente no carga los estilos

Contenido de webpack.config.js

var Encore = require('@symfony/webpack-encore');
if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .addEntry('app', './assets/js/app.js')
    .splitEntryChunks()
    .enableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })
;

module.exports = Encore.getWebpackConfig();

No tengo idea alguna de como configurar todo esto para que funcione en el proyecto...

2 respuestas 2

2
+50

Es importante que sepas exactamente qué deseas lograr.

Primero, te explico un poco sobre los administradores de dependencias: Si bien sirven en general para recopilar paquetes de internet e instalarlos localmente, se usan popularmente para ayudar en la división de frontend y backend.

Cuando instalas un paquete con yarn, este se guarda en la carpeta local node_modules y se agrega su respectivo registro al archivo package.json.

En este punto, los paquetes aún no se agregan a tu aplicación, para eso debes agregarlos al punto de entrada, en tu caso app.js.

De aquí, tienes dos opciones para ejecutar tu aplicación:

  • yarn run Para correr un servidor de yarn en tu entorno de desarrollo (Si tu backend y frontend están separados)
  • yarn build Para compilar todas tus dependencias en uno o varios archivos .js (Estos archivos ya los podrás incluir manualmente en tu index.html)

Personalmente te recomiendo tener el backend y frontend separados.

En tu archivo app.js también podrías configurar un framework de tu elección como Vue.js, AngularJS o React.

Como nota adicional, debo recalcar que para que las variables de tu app.js sean accesibles desde cualquier punto, deberás cargar primero este archivo (Previamente compilado) en tu index.html y en lugar de declarar tus dependencias como variables, asignarlas como propiedades del objeto window.

2
  • Hasta ahí lo entiendo, pero cuando ya lo he agregado a mi fichero app.js e intento usar el jquery o cualquier cosa agregada, no funciona, como si no existiera, como pongo en el OP Uncaught ReferenceError: $ is not defined cuando quiero usar el jquery...
    – Pavlo B.
    Commented el 29 sept. 2020 a las 10:50
  • Al ejecutar el comando yarn build se generarán archivos que puedes importar en tu index.html. Generalmente irán a una carpeta llamada dist. Esos son los archivos que puedes usar. Commented el 29 sept. 2020 a las 16:35
-1

Yo te recomiendo ir a la vieja confiable, la documentación: https://symfony.com/doc/current/frontend/encore/advanced-config.html

Luego de mirar esto, puedes volver a stackoverflow a hacer preguntas mas especificas.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.