Imagine that, at the same time, library C<\/strong> uses another five different libraries to handle different languages and you end up with a scheme like this one.<\/p>\n\n\n\n That\u2019s called the dependency tree<\/em> of your application.<\/p>\n\n\n\n Sooner or later your project will end up with dozens of dependencies (you won\u2019t even be aware of some of them). And what\u2019s even worse, each of those dependencies will only be compatible with certain specific versions.<\/p>\n\n\n\n This situation would be a nightmare to manage manually. A simple update in a submodule might break your dependency tree and your app might not compile. That\u2019s exactly the problem that npm solves.<\/p>\n\n\n\n When you create an npm library you will create a json file called At the same time, the dependencies of your library will have their own If someone wants to add your library to their project, then they will just need to run:<\/p>\n\n\n\n Magically, all the dependencies of the tree will be downloaded and installed. This system is amazing because in practice you don\u2019t need to care about the dependencies at all.<\/p>\n\n\n\n The main one is that developers lose control of which code they are including in their projects. Concerns about security have arisen in the past and critical systems require a very controlled and strict dependency tree.<\/p>\n\n\n\n Take this example: a newly created project in React Native has more than 1500 dependencies. It is unlikely that more than a few people know them all. If someone introduced some malicious code \u2013 or just a bug \u2013 a lot of developers would probably adopt this code without even knowing it.<\/p>\n\n\n\n Don\u2019t worry. This is a very rare occurrence. However it has already happened<\/a> a few times.<\/p>\n\n\n\n Another example is the dispute in 2019 between an open-source developer and an American company<\/a> that almost broke the world\u2019s internet. Long story short, the developer decided to remove a quite-trivial-yet-often-used library from npm and suddenly the dependency tree of thousands of projects around the world was broken.<\/p>\n\n\n\n The fastest and safest way to write code is by not<\/em> writing it. If you usually need to copy-paste some features among different projects, you might prefer to create a new JavaScript library and write those features only once.<\/p>\n\n\n\n Then, the next time you need to use those features, you don\u2019t need to copy-paste or write them again \u2013 you just reuse your library by using npm. What\u2019s more, if you find a bug, you can solve it once and distribute the fix to the rest of your projects.<\/p>\n\n\n\n If you are starting from scratch, it is time to git init.<\/em> Then you can go to GitHub\/gitLab and create a new git repo.<\/p>\n\n\n\n open the terminal and navigate to your project, then type “npm init” <\/p>\n\n\n\n This tool will help you to create a new If you don\u2019t want to fill the rest of the fields now, you can skip them and come back later to add them in the package.json<\/em> file.<\/p>\n\n\n\n Usually you have some code that you have been copy-pasting between various projects and you\u2019re moving it to an npm module to reuse it in the future.<\/p>\n\n\n\n If that\u2019s the case, now it\u2019s time to add this code to the npm project. Next you will need to think of the API that you will expose to the world.<\/p>\n\n\n\n Define Your Public API With module.exports<\/strong><\/span><\/p>\n\n\n\n The way that you tell npm what your library is exposing is by using You can specify whatever you want in the Then, your code will go to the index.js<\/em> and will ascertain the value of the module. For example, if inside your index.js<\/em> you set:<\/p>\n\n\n\n Then musterVariable<\/em> will be a number with value 42.<\/em><\/p>\n\n\n\n A more realistic approach would be to set this value to an instance of a class:<\/p>\n\n\n\n musterVariable is now an instance of MyMusterProject and you can now do:<\/p>\n\n\n\n The easiest and trivial step is also one of the most important. Having a good Readme<\/em> file ensures that other people will be able to understand what your library\u2019s about \u2013 and how to use it.<\/p>\n\n\n\n You don\u2019t need to be too creative about it, just use a template like this one<\/a> and try to fill all the fields in a clear way.<\/p>\n\n\n\n The users of your npm library will appreciate that you saved them time. Even a future version of you will be happy to have clear docs!<\/p>\n\n\n\n example : <\/span><\/p>\n\n\n\n #And here, the rendered view:<\/p>\n\n\n\n If you don\u2019t have a npm account, it\u2019s time to sign up<\/a>.<\/p>\n\n\n\n npm<\/em> is a command line tool.<\/em> Open the console and write:<\/p>\n\n\n\n You can check that you are correctly logged in with<\/p>\n\n\n\n Tip: prior to publishing a new npm package, ensure that you are logged with the adequate user. This is especially important if you use the same machine for work and side projects.<\/em><\/p>\n\n\n\n We are almost ready to publish. But just before we do, we can run a quick local test.<\/p>\n\n\n\n First, navigate to your library file path, the same path in which you placed your Now create a new JavaScript project in your system and again use You can use this process in the future when you plan to update your library so you don\u2019t need to publish every time you want to test new changes.<\/p>\n\n\n\n Now that you\u2019ve created the library and you tested it locally, it\u2019s time to share it with the world.<\/p>\n\n\n\n npm will start to work on publishing your library to the official repository.<\/p>\n\n\n\n When it finishes, the library should be available in https:\/\/www.npmjs.com<\/a> and every user in the world should be able to install it using We\u2019re arriving at the end of the article, but it\u2019s only the beginning of your library.<\/p>\n\n\n\n If you start using it and other users adopt it, you will also need to maintain it. From time to time you will have to introduce new features or update deprecated code. Whenever you do that, remember to use Semantic Versioning<\/a> (major.minor.patch).<\/p>\n\n\n\n npm eases the process of maintaining your code with the npm versioning tools:<\/p>\n\n\n\n![\"\"](\"https:\/\/bugfender.com\/wp-content\/uploads\/2020\/07\/dependency-tree-ok-1024x498-1.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/bugfender.com\/wp-content\/uploads\/2020\/07\/dependency-tree-wrong-1024x498-1.png\")
<\/figure>\n\n\n\npackage.json<\/strong><\/code><\/span> in which you specify which dependencies your JS library has.<\/p>\n\n\n\npackage.json<\/code> files, creating a full dependency tree.<\/p>\n\n\n\n$ npm install <your-library-package-name><\/code><\/pre>\n\n\n\nIs There Any Downside of Using a Package Manager?<\/h5>\n\n\n\n
Why Should You Create Your Own npm Package Libraries?<\/h5>\n\n\n\n
Creating Your Own npm Package<\/span><\/h3>\n\n\n\n
1. Create a New Git Repository<\/h4>\n\n\n\n
2. Create your package file<\/h4>\n\n\n\n
$ cd folder\/to\/your project\n$ npm init<\/code><\/pre>\n\n\n\npackage.json<\/code> asking you for the basic data needed. Some quick tips:<\/p>\n\n\n\n1.0.0<\/code>, however if you are just starting your project you\u2019re probably better off starting with something like 0.0.1<\/code> and switching to 1.0.0<\/code> when the code has been tested further. Also, other developers using your library will appreciate that your versioning reflects the state of your code.<\/li>reguire('your-package')<\/code>. If you are using only one file, index.js<\/code> is enough. However, if your project is about to have more files, it is better that you use src\/index.js<\/code><\/li><\/ul>\n\n\n\n3. Adding Code To Your JavaScript Project and Establishing The Public API<\/h4>\n\n\n\n
module.exports<\/code><\/strong>, an object that should be present in the entry point of your library (usually the index.js<\/em>).<\/p>\n\n\n\nmodule.exports<\/strong><\/code>. It could be a number, a function, a class\u2026 Imagine you are building the module from the npm-project-name “my-muster-project<\/strong><\/em>“. When a user types:<\/p>\n\n\n\nconst musterVariable = require('my-muster-project');<\/code><\/pre>\n\n\n\nmodule.exports = 42;<\/code><\/pre>\n\n\n\n\/\/ index.js\nmodule.exports = MyMusterProject; \n\n\/\/ In your app\nconst MusterClass = require('my-muster-project');\nconst musterVariable = new MusterClass();<\/code><\/pre>\n\n\n\n \/\/call some function of your npm-project\nmusterVariable.prepareCoffee() <\/code><\/pre>\n\n\n\n4. Add a README.md File<\/h4>\n\n\n\n
# Markdown Input<\/p>\n\n\n\n# Foobar\n\nFoobar is a Python library for dealing with word pluralization.\n\n## Installation\n\nUse the package manager [pip](https:\/\/pip.pypa.io\/en\/stable\/) to install foobar.\n\n```bash\npip install foobar\n```\n\n## Usage\n\n```python\nimport foobar\n\nfoobar.pluralize('word') # returns 'words'\nfoobar.pluralize('goose') # returns 'geese'\nfoobar.singularize('phenomena') # returns 'phenomenon'\n```\n\n## Contributing\nPull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.\n\nPlease make sure to update tests as appropriate.\n\n## License\n[MIT](https:\/\/choosealicense.com\/licenses\/mit\/)<\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2021\/02\/image-4.png\")
<\/figure>\n\n\n\n5. Publish on npm<\/h4>\n\n\n\n
Sign up to npm<\/span><\/h5>\n\n\n\n
$ npm login # you will be prompted your mail and password <\/code><\/pre>\n\n\n\n$ npm whoami<\/code><\/pre>\n\n\n\nTest Your Framework<\/strong><\/span><\/h5>\n\n\n\n
package.json<\/code>, and use the command npm link<\/code>.<\/p>\n\n\n\n$ cd .\/route-to-your-library\/\n$ npm link # This adds the project to your local npm registry<\/code><\/pre>\n\n\n\nnpm link<\/code>, but specifying the name of the package \u2013 the same one that you specified in the npm init<\/code> step.<\/p>\n\n\n\n$ cd .\/route-to-a-new-javascript-project\/\n$ npm link [name-of-the-package] # This installs the library in the project<\/code><\/pre>\n\n\n\nPublish<\/strong><\/span><\/h5>\n\n\n\n
$ cd .\/route-to-your-library\/\n$ npm publish<\/code><\/pre>\n\n\n\nnpm install <package-name><\/code><\/strong>.<\/p>\n\n\n\n6. Updating your library<\/h4>\n\n\n\n
$ npm version patch # From 0.0.1 to 0.0.2\n$ npm version minor # From 0.1.0 to 0.2.0\n$ npm version major # From 1.0.0 to 2.0.0<\/code><\/pre>\n\n\n\n