DEV Community

Cover image for Import Node packages in React and React Native.
Daryl Aranha
Daryl Aranha

Posted on

Import Node packages in React and React Native.

Do you wish to use packages that are typically used on the backend in your frontend app? Well, you can do it with the help of Browserify.

What is Browserify?

Itโ€™s a JavaScript bundler that allows us to use node modules to be compiled to use in the browser. It can also be used to keep track of your own and third-party code.

How do I use it?

In a nutshell, you pass browserify your custom code or an external library, and it takes care of the rest.

Now, for instance, there is a need for a third-party package xml-js in your web app, then you need to follow these sets.

Create a file, say xmlConverter.js

const convert = require(โ€˜xml-jsโ€™);
module.exports = convert;
Enter fullscreen mode Exit fullscreen mode

Next, pass this file to browserify with -o option. This -o is used to tell which file will contain the complied code.

$ browserify xmlConverter.js -o xmlComplied.js
Enter fullscreen mode Exit fullscreen mode

This file can now be utilized in your web application. This, however, will not function with native programs. Aakash N S gives detailed instructions on how to do so, or you can continue reading if you don't want to delve into depth. I've built a script that will take care of everything for you, and it will work for both web and mobile apps.

Using Docker Run: (link)

$ cd <project_directory>
$ docker run -it --rm -v "${PWD}":/app node-to-app-compiler:v0.0.1 <option> <package_name>
Enter fullscreen mode Exit fullscreen mode

Example:

$ docker run -it --rm -v "${PWD}":/app node-to-app-compiler:v0.0.1 xml-js
Enter fullscreen mode Exit fullscreen mode

Using Terminal: (link)

Clone this repo and run the shell script.

$ chmod +x compiler.sh
$ ./complier.sh <options> <package_name>
Enter fullscreen mode Exit fullscreen mode

Example:

$ ./complier.sh xml-js
Enter fullscreen mode Exit fullscreen mode

Options:

โ€“local: This parameter tells the script whether you're looking for a node package that comes pre-installed. This script tries to install the package using npm by default.

References

Top comments (0)