Как включить VelocityJS с помощью веб-пакета - PullRequest
Новая
       9

Как включить VelocityJS с помощью веб-пакета

0 голосов
/ 29 апреля 2018

Я новичок в использовании веб-пакетов и пытаюсь решить эту проблему. Проект webpack.config таков: 

const webpack = require('webpack');
const path = require('path');

const config = {
  entry: ['./src/index.js', './src/scss/main.scss'],
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'static')
  },
  watch: true,
  // watchOptions:{
  //   ignored: /woff/
  // },
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.scss$/,
        // use: [
        //   'style-loader',
        //   'css-loader',
        //   'sass-loader'
        // ]
        use: [
                    {
                      loader: 'file-loader',
                      options: {
                        name: '[name].css',
                        outputPath: 'assets/css/'
                      }
                    },
                    {
                      loader: 'extract-loader'
                    },
                    {
                      loader: 'css-loader'
                    },
                    {
                      loader: 'postcss-loader'
                    },
                    {
                      loader: 'sass-loader'
                    }
                  ]
      },
      {
        test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
        use: [{
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'assets/fonts/',    // where the fonts will go
            // publicPath: '../'       // override the default path
          }
        }]
      },
    ]
  },
   externals: {
      "window.jQuery": "jquery",
      "velocity": 'velocity-animate'

  },
  plugins: [
    new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production')
    }),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
}
module.exports = config;

В index.js входит следующее: 

import 'bootstrap';

require('velocity-animate');
require('velocity-animate/velocity.ui');

import './scss/main.scss';
require('typeface-raleway')

Скрипт пользовательского интерфейса загружается до Velocity, даже если я изменяю порядок в index.js.

А также, вызывая speed () на консоли, просто говорит, что функция не определена. Я в недоумении.

Правильно ли загружается модуль?

Как я могу гарантировать правильный порядок скриптов?

1 Ответ

0 голосов
/ 30 апреля 2018

Решением для этого было удалить скорость из externals в webpack.config.js и использовать следующий метод для загрузки и использования импортированной функции: 

import Velocity from 'velocity-animate';

var blue = $('polygon#blue');

Velocity( blue,
  {opacity: 0.5 },
    {
      loop:13,
      duration:2000,
      easing: "swing" }
    );
...