从 npm 导入模块到 javascript 文件

Question

我正在尝试在我的home.js文件中导入showdown模块。

GitHub 安装指南告诉我运行npm install showdown并提供使用该模块的简单示例，如下所示：

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

我已经使用该命令安装了该模块，但现在我不确定如何在位于app/static/js路径下的home.js中使用该模块。 我尝试使用require但这不是解决方案，因为

它在浏览器/客户端 JavaScript 中不存在。

项目树

├── 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 文件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
});

问题：如何在我的index.js中导入这个showdown ，以便能够使用模块的每个 function？

Answer 1

您可以为此使用Browserify 。 它允许您使用require()来要求 node_modules。

以下是您可以在项目中使用showdown npm package 的步骤。

1. 使用以下命令全局安装browserify ： npm install -g browserify

2. 使用require()在项目中包含 npm 模块。

   const showdown = require('showdown');

3. 在home.js usnig browserify 中准备一个用于访问 require() function 的包：

   browserify js/home.js > bundle.js

4. 使用script标签包含在您的代码中创建的bundle.js文件。

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

这里有一些资源可以更详细地解释如何使用browserify ：

1. https://medium.com/jeremy-keeshin/hello-world-for-javascript-with-npm-modules-in-the-browser-6020f82d1072

2. https://github.com/browserify/browserify#usage

此外，本文还很好地解释了如何根据您的需求选择编译前端应用程序的工具。 它包含有关如何使用browserify的详细信息