Question

如何在我的webpack版本中仅包含jquery slim？

现在，我包括这样的jquery并且它工作正常，但是我不想加载整个库。

webpack.config.js

module.exports = {
...
 module: {
  rules: [
   ...
    {
        test: require.resolve('jquery'),
        use: [{
            loader: 'expose-loader',
            options: 'jQuery'
        },
        {
            loader: 'expose-loader',
            options: '$'
         }]
    }
  ]
  ...
  plugins: [
   new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery'
    })
  ]
 }

}

我在npm中找不到官方的jquery-slim软件包，所以我想这个想法是安装整个jquery软件包，只从那里使用我想要的东西，但是我找不到如何做到这一点。

Answer 1

jquery-slim.js放在jquery的npm软件包中。
在node_modules/jquery/dist/jquery-slim.js中。

因此，您所需要做的就是将加载程序和插件定向到jquery.slim.js路径：

module.exports = {
...
 module: {
  rules: [
   ...
    {
        test: require.resolve('jquery/dist/jquery.slim'),
        use: [{
            loader: 'expose-loader',
            options: 'jQuery'
        },
        {
            loader: 'expose-loader',
            options: '$'
         }]
    }
  ]
  ...
  plugins: [
   new webpack.ProvidePlugin({
        $: 'jquery/dist/jquery.slim',
        jQuery: 'jquery/dist/jquery.slim'
    })
  ]
 }

}

Answer 2

npm中有一个jquery-slim软件包，但它不是官方的，所以我不建议使用它。

jQuery的

npm版本已经包含了jquery-slim（源代码，源映射和缩小版本）。从npm安装时，可以在

上找到

ls node_modules/jquery/dist/jquery.slim.*

我发现，导入苗条的最简单，更安全的方法是使用别名，特别是在不需要jQuery成为全局变量的情况下。在Webpack @ 4中：

resolve: {
    alias: {
        // "jquery/dist/jquery.js" or "jquery/dist/jquery.slim.js"
        jquery: "jquery/dist/jquery.slim.js",
    }
},

事实上，我总是使用别名，因为如果有人弄乱了路径，偶然地您可以在捆绑包中以两个jQuery版本结尾。

例如，使用（不带别名）时

import $ from "jquery/dist/jquery.slim.js"
import "bootstrap"

Webpack会将两个版本都放入捆绑包中，因为Bootstrap只需要“ jquery”即可。

要使用别名，没什么特别的：

import $ from "jquery";

非常Roughly speaking。当Webpack尝试导入"jquery"模块时，首先将抢占别名，如果该“名称”存在，则将使用别名值。如果不是，它将转到node_modules/jquery，读取指向main的{{1}}的{{1}}属性，并将该文件/模块放入package.json名称。

别名总是在其他方法解析之前使用（afaik），因此您可以将其与ProvidePlugin或暴露加载程序一起使用。

顺便说一句：

在许多情况下，不需要依赖jQuery的库的特殊配置。如今，大多数情况下，像Bootstrap一样，都可以即开即用
我不认为在需要ProvidePlugin的同时使用暴露暴露器，甚至不是一个好主意。

expose-loader，将模块公开为全局变量。因此，每次在本地上下文中找不到“ $”或公开的名称时，都会在浏览器的全局上下文（dist/jquery.js）中进行搜索。

ProvidePlugin，“欺骗”或“伪造”库。每次在上下文中未找到“ $”时，Webpack都会将其替换为$。这不会将变量公开为全局变量，但可以在大多数情况下使用。

如前所述，ProvidePlugin将使用别名，因此此配置将使用别名中指定的de js文件。

window

如果您不想使用expose-loader，但需要jQuery作为全局对象，则可以在“输入脚本”中用自己的代码来使用它：

require("jquery")

在webpack版本中仅包含jquery slim吗？

2 个答案: