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...