我在安装 npm 模块时遇到问题

Question

这里我从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) 安装
3) 在 app.js 中导入文件

    import "./modules/htmltotext";

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

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

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

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


    <!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 中做其他事情吗？ 还是我错过了其他东西？ 我看了很多教程但不明白为什么它不起作用......你能帮我吗？ 谢谢你

Answer 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 文件夹中，但好像我没有正确调用它们......或者缺少某些东西。

如果我能给你更多的信息告诉我...

Answer 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”。

我在安装 npm 模块时遇到问题

问题描述

2 个解决方案

解决方案1
1 2020-01-02 17:42:54

解决方案2
0 2020-01-01 19:07:28

我在安装 npm 模块时遇到问题

问题描述

2 个解决方案

解决方案1 1 2020-01-02 17:42:54

解决方案2 0 2020-01-01 19:07:28

解决方案1
1 2020-01-02 17:42:54

解决方案2
0 2020-01-01 19:07:28