Until recently there were three ways to introduce javascript dependencies in OFN:
- use Gemfile and gem wrappers, for example, we use jquery-rails
- add dependency source code to vendor/assets/javascript
- add dependency to app/assets/javascripts/shared
We have now decided to introduce yarn to improve the way we manage javascript dependencies in OFN. https://github.com/openfoodfoundation/openfoodnetwork/pull/5200
This means we now have a fourth and recommended way to add dependencies to OFN:
- package.json
If you want to add a new javascript dependency to OFN, all you need to do is to install yarn locally (npm install -g yarn), add the dependency to âdependenciesâ in package.json, run yarn install and commit the new package.json and yarn.lock files
Meanwhile we should also move current dependencies from Gemfile and vendor to the package.json file, this will resolve two problems:
- lots of js code in /vendor and app/assets/javascripts/shared (quite a few of them dont have the version specified)
- rails gem wrappers of js dependencies are very usually outdated
Iâll make a summary here of the current state:
- Gemfile âangularjs-railsâ, â1.5.5â
- Gemfile sass
- Gemfile sass-rails
- Gemfile âangularjs-file-upload-railsâ, â~> 2.4.1â
- Gemfile gmaps4rails
- Gemfile âcoffee-railsâ, â~> 4.2.2â
- Gemfile compass-rails
- Gemfile foundation-icons-sass-rails
- Gemfile âmomentjs-railsâ
- Gemfile âfoundation-railsâ, â= 5.5.2.1â
- Gemfile âjquery-migrate-railsâ
- Gemfile âjquery-railsâ, â3.1.5â
- Gemfile âjquery-ui-railsâ, â~> 4.2â
- Gemfile âselect2-railsâ, â~> 3.4.7â
- vendor angular-backstretch.js
- vendor angular-flash.min.js
- vendor angular-google-maps.min.js
- vendor angular-scroll.min.js
- vendor autocomplete.min.js
- vendor bluebird.js - this is a dependency of angular-google-maps.min.js
- vendor css_browser_selector_dev.js
- vendor equalize.js
- vendor handlebars.js - no version!
- vendor jquery.adaptivemenu.js
- vendor jquery.cookie.js
- vendor jquery.horizontalNav.js
- vendor jquery.jstree
- vendor jquery.powertip.js
- vendor jquery-ui-timepicker-addon.js
- vendor jquery.vAlign.js
- vendor leaflet-1.6.0.js
- vendor leaflet-providers.js
- vendor lodash.underscore.js
- vendor modernizr.js
- vendor responsive-tables.js
- vendor textAngular.min.js
- vendor textAngular-rangy.min.js
- vendor textAngular-sanitize.min.js
- shared assets angular-local-storage.js
- shared assets angular-slideables.js
- shared assets jquery-1.8.0.js
- shared assets mm-foundation-tpls-0.9.0-20180826174721.min.js
- shared assets ng-infinite-scroll.min.js
- shared assets ng-tags-input.min.js
All these 14 gems plus 30 js files can be removed and simply added to package.json as a dependency.