如何使用 ES6/ES7 语法导入 jQuery UI？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35259835/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to import jQuery UI using ES6/ES7 syntax?
提问by Leopold Joy
I am trying to use some jQuery UI functionality in my reactJS/Redux application. I've imported both jQuery and jQuery UI using:
我正在尝试在我的 reactJS/Redux 应用程序中使用一些 jQuery UI 功能。我已经使用以下方法导入了 jQuery 和 jQuery UI：
npm install jquery jquery-ui
And then I've tried:
然后我试过：
import $ from 'jquery';
import jQuery from 'query';
import jQuery-ui from 'jquery-ui';
However jQuery UI does not seem to be imported when I try to do something like:
但是，当我尝试执行以下操作时，似乎没有导入 jQuery UI：
componentDidMount() {
$('ol#myList').selectable();
}
I believe the issue is with jQuery UI. What am I doing wrong? How can I get jQuery UI to work with this stack?
我相信问题出在 jQuery UI 上。我究竟做错了什么？我怎样才能让 jQuery UI 与这个堆栈一起工作？
Thank you!
谢谢！
回答by basil
I'm successfully using partial import from jquery-ui. I mean import to my module only what I needed from jquery-ui:
我成功地使用了 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';
( But take in account that I'm using webpack https://webpack.github.io/, in other environment approach may differ)
（但考虑到我正在使用 webpack https://webpack.github.io/，在其他环境中方法可能会有所不同）
回答by Morio
I first,
我先来，
npm install jquery-ui-bundle --save
When I need it, I
当我需要它时，我
import 'jquery-ui-bundle';
import 'jquery-ui-bundle/jquery-ui.css';
回答by cwtuan
Add a alias in webpack config:
在 webpack 配置中添加别名：
resolve: {
alias: {
'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
}
}
Save them in package.json:
将它们保存在 package.json 中：
npm i --save jquery
npm i --save jquery-ui-dist
Then
然后
import $ from 'jquery';
import 'jquery-ui';
It work for me with the last jquery(3.2.1) and jquery-ui(1.12.1).
它适用于最后一个 jquery(3.2.1) 和 jquery-ui(1.12.1)。
See my blog for detail: http://code.tonytuan.org/2017/03/webpack-import-jquery-ui-in-es6-syntax.html
详情见我的博客：http: //code.tonytuan.org/2017/03/webpack-import-jquery-ui-in-es6-syntax.html
回答by Alfiyum
component name is jqueryui (no hyphen), use import jqueryui from 'jquery-ui'or simply import 'jquery-ui'
组件名称是 jqueryui（无连字符），使用import jqueryui from 'jquery-ui'或干脆import 'jquery-ui'
