jquery和webpack，如何将其管理成模块？

Question

知道该怎么处理吗？我的意思是jquery似乎不是和我一样，我不知道如何管理它，有什么想法吗？

Answer 1

你很幸运我昨天就这么做了，挺容易的。

npm install --save jquery jquery-ui

确保使用webpack.config.js中的插件解析jquery

...
plugins: [
    new webpack.ProvidePlugin({
      "$":"jquery",
      "jQuery":"jquery",
      "window.jQuery":"jquery"
    }),
...

然后在webpack.config.js中包含两个别名

1. node_modules文件夹
2. jquery-ui文件夹

```javascript

解决办法：{

alias: {

  // bind version of jquery-ui

  "jquery-ui": "jquery-ui/jquery-ui.js",      

  // bind to modules;

  modules: path.join(__dirname, "node_modules"),

Make sure that jquery  gets loaded first in your app startup file.

```javascript

var $=需要量(“jquery”)，

    require("jquery-ui");

If you need to use a theme configure the css-loader and the file-loader. Don't forget to npm install those loaders.

```javascript

模块：{

loaders: [

  { test: /\.css$/, loader: "style!css" },

  { test: /\.(jpe?g|png|gif)$/i, loader:"file" },

And use in your app startup file.

```javascript

require("modules/jquery-ui/themes/black-tie/jquery-ui.css")；

require("modules/jquery-ui/themes/black-tie/jquery-ui.theme.css")；

Answer 2

jquery-ui-dist和jquery-ui-bundle似乎不是由jquery团队维护的。在jQuery-UIv1.12之后，它可能与webpack一起使用npm的官方jquery-ui包。

通过更新package.json和npm install将jquery更新为1.12。

然后，您可以像这样require每个小部件。

require("jquery-ui/ui/widgets/autocomplete");
require("jquery-ui/ui/widgets/draggable");

如果您以前使用过require("jquery-ui")，那么需要为每个小部件使用单独的导入来替换它。我认为新的方法更好，因为它只绑定我们需要使用的小部件的代码。

关于使用1.12官方npm包，请参见文档。

Answer 3

出于某种原因，jquery-ui没有和webpack打得很好。我不得不要求jquery-ui-bundle。

npm i -S jquery-ui-bundle

然后在jquery之后要求它。

require('jquery');
require('jquery-ui-bundle');