如何使用ES6 / ES7语法导入jQuery UI？

Question

我正在尝试在reactJS / Redux应用程序中使用一些jQuery UI功能。我使用：

导入了jQuery和jQuery UI

npm install jquery jquery-ui

然后我尝试过：

import $ from 'jquery';
import jQuery from 'query';
import jQuery-ui from 'jquery-ui';

但是当我尝试执行以下操作时似乎没有导入jQuery UI：

componentDidMount() {
  $('ol#myList').selectable();
}

我认为问题在于jQuery UI。我究竟做错了什么？如何让jQuery UI与此堆栈一起使用？

谢谢！

Answer 1

我成功地使用了jquery-ui的部分导入。我的意思是只从jquery-ui导入我的模块：

import $ from 'jquery';
import 'jquery-ui/themes/base/core.css';
import 'jquery-ui/themes/base/theme.css';
import 'jquery-ui/themes/base/selectable.css';
import 'jquery-ui/ui/core';
import 'jquery-ui/ui/widgets/selectable';

（但考虑到我使用webpack https://webpack.github.io/，在其他环境方法可能会有所不同）

Answer 2

我先，

npm install jquery-ui-bundle --save

当我需要它时，我

import 'jquery-ui-bundle';
import 'jquery-ui-bundle/jquery-ui.css';

Answer 3

在webpack config中添加别名：

{

    Random rand = new Random(); //This is were the computer selects the Target

    int guess;
    int numGuesses = 0;
    int Target;
    String userName;
    String playagain;
    boolean play = true;
    int session = 0;
    int sessions = 0;
    int bestScore = 0;

    Scanner consoleIn = new Scanner(System.in); 
    Scanner name = new Scanner(System.in); 

    System.out.println("Hello! Please enter your name:\n"); //This is were the user enters his/her name
    userName= name.nextLine();

    System.out.println("Hello "+ userName + " :) Welcome to the game!\n");


    while (play = true)
    {
        session++;
        Target = rand.nextInt(26) + 1;
        System.out.println("Guess a number between 1 and 26? You will have 5 attempts to guess the correct number"); //This is where the computer asks the user to guess the number and how many guesses they will have

        do {
            guess = consoleIn.nextInt();
            numGuesses++;

            if (guess > 26)
                System.out.println("Error! Above MAXIMUM range");
            else if (guess <= 0)
                System.out.println("Error! Below MINIMUM range");
            else if (guess > Target)
                System.out.println("Sorry! Your guess was too high! :)"); //This is to help the player get to the answer 
            else if (guess < Target)
                System.out.println("Sorry! Your guess was too low! :)"); //This is to help the player get to the answer 
           }        
            while(guess != Target && numGuesses <5);

            if(guess == Target) {
            System.out.println("Congratulations "+  userName + ", it took you "+ numGuesses +" attempts to guess correctly!"); //This tells the player that they got the correct answer and how many attempts it took
                sessions++;
                    }

            else 
            {
            System.out.println("Sorry "+ userName + ", You've used up all of your guesses! The correct answer was "+ Target + "!");  //This tells the player that they failed to find the number and then tells them what the correct answer  
            }
            {
            Scanner answer = new Scanner(System.in);
            System.out.println("Would you like another GO "+ userName +"? [Y/N]");//This asks the player if they would like to play again
            playagain = answer.nextLine();
           if(playagain.equalsIgnoreCase("Y"))//This is what happens if the player opts to play again
            {
            play = true;
            numGuesses = 0;

            } else if(playagain.equalsIgnoreCase("N"))//This is what happens if the player opts to exit the game
            {
                play = false;
                System.out.println("Thanks for playing "+ userName +"! :) Please come back soon!");
                System.out.println("You had  "+ session +" Goes");
                System.out.println("The number of times you guessed correctly: "+ sessions +"");
                break;
            }

         }
    }
}

将它们保存在package.json中：

resolve: {
  alias: {
    'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
  }
}

然后

npm i --save jquery
npm i --save jquery-ui-dist

它适用于最后一个jquery（3.2.1）和jquery-ui（1.12.1）。

有关详细信息，请参阅我的博客：http://code.tonytuan.org/2017/03/webpack-import-jquery-ui-in-es6-syntax.html

Answer 4

组件名称为jqueryui（无连字符），使用import jqueryui from 'jquery-ui' 或者只是import 'jquery-ui'

Answer 5

Selectable是JQuery UI中的插件。因此，我们需要从中引入确切的插件。如果您需要选择，那么它将是：

import 'jquery-ui/ui/widgets/selectable'