Невозможно запустить проект веб-пакета, используя JavaScript - PullRequest
Новая
       6

Невозможно запустить проект веб-пакета, используя JavaScript

1 голос
/ 27 сентября 2019

Мне дали проект чат-бота в javascript с использованием веб-пакета, и по какой-то причине я не могу заставить его успешно работать!Веб-пакет запускается при запуске сценария с запуском npm, но страница пуста.

Вот index.html 

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="utf-8">
    <title>Chatbot</title>
    <script src="assets/lib/jquery.min.js"></script>
    <script></script>
</head>

<body>
    <div id="app">

    </div>
</body>

</html>

Это index.js 

import Dialogflow from './dialogflow';
import './assets/styles/main.css';


console.log("helloooo 2")

if (!$) {
  console.error("Bot: This module requires jQuery.");
}

let default_messages = {
  header: {

    'en-US': 'Hi! How can I help you?',
  },
  inputPlaceholder: {
    'fi': 'Kirjoita jotain (paina enter lähettääksesi)',
    'en-US': 'Write something (press Enter to send)',
  }
}

let lang = document.documentElement.lang;

class Bot{



  renderHumanMessage(message) {
    if (!message) {
      return;
    }
    $('#sc-chb-response').append(`
       <div class="sc-chb-conversationPlaceholder">
         <div class="sc-chb-userRequest">
           <div class="sc-chb-userReply">
             <div class="sc-chb-chatBubbleHuman"></div>
             ` + message + `
           </div>
         </div>
         <div class="sc-chb-usrImg">
           <div class="sc-chb-responseIcon">
             <div class="sc-chb-iconUserImg"></div>
           </div>
         </div>
       </div>
    `);
  }

  addOptionClickListener(chatBot) {
    return function(e) {
      $('#sc-chb-inputMessage').val($(this).attr('data-option'));
      chatBot.sendMessage();
    };
  }



  open() {
    if (!this.hasToggleButton) {
      $('#sc-chb-chat-box-toggle').hide();
    } else {
      $('.sc-chb-chatState').hide();
      $('#sc-chb-chatStateClose').show();
    }
    $('#sc-chb-chat-box').show();
    if (this.triggerWelcomeEvent === true) {
      // Request the welcome message by triggering the welcome event
      Dialogflow.triggerEvent('Welcome').then(res => {
        this.renderBotMessage(res);
      });
      this.triggerWelcomeEvent = false;
    }
  }

  toggle() {
    if (this.isOpen()) {
      this.close();
    } else {
      this.open();
    }
  }

  isOpen() {
    return $('#sc-chb-chat-box').is(":visible");
  }

  renderFulfillmentText(text) {
    let processedText = text.replace(new RegExp('\n', 'g'), '<br>');

    // renders [[text]] to a clickable chat bubble
    processedText = processedText.replace(/\[\[([^\[\]]+)\]\](<br>)?/g, '<div class="sc-chb-chatbotOption" data-dialogflow="\$1" data-option="\$1">\$1</div>');

    // renders {{{name|url}}} as <a href="url">name</a>
    return processedText.replace(/\{\{([^\{\}]+)\|([^\{\}]+)\}\}/g, '<a href="\$2" target="_blank">\$1</a>');
  }

}


export { Bot};

и есть файл example.js, который показывает, как использовать класс бота: 

import { Bot} from './Bot';

let bot = new Bot({

    "baseUrl": "xxxxx"
});

bot.init();

Конфигурация веб-пакета: 

const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const autoprefixer = require('autoprefixer');
const CopyWebpackPlugin = require('copy-webpack-plugin')

const path = require('path');

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader",
                        options: {minimize: true}
                    }
                ]
            },
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, "css-loader",
                    {
                        loader: 'postcss-loader',
                        options: {
                            config: {
                                path: './postcss.config.js'
                            }
                        }
                    }

                ]
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                loader: 'url-loader?name=assets/[name].[hash].[ext]'
            }
        ]
    },
    devServer: {
        contentBase: 'src/',
        // historyApiFallback: true,
        // disableHostCheck: true,
        port: process.env.PORT || 8080,
        // host: '0.0.0.0',
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: "./src/index.html",
            filename: "./index.html"
        }),
        require('autoprefixer'),
        new MiniCssExtractPlugin({
            filename: "main.css",
            chunkFilename: "main.css"
        }),
        new CopyWebpackPlugin([
            { from: 'src/assets', to: 'assets' },
        ]),
    ],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'index.js',
        library: 'sc-chatbot-frontend',
        libraryTarget: 'umd' 
    },
    externals: {
        'jquery': 'jQuery',
        'url-loader': 'url-loader'
    }
};

Я не уверен, откуда я это используюexample.js или где это нужно определить?Я попытался включить в index.html, но страница по-прежнему пуста.

По сути, я запускаю npm start, и появляется пустая страница, вместо нее должен отображаться чат-бот!

...