snapsvg 和 requirejs，无法读取未定义的属性 'on'

Question

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

Uncaught TypeError: Cannot read property 'on' of undefined

代码是：

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

Answer 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

Answer 2

要使用 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

Answer 3

你也可以使用snapsvg-cjs，它实际上是snapsvg中的wrapper with common js

步骤：

npm install snapsvg-cjs

导入如下组件：-

import "snapsvg-cjs";

declare const Snap: any;

现在你有了 Snap 对象。

snapsvg 和 requirejs，无法读取未定义的 属性 'on'

snapsvg and requirejs, Cannot read property 'on' of undefined`

snap.svg

snapsvg 和 requirejs，无法读取未定义的属性 'on'