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 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
– Quentin, Commented Jul 3, 2020 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
– Rup, Commented Jul 3, 2020 at 10:47
@Quentin should I use bower install showdown instead? Please let me know the difference whenever you can. — netlemon
– netlemon, Commented Jul 3, 2020 at 10:50
@Rup someone told me sth about bundling, I ll research more on that then. — netlemon
– netlemon, Commented Jul 3, 2020 at 10:51
@newbie99 — Are you using bower as a package manager already? If so, yes. Otherwise, no. — Quentin
– Quentin, Commented Jul 3, 2020 at 10:52

Dhruv Shah · Accepted Answer · 2020-07-03 11:16:53Z

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 3, 2020 at 11:16

answered Jul 3, 2020 at 10:58

Dhruv Shah

1,6711 gold badge10 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

netlemon Over a year ago

Do I need to npm install exorcist as well?

Dhruv Shah Over a year ago

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.

netlemon Over a year ago

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

Timo Over a year ago

@newbie99 more info regarding what does not work is needed, and be self-motivated. here is info about require.

Collectives™ on Stack Overflow

Import module from npm to javascript file

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related