Import module from npm to javascript file

Question

I am trying to import showdown module in my home.js file.

The GitHub installation guide tells me to run npm install showdown and presents a simple example of using the module, as such:

var converter = new showdown.Converter(),
    text      = '# hello, markdown!',
    html      = converter.makeHtml(text);

I have installed the module using that command, but now I m not sure how to use this module inside my home.js situated under app/static/js path. I tried using require but it s not a solution since

it does not exist in the browser/client-side JavaScript.

Project Tree

├── app
│   ├── __init__.py
│   ├── routes.py
│   └── static
│       ├── js
│       │   └── home.js
│       └── styles
│           ├── main.css
│           └── normalize.css
├── config.py
├── package-lock.json
├── package.json
├── run.py
└── node_modules

Javascript file home.js


const textEditor = document.querySelector('.text-editor')
const preview = document.querySelector('.preview')
var converter = new showdown.Converter() // <- error fires here

console.log('text-editor', textEditor)
console.log('preview', preview)

textEditor.addEventListener('keyup', event=>{
    const {value} = event.target;

    const html = converter.makeHtml(value)

    preview.innerHtml = html
});

Question: How do I import this showdown inside my index.js so that I can be able to use every function of the module?

Looking at [the documentation](https://github.com/showdownjs/showdown) it lists `npm install showdown` under "npm (server-side)". Why are you following **that** section of the instructions when you are writing **client-side** JavaScript?! — Quentin, Jul 03 '20 at 10:47
You probably want to use webpack or similar to bundle everything together for the browser, but I'm out-of-date (there may be better tools, or browser support I don't know about) — Rup, Jul 03 '20 at 10:47
@Quentin should I use `bower install showdown` instead? Please let me know the difference whenever you can. — netlemon, Jul 03 '20 at 10:50
@Rup someone told me sth about bundling, I ll research more on that then. — netlemon, Jul 03 '20 at 10:51
@newbie99 — Are you using bower as a package manager already? If so, yes. Otherwise, no. — Quentin, Jul 03 '20 at 10:52
I was following someone s tutorial on `showdown` and he did the same thing. He first did `npm install showdown` then copied the `node_modules/showdown/dist/showdown.js` into his project using it without a problem. But for me, didn't work. — netlemon, Jul 03 '20 at 10:55

Dhruv Shah · Accepted Answer · 2020-07-03T11:16:53.233

1

You can use Browserify for this. It allows you to use require() for requiring node_modules.

Here are the steps in which you can use the showdown npm package in your project.

Install browserify globally using: npm install -g browserify
Use require() to include your npm modules in your project.

const showdown = require('showdown');
Prepare a bundle for accessing require() function in your home.js usnig browserify:

browserify js/home.js > bundle.js
Include the bundle.js file created in your code using the script tag.

<script src="bundle.js"></script>

Here are some resources that explain how to use browserify in more detail:

Additionally, this article also explains well how to choose the tool for compiling your front-end applications based on your requirements. And it contains detailed information about how to use browserify

edited Jul 03 '20 at 11:16

answered Jul 03 '20 at 10:58

Dhruv Shah

1,611
1
8
22

Do I need to `npm install exorcist` as well? – netlemon Jul 03 '20 at 11:05
No you dont need to install exorcist. It is an optional step required to separate `source-map` files. I have also updated the command in my answer. – Dhruv Shah Jul 03 '20 at 11:13
Where should I write the 2nd step with `const showdown=require('showdown')`. In my `main.js` file doesn't work. I get `require` is not defined – netlemon Jul 03 '20 at 11:26
@newbie99 more info regarding `what does not work` is needed, and `be self-motivated`. [here](https://stackoverflow.com/questions/5797852/in-node-js-how-do-i-include-functions-from-my-other-files) is info about `require`. – Timo Mar 31 '21 at 06:25

Import module from npm to javascript file

1 Answers1