SymfonyCasts stands united with the people of Ukraine
gstreamer0.10-ffmpeg
gstreamer0.10-plugins-good packages.
Nuestra configuración de CSS está bien. Ponemos los archivos en el directorio public/ y luego... apuntamos a ellos desde dentro de nuestras plantillas. Podríamos añadir archivos de JavaScript de la misma manera.
Pero si queremos tomarnos realmente en serio la escritura de CSS y JavaScript, tenemos que llevar esto al siguiente nivel. E incluso si te consideras un desarrollador principalmente de backend, las herramientas de las que vamos a hablar te permitirán escribir CSS y JavaScript de forma más fácil y menos propensa a errores que a lo que probablemente estés acostumbrado.
La clave para llevar nuestra configuración al siguiente nivel es aprovechar una biblioteca de nodos llamada Webpack. Webpack es la herramienta estándar de la industria para empaquetar, minificar y analizar tu CSS, JavaScript y otros archivos del frontend. Pero no te preocupes: Node es sólo JavaScript. Y su papel en nuestra aplicación será bastante limitado.
Configurar Webpack puede ser complicado. Por eso, en el mundo Symfony, utilizamos una herramienta ligera llamada Webpack Encore. Sigue siendo Webpack... ¡sólo lo hace más fácil! Y tenemos un tutorial gratuito sobre ello si quieres profundizar.
Pero vamos a hacer un curso intensivo ahora mismo. Primero, en tu línea de comandos, asegúrate de que tienes instalado Node:
node -v
También necesitarás npm -que viene con Node automáticamente- o yarn:
yarn --version
Npm y yarn son gestores de paquetes de Node: son el Compositor para el mundo de Node... y puedes usar cualquiera de los dos. Si decides usar yarn - que es lo que yo usaré - asegúrate de instalar la versión 1.
Estamos a punto de instalar un nuevo paquete... así que vamos a confirmar todo:
git add .
Y... se ve bien:
git status
Así que confirma todo:
git commit -m "Look mom! A real app"
Para instalar Encore, ejecuta:
composer require encore
Esto instala WebpackEncoreBundle. Recuerda que un bundle es un plugin de Symfony. Y este paquete tiene una receta: una receta muy importante. Ejecuta:
git status
Por primera vez, la receta ha modificado el archivo .gitignore. Vamos a comprobarlo. Abre .gitignore. Lo de arriba es lo que teníamos originalmente... y lo de abajo es lo nuevo que ha añadido WebpackEncoreBundle. Está ignorando el directorionode_modules/, que es básicamente el directorio vendor/ para Node. No necesitamos confirmarlo porque esas bibliotecas de proveedores se describen en otro archivo nuevo de la receta: package.json. Este es el archivo composer.jsonde Node: describe los paquetes de Node que necesita nuestra aplicación. El más importante es el propio Webpack Encore, que es una biblioteca de Node. También tiene algunos otros paquetes que nos ayudarán a realizar nuestro trabajo.
La receta también ha añadido un directorio assets/... y un archivo de configuración para controlar Webpack: webpack.config.js. El directorio assets/ ya contiene un pequeño conjunto de archivos para que podamos empezar.
Bien, con Composer, si no tuviéramos este directorio vendor/, podríamos ejecutarcomposer install que le diría que leyera el archivo composer.json y volviera a descargar todos los paquetes en vendor/. Lo mismo ocurre con Node: tenemos un archivo package.json. Para descargarlo, ejecuta
yarn install
O:
npm install
¡Go node go! Esto tardará unos instantes mientras se descarga todo. Probablemente recibirás algunas advertencias como ésta, que puedes ignorar.
¡Genial! Esto hizo dos cosas. En primer lugar, descargó un montón de archivos en el directorionode_modules/: el directorio de "proveedores" de Node. También creó un archivoyarn.lock... o package-lock.json si estás usando npm. Esto sirve para el mismo propósito de composer.lock: almacena las versiones exactas de todos los paquetes para que obtengas las mismas versiones la próxima vez que instales tus dependencias.
En su mayor parte, no necesitas preocuparte por estos archivos de bloqueo... excepto que debes confirmarlos. Hagámoslo. Ejecuta:
git status
Entonces:
git add .
Hermoso:
git status
Y confirma:
git commit -m "Adding Webpack Encore"
¡Hey! ¡Ya está instalado Webpack Encore! Pero... ¡todavía no hace nada! Aprovechado. A continuación, vamos a utilizarlo para llevar nuestro JavaScript al siguiente nivel.
Hi @Dang,
Honestly it's not a problem, you just compiling complete Bootstrap library which is pretty massive inside. So lets check your examples one by one
Basically if you want to use scss bootstrap you need to include only what you really need so it can be compiled faster and be lighter =)
Cheers!
Hi @sadikoff,
Thank you for pointing out the reason. I did change my app.scss to import the bootstrap css instead. @import "~bootstrap/dist/css/bootstrap.min.css"; . Webpack not compile the bootstrap so it's fast as expected. Then, I tried your method to import only some parts bootstrap scss that the page need. It works and reduce the time, but still. Because to make that simple page works as before, I have also to import many modules such as functions, variables, form, button, container ... And with hot reload, the latency still not make me happy :)).
So I would like to know if there are a way in Webpack, we can ignore the compile process for bootstrap scss? Or maybe compiling it only one time with cache ... ?
Sorry, but the only way to ignore bootstrap compiling is using precompiled css file. However IIRC webpack should have internal cache to speedup process, but I can't say if it works properly with bootstrap.
So as for me the only solution is for example on active development stage if you don't need to modify bootstrap styles is to use precompiled bootstrap css file
Cheers!
red_smeg
| posted hace 8 meses
Can't get past a yarn watch error.
package.json
{
"devDependencies": {
"@hotwired/stimulus": "^3.0.0",
"@popperjs/core": "^2.10.2",
"@symfony/stimulus-bridge": "^3.0.0",
"@symfony/webpack-encore": "^4.1.1",
"axios": "^0.24.0",
"bootstrap": "^5.0.0",
"core-js": "^3.0.0",
"jquery": "^3.6.0",
"regenerator-runtime": "^0.13.2",
"webpack-notifier": "^1.6.0"
},
"license": "UNLICENSED",
"private": true,
"scripts": {
"dev-server": "encore dev-server",
"dev": "encore dev",
"watch": "encore dev --watch",
"build": "encore production --progress"
}
}
Errors are:
❯ yarn install
yarn install v1.22.19
[1/4] 🔍 Resolving packages...
warning @symfony/webpack-encore > css-minimizer-webpack-plugin > cssnano > cssnano-preset-default > postcss-svgo > svgo > stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
warning " > @symfony/webpack-encore@4.1.2" has unmet peer dependency "@babel/core@^7.17.0".
warning " > @symfony/webpack-encore@4.1.2" has unmet peer dependency "@babel/preset-env@^7.16.0".
warning " > @symfony/webpack-encore@4.1.2" has unmet peer dependency "webpack@^5.72".
warning " > @symfony/webpack-encore@4.1.2" has unmet peer dependency "webpack-cli@^4.9.1".
warning "@symfony/webpack-encore > babel-loader@8.3.0" has unmet peer dependency "@babel/core@^7.0.0".
warning "@symfony/webpack-encore > babel-loader@8.3.0" has unmet peer dependency "webpack@>=2".
warning "@symfony/webpack-encore > css-loader@6.7.2" has unmet peer dependency "webpack@^5.0.0".
warning "@symfony/webpack-encore > mini-css-extract-plugin@2.7.0" has unmet peer dependency "webpack@^5.0.0".
warning "@symfony/webpack-encore > terser-webpack-plugin@5.3.6" has unmet peer dependency "webpack@^5.1.0".
warning "@symfony/webpack-encore > webpack-dev-server@4.11.1" has unmet peer dependency "webpack@^4.37.0 || ^5.0.0".
warning "@symfony/webpack-encore > @nuxt/friendly-errors-webpack-plugin@2.5.2" has unmet peer dependency "webpack@^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0".
warning "@symfony/webpack-encore > css-minimizer-webpack-plugin@4.2.2" has unmet peer dependency "webpack@^5.0.0".
warning "@symfony/webpack-encore > assets-webpack-plugin@7.0.0" has unmet peer dependency "webpack@>=5.0.0".
warning "@symfony/webpack-encore > clean-webpack-plugin@4.0.0" has unmet peer dependency "webpack@>=4.0.0 <6.0.0".
warning "@symfony/webpack-encore > style-loader@3.3.1" has unmet peer dependency "webpack@^5.0.0".
warning "@symfony/webpack-encore > webpack-dev-server > webpack-dev-middleware@5.3.3" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
✨ Done in 22.07s.
❯ yarn watch
yarn run v1.22.19
$ encore dev --watch
node:internal/modules/cjs/loader:1029
throw err;
^
Error: Cannot find module '@babel/core'
Require stack:
- /Users/markbateman/Documents/github/nc.ai.com/node_modules/@symfony/webpack-encore/lib/config/parse-runtime.js
- /Users/markbateman/Documents/github/nc.ai.com/node_modules/@symfony/webpack-encore/bin/encore.js
at Module._resolveFilename (node:internal/modules/cjs/loader:1026:15)
at Module._load (node:internal/modules/cjs/loader:872:27)
at Module.require (node:internal/modules/cjs/loader:1092:19)
at require (node:internal/modules/cjs/helpers:103:18)
at Object.<anonymous> (/Users/markbateman/Documents/github/nc.ai.com/node_modules/@symfony/webpack-encore/lib/config/parse-runtime.js:15:15)
at Module._compile (node:internal/modules/cjs/loader:1205:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1259:10)
at Module.load (node:internal/modules/cjs/loader:1068:32)
at Module._load (node:internal/modules/cjs/loader:909:12)
at Module.require (node:internal/modules/cjs/loader:1092:19) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/Users/markbateman/Documents/github/nc.ai.com/node_modules/@symfony/webpack-encore/lib/config/parse-runtime.js',
'/Users/markbateman/Documents/github/nc.ai.com/node_modules/@symfony/webpack-encore/bin/encore.js'
]
}
Node.js v19.1.0
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
If I manually add @babel then I get
❯ yarn watch
yarn run v1.22.19
$ encore dev --watch
Running webpack ...
node:internal/modules/cjs/loader:1029
throw err;
^
Error: Cannot find module 'webpack/bin/webpack'
Require stack:
- /Users/markbateman/Documents/github/nc.ai.com/node_modules/@symfony/webpack-encore/bin/encore.js
at Module._resolveFilename (node:internal/modules/cjs/loader:1026:15)
at Module._load (node:internal/modules/cjs/loader:872:27)
at Module.require (node:internal/modules/cjs/loader:1092:19)
at require (node:internal/modules/cjs/helpers:103:18)
at Object.<anonymous> (/Users/markbateman/Documents/github/nc.ai.com/node_modules/@symfony/webpack-encore/bin/encore.js:69:12)
at Module._compile (node:internal/modules/cjs/loader:1205:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1259:10)
at Module.load (node:internal/modules/cjs/loader:1068:32)
at Module._load (node:internal/modules/cjs/loader:909:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:82:12) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/Users/markbateman/Documents/github/nc.ai.com/node_modules/@symfony/webpack-encore/bin/encore.js'
]
}
Node.js v19.1.0
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
when I use the composer require I get the following: composer require encore
In BaseIO.php line 134:
Your github oauth token for github.com contains invalid characters: "[token ]"
Hey Joet,
Hm, it sounds like you have problems with the Composer setup on your laptop. I bet you cannot install any Composer package, not only "encore", right? Could you try to install something else and confirm that you see the same error?
I think you should try to upgrade your Composer to the latest first. Then probably try to run "composer diagnose" to check the system and of everything is ok - try install that package again.
Cheers!
It didn't work for me, I'm using yarn v. 1.22.15 but I got the next message after calling both npm run watch or yarn watch:
Error: Encore.isRuntimeEnvironmentConfigured is not a recognized property or method.
Hey daniel,
That's odd. did you install @symfony/webpack-encore, double-check that your package.json and composer.json files matches to the tutorial's. If you debug the Encore variable inside your webpack.config.js file, what do you get?
Cheers!
Hey @Antirixas
Inside your webpack.config file, write console.log(Encore.isProduction() to see if it's running in production mode, or, you can print the whole config like this console.log(Encore.getWebpackConfig(). You need to run webpack after each change
Cheers!
It didn't worked for me: I got the next message when executing yarn watch:
`Error: Encore.isRuntimeEnvironmentConfigured is not a recognized property or method`.
// composer.json
{
"require": {
"php": ">=8.0.2",
"ext-ctype": "*",
"ext-iconv": "*",
"symfony/asset": "6.0.*", // v6.0.3
"symfony/console": "6.0.*", // v6.0.3
"symfony/dotenv": "6.0.*", // v6.0.3
"symfony/flex": "^2", // v2.1.5
"symfony/framework-bundle": "6.0.*", // v6.0.4
"symfony/monolog-bundle": "^3.0", // v3.7.1
"symfony/runtime": "6.0.*", // v6.0.3
"symfony/twig-bundle": "6.0.*", // v6.0.3
"symfony/ux-turbo": "^2.0", // v2.0.1
"symfony/webpack-encore-bundle": "^1.13", // v1.13.2
"symfony/yaml": "6.0.*", // v6.0.3
"twig/extra-bundle": "^2.12|^3.0", // v3.3.8
"twig/twig": "^2.12|^3.0" // v3.3.8
},
"require-dev": {
"symfony/debug-bundle": "6.0.*", // v6.0.3
"symfony/stopwatch": "6.0.*", // v6.0.3
"symfony/web-profiler-bundle": "6.0.*" // v6.0.3
}
}
Hi guys,
I set up a starter project using bootstrap and 1 file scss (app.scss)Then any time I changed app.scss, the
yarn run dev-servertake too much long, about 3.8 ~ 4 second for compiling.Then, I realize that, if I remove the
@import "~bootstrap/scss/bootstrap";now is fast.Or, if I change app.scss to app.css and
@import "~bootstrap, it's also fast, just about 100 ms.So, shortly say:
Here is my app.scss:
Is there any one face the same issue? I don't know where this problem came from, my webpack.config.js have .enableSassLoader() and there's nothing special with it.