将 jvectormap 与 webpack 结合使用

Question

我正在尝试将 jvectormap 与 webpack 结合使用来开发一些 Web 应用程序。

不过我的矢量图可以正常显示。

但是缩放功能没有用

这是我的 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"
    })
  ]
}

这是一个 snapshot 的错误。

谁能帮帮我？或者给我一些研究提示。谢谢！

编辑 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"
  }
}

由于是从另一个内部项目复制过来的，所以可能有一些未使用的包。

谢谢！

Answer 1

我尝试使用您的代码并使用我从 github 获得的文件 jquery-jvectormap-world-mill-en。但它似乎工作正常。您能否也提供您的 package.json？

编辑：尝试删除 options: { presets: ['es2015']} 如果你不使用 ES6。如果想用babel改造，尽量按照babeljs.io/docs/plugins/#presets

将 jvectormap 与 webpack 结合使用

Using jvectormap with webpack

javascript

jvectormap

webpack