Использование jvectormap с веб-пакетом

Я пытаюсь использовать jvectormap с webpack для разработки некоторых веб-приложений.

Однако я могу нормально показать векторную карту.

Но функция масштабирования не работает.

Вот мой index.js:

import "jquery";
import "jquery.cookie";

import "jvectormap-next";
import "./node_modules/jvectormap-next/jquery-jvectormap.css"

require("./jquery-jvectormap-world-mill");

$(document).ready(function(){
    $('#world-map').vectorMap({
        map: 'world_mill',
        normalizeFunction: 'polynomial',
        zoomOnScroll: true,
        markerStyle: {
            initial: {
                fill: '#00FF00',
                stroke: '#383f47'
            }   
        },
        markers: [
            {latLng: [42.5, 1.51], name: 'Andorra'}
        ]
    });
});

И webpack.config.js:

var webpack = require('webpack')
var path = require('path')
var HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      }, {
        test: /\.html$/,
        loader: 'raw-loader'
      }, {
        test: /\.(jpe?g|png|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/, 
        loader: 'url-loader?limit=100000'
      }, {
        test: /\.js$/,
        use: [
            {
                loader: 'babel-loader',
                options: {
                    presets: ['es2015']
                }
            }
        ]
      }
    ]
  },
  plugins: [
    new webpack.BannerPlugin('Add innodisk license here'),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new HtmlWebpackPlugin({
        template: './index.html'
    }),
    new webpack.ProvidePlugin({
      "$":"jquery",
      "jQuery":"jquery",
      "window.jQuery":"jquery"
    })
  ]
}

И это снимок ошибки.

Кто-нибудь может мне помочь? Или дайте мне подсказку для исследования. Спасибо!


Изменить 1: Вот package.json:

{
  "name": "jvectormap-webpack-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --progress --colors",
    "build": "webpack --config webpack.config.prod.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/eva70881/jvectormap-webpack-test.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/eva70881/jvectormap-webpack-test/issues"
  },
  "homepage": "https://github.com/eva70881/jvectormap-webpack-test#readme",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "billboard.js": "^1.2.0",
    "bootstrap": "^3.3.7",
    "chart.js": "^2.7.1",
    "css-loader": "^0.28.8",
    "datatables.net": "^1.10.16",
    "datatables.net-dt": "^1.10.16",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.6",
    "font-awesome": "^4.7.0",
    "font-awesome-webpack": "0.0.5-beta.2",
    "google-maps": "^3.2.1",
    "html-webpack-plugin": "^2.30.1",
    "jquery": "^3.2.1",
    "jquery-mapael": "^2.1.0",
    "jquery-mousewheel": "^3.1.13",
    "jvectormap": "^2.0.4",
    "jvectormap-next": "^3.0.0",
    "less": "^2.7.3",
    "paginationjs": "^2.1.2",
    "raphael": "^2.2.7",
    "raw-loader": "^0.5.1",
    "style-loader": "^0.19.1",
    "url-loader": "^0.6.2",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.11.0"
  },
  "dependencies": {
    "jquery-mapael": "^2.1.0",
    "jquery.cookie": "^1.4.1",
    "jvectormap": "^2.0.4"
  }
}

Поскольку он скопирован из другого внутреннего проекта, в нем могут быть неиспользуемые пакеты.

Спасибо!

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
848
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я пробовал использовать ваш код и использовать файл jquery-jvectormap-world-mill-en, который я получил с github. Но вроде работает нормально. Не могли бы вы также предоставить свой package.json?

Обновлено: Попробуйте удалить параметры: {presets: ['es2015']} Если вы не используете ES6. Если вы хотите использовать babel для преобразования, попробуйте следовать babeljs.io/docs/plugins/#presets

Привет, Титан, я уже добавил свой package.json в свой пост. Спасибо за вашу помощь!

KengYu Edward Lin 21.03.2018 09:18

Я нашел проблему. Попробуйте удалить параметры: {presets: ['es2015']} Если вы не используете ES6. Если вы хотите использовать babel для преобразования, попробуйте следовать babeljs.io/docs/plugins/#presets

Tan Duong 21.03.2018 10:26

Другие вопросы по теме