Diese Seite ist auch auf Deutsch verfügbar. Zur deutschen Seite wechseln

Installing your own dependencies via NPM

Zum Deutschen Artikel

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.

npm-page-missionlog 

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

We have a so-called build system for the storefront as well as for administration.  Based on Webpack, this transpile source files so that the code can also be run in older browsers. We have to make the file path of the package known to the build system and give an alias/pseudonym so that the package installed is also recognized and consolidated in this system. We are then able to consign our own name so that the package can be imported in JavaScript code.

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. 

Conclusion

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:  

 

Newsletter

Never miss out - get all the latest news sent straight to your inbox.