Cómo instalar y configurar Bootstrap con Symfony Webpack Encore

Pasos para instalar Bootstrap con el bundle Symfony Webpack Encore

Image for post
Image for post
Symfony + WebpackEncore

Paso 1. Instalar y configurar Webpack Encore

yarn add bootstrap

Paso 2. Problemas

// assets/js/collapse-menu.jsvar $ = require(‘jquery’);import 'node_modules/bootstrap/js/src/util.js';import 'node_modules/bootstrap/js/src/collapse.js';
yarn run encore dev
error in ./node_modules/bootstrap/js/src/collapse.jsModule parse failed: Unexpected token (278:8)You may need an appropriate loader to handle this file type.| _getConfig(config) {|   config = {|     ...Default,|     ...config|   }
_getConfig(e){return(e={...p,...e})

Para Babel < 7

yarn add babel-preset-es2015 --save-devyarn add babel-preset-stage-3 --save-dev
{“presets”: [  [“es2015”, {    “loose”: true,    “modules”: false,    “useBuiltIns”: true  }],  “stage-3”]
}

Para Babel ≥ 7

yarn add @babel/preset-env --save-dev
{
“presets”: [
[
@babel/preset-env”,
{
“targets”: {
“chrome”: “58”,
“ie”: “11”
},
“useBuiltIns”: “usage”
}
]
]
}
"browserslist": [  "> 0.25%, not dead"]

Paso 3. Soluciones

@symfony/webpack-encore/lib/config-generator.js
.configureBabel(null, {  includeNodeModules: ['bootstrap']})

¿Quieres recibir más artículos como este?

Written by

Entre paseo y paseo con Simba desarrollo en Symfony y React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store