Symfony Webpack Encore with company common bundle - javascript

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?

For global jquery i have this in main js file
const $ = require('jquery');
global.$ = global.jQuery = $;
Also uncommented line in webpack config about jquery.

Related

How to import chessboard.js node module into Angular project?

I'm trying to use chessboard.js as a node module dependency to design chess board UI for one of my Angular projects. As per the documentation instruction
npm install #chrisoakman/chessboardjs
After that I tried
import { ChessBoard } from '#chrisoakman/chessboardjs/dist/chessboard-1.0.0';
in my angular component but it doesn't recognize any module with that name.
Upon opening the js file in node_modules, I found that there were no module.exports anywhere and
the whole file contents were written inside an IIFE (function(){....})().
There was on line:1809
// TODO: do module exports here
window['Chessboard'] = constructor
Which I figured I've to write module.exports by myself
How do I export this module now so that I can import and start using the library?
https://chessboardjs.com/download
P.S : The library works when sourced using script tag on a html page.

How do I globally declare jQuery inside a Vue-CLI 3 project?

I have seen a lot of questions about this on SO and elsewhere, but so far I had no luck.
For a bit of context, I built a SPA website on a Vue project I created with an "old" command. I don't remember which one but it looked like the following:
vue init webpack <my project>
I recently realized that Vue-CLI 3 would be way easier for me to maintain, keep updated and improve for various contextual reasons, so I installed #vue/cli, created a new project and started to copy/paste files from my old project to the new one.
The old project had a build directory with various webpack config files in it, and I needed jQuery set globally for a package I wanted to use, so I added the following to the "base" config of Webpack.
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}),
However, with the new project, all I have now as config file is babel.config.js and vue.config.js at the project's root, there are no build nor config directory.
I tried to set jQuery globally with the following lines inside my main.js file:
import jQuery from 'jquery'
window.$ = window.jQuery = jQuery
global.$ = global.jQuery = jQuery
But everytime I reload my page, I get the following message:
jQuery is not defined
So, so far, I use the CDN version of jQuery but I don't feel at ease with this solution.
How should I proceed with a Vue-CLI 3 project?
Thank you in advance
You can use Vue plugins. This allows you to add new property to every single component.
In main.js
import Vue from 'vue';
import jQuery from 'jquery';
Vue.use({
install (V) {
V.$jQuery = V.prototype.$jQuery = jQuery
}
})
Then you can use jQuery everywhere in component.
In MyComponent.vue
import Vue from 'vue'
export default {
mounted () {
this.$jQuery('h1').text('Hello World')
Vue.$jQuery('h1').text('Hello World')
}
}
Even another js file.
In util.js
import Vue from 'vue'
Vue.$jQuery('h1').text('Hello World')
You could go on public/index.html and add the script tag to the body with the route to your jquery file or cdn.
If you put it in a jquery folder in public it would look like:
<body>
<div id="app"></div>
<script type="text/javascript" src="/jquery/jquery-3.4.1.min.js"></script>
</body>
I am not sure if that's exactly what you want but it would make it available globally across your project.
If you are using Jquery plugins, you should do this in your main.js:
/*
* If using Jquery plugins they will expect to be available in the global namespace,
* which isn’t the case when you import/require it. So manually assign jquery to
* window. Use require instead of import because the imports are hoisted to the
* top of a file by the compiler, which would break VueJS code.
*/
const $ = require('jquery')
window.jQuery = window.$ = $;

Webpack - Import node module as though it was a normal folder

I have a JS app which is importing a custom node_module with helper functions etc. I'd like to import these functions using ES6 imports like so:
import exampleHelper from 'mycustommodule/helpers/foo'
and have Webpack just import this file as though it was any other include in the app. ie Use the same babelrc, webpack config, package.json as the existing app.
At the moment none of the imports in the custom module are resolving.
I've looked into Webpack externals but I can't work out if they are what I'm looking for. Any advice would be appreciated.

Where do external dependencies live in vanilla JS web components?

I'm experimenting with using web components for a project — essentially custom elements powered by attributes, ideally imported by <link rel="import">.
Here's the problem: I can't find conclusive guidance on where to stick any external libraries my component relies on, such as moment.js or even jQuery.
Most component examples I've seen strictly use vanilla JS. When they do use an external library, they often seem to drop them in using Bower or npm and and refer to them explicitly within the component's HTML:
<script type="text/javascript"
src="/bower_components/jquery/dist/jquery.min.js></script>
These days I'm more accustomed to using webpack to bundle dependencies, so this seems a bit odd.
My question: is it considered better form to include each component's library dependencies within the component directory, or have a central node_modules folder at the project level? How does webpack fit into this?
It's better to have a central node_modules folder at the project level. Most people use Webpack to bundle their code with their dependencies. They use require or import their modules for each component.
a.component.js
import React from 'react'
import $ from 'jquery'
b.component.js
import React from 'react'
app.js
import A from 'a.component.js'
import B from 'b.component.js'
Webpack will have one "entry": app.js and compile it output: app.min.js
why?
It's easier to manage (update, delete, add) dependencies with npm.
The browser will load one file instead of multiple external files.
External info:
https://webpack.js.org/concepts/
https://www.quora.com/Why-use-Bower-when-there-is-npm

Ember CLI import ES6 file to ember-cli-builds.js

So the ember-cli-builds.js file clearly states
// If the library that you are including contains AMD or ES6
// modules that you would like to import into your application
// please specify an object with the list of modules as keys
// along with the exports of each module as its value.
I'm importing regular javascript files this way
app.import('vendor/global.js');
but what is the proper way to "specify an object with the list of modules as keys along with the exports of each module as it's value"?
At the "AMD Javascript modules" heading of the guides, it is described like that:
Provide the asset path as the first argument, and the list of modules
and exports as the second.
app.import('bower_components/ic-ajax/dist/named-amd/main.js', {
exports: {
'ic-ajax': [
'default',
'defineFixture',
'lookupFixture',
'raw',
'request'
]
}
});
You can now import them in your app. (e.g. import { raw as icAjaxRaw } from 'ic-ajax';)
Reference From Guide
The selector answer is for older ember, pre ember-auto-import (webpack), and pre Ember Octane.
In modern ember, after npm installing a package, you'll be able to import directly from that package.
Example:
npm install qs
then anywhere in your app
import qs from 'qs';
related, it is recommended to avoid placing files in the vendor folder that you want to integrate with the module system. the vendor exists outside of the bundle, so if you have a standalone module, you can place it in your app folder, maybe under some descriptive folder:
app/external-modules/global.js, allowing you to import from it like:
import * as globalStuff from '<my-app>/external-modules/global';

Categories

Resources