With more than 1.3 million packages available (status September 2020), a node package manager (NPM) is the largest software package database in the world. Irrespective of whether you are looking for image sliders, date selection fields, or animations – you will find a suitable package on NPM.
We are represented as shopware AG on NPM of course. We provide the following, among other things:
- Standardized packages for uniform code formatting
- Tools for testing Shopware and plugins
- Tools which we use in-house
Installing other dependencies
We demonstrate below how you can install other dependencies. This allows you to both reduce the effort and expense of development and also to provide your plugin with more features. We will use the "missionlog" package to give an example of integration within Shopware. This is a lightweight logger with an extendible configuration.
Before we deal with installing the package, we first have to create a so-called .json file. This file contains meta-information about the author, the git repository and the part that is of interest to us: the dependencies.
The consoles application from NPM offers us a simple option for creating a .json package automatically via the command npm init -y. Switch to it in the “Resources/app” folder and then here either to the “storefront” or “administration” folders – depending where the package is to be used.
Installing the package
After we have created the preconditions, we can install the required package using the following command. At this point you can install any package, depending upon what type of plugin you wish to use.
Installing a package via NPM
Registering a package in the build system
To do this we put a new “build” folder below the current area: either “Resources/app/storefront” or “Resources/app/administration”. We then create a new file with the name webpack.config.js. We thereby make it possible to extend the Webpack configuration of Shopware.
Now enter the following code:
Content of build/webpack.config.js
Let us take a closer look at the code. In the first line, we import the two functions join and resolve for the path module of Node.js. In the second line, we export a so-called arrow function. The build system from Shopware calls up this function when either the administration or storefront is being built.
Then comes the exciting part for us: registering the alias. The alias for “missionlog” is given the prefix “@”, so it is also possible to recognize later on in the source files that this is an alias. We will use the result of the two functions of the path module previously imported as a value.
We proceed from the inside to the outside. We use join() to reflect the path to the package inside the node_modules folder. The node_modules folder contains all the packages that we have installed via npm install. After we have identified the relevant path to the package, we use the resolve function to transform this path into an absolute path.
Using our dependency in our own code
Once we have installed all the dependencies and registered the package in the build system with an alias, we can use the package in our own code.
Using missionlog with our alias
We import the function log as well as the constants tag via “Destructuring” in the specified code. Through the use of the alias, we keep the paths small and recognise that this is an alias at first glance via the prefix.
With the integration into the build system which is used for the storefront and administration, we have the option of installing our own dependencies. By extending the Webpack configuration of Shopware, we have created a powerful tool that offers a variety of options. For example, you can support other languages such as TypeScript or integrate tools to increase the code quality. The procedure works in the same way for both the storefront and administration. All options are therefore open to you.
Would you like to go even deeper into the topic? Then watch the video tutorial: