snapsvg 和 requirejs，无法读取未定义的属性“on”答案

【问题标题】：snapsvg and requirejs, Cannot read property 'on' of undefined`snapsvg 和 requirejs，无法读取未定义的属性“on”
【发布时间】：2016-07-18 04:54:49
【问题描述】：

我在一个项目中使用 require 和 webpack 并且想使用 snapsvg 但是当我包含它时，我得到了错误：

Uncaught TypeError: Cannot read property 'on' of undefined

代码是：

var Snap = require('snapsvg');
SVG = Snap('#svg');

【问题讨论】：

请在您的问题中添加一些代码，以便我们帮助识别问题。
@R.Murray 我添加了收到错误时使用的代码，但似乎是使用 require 导致了问题。

标签： snap.svg

【解决方案1】：

啊，方法是添加：

var webpack = require('webpack');
module.exports = {
  ...
  module: {
    loaders: [{
      test: require.resolve('snapsvg'),
      loader: 'imports-loader?this=>window,fix=>module.exports=0'
    }]
  }
  ...
};

在webpack.config.js 中使用imports-loader

【讨论】：

【解决方案2】：

你也可以使用 snapsvg-cjs，它实际上是 snapsvg 中的 wrapper writter 和常用的 js。

步骤：

npm install snapsvg-cjs

在组件中导入如下：-

import "snapsvg-cjs";

declare const Snap: any;

现在你有了 Snap 对象。

【讨论】：

【解决方案3】：

要使用 webpack 2.x 和 3.x 加载，请安装 Imports Loader (npm i -D imports-loader)，并将以下内容添加到您的 webpack 配置 ：

module: {
  rules: [
    {
      test: require.resolve('snapsvg/dist/snap.svg.js'),
      use: 'imports-loader?this=>window,fix=>module.exports=0',
    },
  ],
},
resolve: {
  alias: {
    snapsvg: 'snapsvg/dist/snap.svg.js',
  },
},

然后，在您想要使用 Snap 的任何模块中，使用：

import Snap from 'snapsvg';

SRC：SnapSVG GitHub

【讨论】：

我多年来一直在使用上述设备，没有任何问题。有人得到了 Webpack 4 和 imports-loader v1.2 的更新吗？