Symfony Webpack Encore 和公司通用捆绑包

Question

There maybe some documentation out there on how to deal with this situation but i don't even know how to look for it.

Here's the deal, we have a Symfony "module" (ex Bundle) company-made that we share across multiple projects. Atm it is not listed on packagist and we require it with local composer repository paths if that matters.

Inside the shared module we have some css and some js that needs to be included. Since one of those shared-module (or bundle, w/e you want to call it) has bootstrap (the css frontend toolkit) the module itself requires it together with his css.

Inside the shared module we have a JS file "CoreLibrary.js" and we import the required js like this:

import $ from 'jquery';
import 'bootstrap';
export class CoreLibrary {
    ... more code
}

Then, inside the main application we include the common js file from the app.js file like this:

import { CoreLibrary } from '../public/bundles/thebundlename/js/CoreLibrary';

That doesn't seem to be ideal, and beside that, with encore we have to repeat

import $ from 'jquery';
import 'bootstrap';
import { CoreLibrary } from '../public/bundles/thebundlename/js/CoreLibrary';

In every .js file we need. That's so much of a burden that I can't belive there are no better ways do to that.

Sidenote: not so long ago i had to even follow this one: Yarn and Webpack Encore configuration in Symfony 4.1 project because i was getting error during "yarn watch".

What is the correct way of doing it with company-shared module that requires 3rd party library like bootstrap?

Answer 1

For global jquery i have this in main js file

const $ = require('jquery');
global.$ = global.jQuery = $;

Also uncommented line in webpack config about jquery.