我在安裝 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