Velocity.js，webpack和$.Velocity.RunSequence

Question

我让Velocity.js库在webpack环境中在一个基本水平上工作，但是当我试图调用$.Velocity.RunSequence函数时，我得到了一个错误：$.Velocity.RunSequence is not a function。

我很确定这与我导入http://velocityjs.org/#dependencies和http://velocityjs.org/#dependencies库的方式有关，但是即使按照http://velocityjs.org/#dependencies上的docs (使用Module : Browserify部分)也不能解决这个问题。在基本水平上使用速度动画(即。而不是作为一个序列)工作正常。

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

  entry: {
    filename: './index.js'
  },

  output: {
    path: path.resolve( __dirname, 'dist' ),
    filename: 'bundle.js'
  },

  devtool: 'cheap-module-eval-source-map',

  module: {
    loaders: [
      {
        test: /\.jsx$/,
        exclude: '/node_modules/',
        loader: 'babel-loader',
        query: {
          presets: [ 'es2015' ]
        }
      }
    ]
  },

  plugins: [
    // Uglify
    new webpack.optimize.UglifyJsPlugin(),

    // Extract HTML & CSS
    new HtmlWebpackPlugin({ template: './src/index.html' }),

    // https://stackoverflow.com/a/35884552
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    })
  ]
};

app.jsx

import 'velocity-animate';

const $svgRect  = $( '#svg-rect' ),
      $svgElem  = $( '#svg-element' );

$(document).ready(function(){

  const svgRectSequence = [
    { e: $svgRect, p: { x: 100, y: 100 }, o: { duration: 2000 } }, 
    { e: $svgRect, p: { x: 100, y: 0 }, o: { duration: 2000 } },
    { e: $svgRect, p: { x: 0, y: 100 }, o: { duration: 2000 } },
    { e: $svgRect, p: { x: 0, y: 0 }, o: { duration: 2000 } }
  ];

  $.Velocity.RunSequence( svgRectSequence );
});

谢谢您的帮助--认为这可能是一个失败的原因，可能需要提交给Velocity.js维护人员，但是我认为我应该先检查一下。

Answer 1

为了使用RunSequence函数，我需要添加“速度-ui包”。线关闭了。

https://www.npmjs.com/package/velocity-ui-pack