Question

我正在使用Webpack进行代码捆绑，并希望在jQuery hide函数中使用缓动选项。

$('.comment').hide('slide', { direction: 'left' }, 1000);

我收到此错误消息：

Uncaught TypeError: jQuery.easing[this.easing] is not a function

的package.json

...
"dependencies": {
    "@koa/cors": "^2.2.1",
    "axios": "^0.16.2",
    "bootstrap": "^3.3.7",
    "bootstrap-timepicker": "github:janzenz/bootstrap-timepicker#feature/compatibility-es6",
    "d3-ease": "^1.0.3",
    "d3-selection": "^1.1.0",
    "d3-shape": "^1.2.0",
    "d3-transition": "^1.1.0",
    "font-awesome": "^4.7.0",
    "http-server": "^0.10.0",
    "immutable": "^3.8.2",
    "jquery": "^3.2.1",
    "jquery-ui": "^1.12.1",
    "jquery.panzoom": "^3.2.2",
    "juration": "^0.1.0",
    "koa": "^2.3.0",
    "koa-body": "^2.5.0",
    "koa-bodyparser": "^4.2.0",
    "koa-logger": "^3.1.0",
    "koa-router": "^7.2.1",
    "koa-send": "^4.1.1",
    "koa-static": "^4.0.2",
    "moment": "^2.18.1",
    "oembed-auto": "0.0.3",
    "probe-image-size": "^3.1.0",
    "puppeteer": "^0.12.0",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-dropzone": "^4.2.1",
    "react-facebook-login": "^3.6.2",
    "react-google-login": "^3.0.2",
    "react-modal": "^3.1.2",
    "react-redux": "^5.0.6",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-router-redux": "^4.0.8",
    "react-share": "^1.17.0",
    "react-transition-group": "^1.2.1",
    "react-twitter-widgets": "^1.7.1",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0",
    "request": "^2.83.0",
    "request-promise-native": "^1.0.5",
    "select2": "^4.0.4",
    "select2-bootstrap-theme": "0.1.0-beta.10",
    "shave": "^2.1.3",
    "sugar-date": "^2.0.4",
    "svg-url-loader": "^2.3.0",
    "twitter": "^1.7.1",
    "twitter-widgets": "^1.0.0",
    "unfluff": "^1.1.0"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.4",
    "babel": "^6.23.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.7",
    "eslint": "^4.7.2",
    "eslint-config-airbnb": "^15.1.0",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-jsx-a11y": "^5.1.1",
    "eslint-plugin-react": "^7.4.0",
    "file-loader": "^0.11.2",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "less": "^2.7.2",
    "less-loader": "^4.0.5",
    "node-sass": "^4.5.3",
    "nodemon": "^1.12.1",
    "npm-install-webpack-plugin": "^4.0.5",
    "postcss": "^6.0.11",
    "postcss-loader": "^2.0.6",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "url-loader": "^0.5.9",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0",
    "webpack-notifier": "^1.5.0"
  }

webpack.config.js

const webpack = require('webpack');
const webpackMerge = require('webpack-merge');
const path = require('path');
const WebpackNotifierPlugin = require('webpack-notifier');
const NpmInstallPlugin = require('npm-install-webpack-plugin');
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
const autoprefixer = require('autoprefixer');

const TARGET = process.env.npm_lifecycle_event;
console.log(`target event is ${TARGET}`);

let outputFileName = 'app';
outputFileName += TARGET === 'prod' ? '.min.js' : '.js';

const common = {
  entry: {
    app: './index.jsx',
  },
  module: {
    rules: [
      {
        test: /\.js[x]?$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader?presets[]=es2015&presets[]=react',
        },
      },
      {
        test: /\.scss$/,
        loaders: [
          'style-loader',
          'css-loader',
          'sass-loader',
        ],
      },
      {
        test: /\.less$/,
        loaders: ['style-loader', 'css-loader', 'less-loader'],
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(eot|ttf|svg|gif|png|jpg|otf|woff|woff2)$/,
        loader: 'url-loader',
      },
    ],
  },
  externals: {
    twttr: 'twttr',
  },
  resolve: {
    alias: {
      jquery: 'jquery/src/jquery',
      'jquery-ui': 'jquery-ui/ui',
    },
  },
  plugins: [
    new webpack.ProvidePlugin({
      jQuery: 'jquery',
      $: 'jquery',
      jquery: 'jquery',
      'window.jQuery': 'jquery',
    }),
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: [
          autoprefixer({
            browsers: ['last 3 versions'],
          }),
        ],
      },
    }),
    new WebpackNotifierPlugin(),
  ],
};

if (TARGET === 'dev' || !TARGET) {
  module.exports = webpackMerge(common, {
    devtool: 'eval-source-map',
    output: {
      filename: 'bundle.js',
      sourceMapFilename: '[file].map',
    },
    devServer: {
      contentBase: path.resolve(__dirname), // New
      historyApiFallback: true,
    },
    plugins: [
      new NpmInstallPlugin({
        save: true, // --save
      }),
      new FriendlyErrorsWebpackPlugin(),
    ],
  });
}

我尝试了几种方法来导入它：

import 'jquery-ui/ui/effect';

const $ = require('jquery');
require('jquery-ui/ui/version');
require('../../../../node_modules/jquery-ui/ui/effect.js');

window.jQuery.easing = require('../../../../node_modules/jquery-ui/ui/effect.js');

window.jQuery = require('../../../../node_modules/jquery-ui/ui/effect.js');

jQuery.easing = require('../../../../node_modules/jquery-ui/ui/effect.js');

jQuery = require('../../../../node_modules/jquery-ui/ui/effect.js');

import * as JQuery from 'jquery';
import 'jquery-ui';

我尝试在Webpack配置中更改alias：

alias: {
      "jquery-ui": "jquery-ui/jquery-ui.js",
      // bind to modules;
      modules: path.join(__dirname, "node_modules"),
    },

Answer 1

最简单的选择是使用official docs

中推荐的方法

const $ = require("jquery");

// because you use 'slide' in
// $('.comment').hide('slide', { direction: 'left' }, 1000);
require("jquery-ui/ui/effects/effect-slide");

但是还有很多其他方法可以解决这个问题：jquery-ui and webpack, how to manage it into module?

包括使用Webpack的jQuery UI缓动

1 个答案: