安装 npm 模块时遇到问题答案

【问题标题】：I encounter a problem when installing an npm module安装 npm 模块时遇到问题
【发布时间】：2020-01-01 18:30:37
【问题描述】：

这里我从javascript和nodejs/npm/webpack/theme-bootstrap开始，我在安装一个npm模块时遇到问题，我不明白为什么...我尝试了各种包，所以我说它必须是一个误会……


    root/
      ├── .babelrc
      ├── .gitignore
      ├── package.json
      ├── postcss.config.js
      ├── webpack.config.js
      ├── src/
      │   ├── js/
      │   │   ├── modules/
      │   │   ├── vendor/
      │   │   └── app.js
      └── dist/
          └── js/
              └── app.js

1) npm i html-to-text (https://www.npmjs.com/package/html-to-text)
2) npm 安装
3) 在 app.js 中导入文件

    import "./modules/htmltotext";

4) 在 htmltotext.js 中导入模块（我创建了这个文件）

import "html-to-text";
const htmlToText = require('html-to-text');

5) npm 运行构建
6）用网络服务器启动HTML页面，我遇到了错误

错误：未捕获的 ReferenceError：htmlToText 未在 localhost/:20 定义


    <!DOCTYPE html>
    <html lang="fr">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="dist/js/app.js"></script>
    </head>

    <body>
        <div id="root">
            <h1>Hello World</h1>
        </div>
    </body>
    <script>
        const text = htmlToText.fromString('<h1>Hello World</h1>', {
            wordwrap: 130
        });
        console.log(text); // Hello World
        alert(text);
    </script>

    </html>

我必须在 webpack 中做其他事情吗？还是我错过了其他东西？我看了很多教程却不明白为什么它不起作用......你能帮我吗？谢谢

【问题讨论】：

标签： javascript npm webpack

【解决方案1】：

如果我尝试这个，我会得到一个错误，因为它不再在我的 node_module 中

npm install html-to-text -g

如果我以正常方式安装它 -> 施工做得很好

npm install html-to-text

构建后app.js文件变大

库的路径不正确？
我不知道这是否是正确的导入方法，但它似乎在构建过程中起作用......

import "html-to-text";
const htmlToText = require('html-to-text');

在实际加载文档之前加载 Js 文件？我在代码中添加了 $ (document) .ready (function () 但这并没有改变任何东西

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="dist/js/app.js"></script>
</head>

<body>
    <div id="root">
        <h1>Hello World</h1>
    </div>
</body>
<script>
$( document ).ready(function() {
    console.log( "ready!" ); // ok
    const text = htmlToText.fromString('<h1>Hello World</h1>', {
        wordwrap: 130
    });
    console.log(text); //Uncaught ReferenceError: htmlToText is not defined
    alert(text);
});
</script>

</html>

因为丑化？
uglify-js 不在 npm 包列表中

包（html-to-text）不会出现问题，一般我不能使用我自己添加的包...

我安装的软件包位于 node_modules 文件夹中，但好像我没有正确调用它们……或者缺少某些东西。

如果我可以给你更多信息告诉我...

【讨论】：

【解决方案2】：

所以您知道您的主要问题是它无法识别 htmlToText。这可能是由于不同的原因。

您是否已经尝试在全球范围内安装 html-to-text：

npm install html-to-text -g

我有时也想做的是尝试查看 node_modules 文件夹并检查它是否真的在其中。因此，只需打开 node_modules 文件夹并向下滚动（按字母顺序）并查看它是否在其中（因此以 'H' 开头的模型在哪里。

如果它在那里，我只看到其他两种可能性：

库路径不正确
在实际加载文档之前加载 Js 文件。

顺便说一句，尝试留在 app.js 文件中。如果您从将东西（js）放入 html 本身开始，Webpack 会做一些奇怪的事情。例如，由于 Uglify，htmlToText 突然变成了字母“e”。

【讨论】：