在Webpack构建中只包含精简版的jQuery？

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包，并从中只使用我需要的部分，但我无法找到如何做到这一点。

- mirta

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'
    })
  ]
 }

}

- Ramy Ben Aroya

Answer 2

在npm中有一个jquery-slim软件包，但它不是官方版本，因此我不建议使用它。

jQuery的npm版本已经包含了jquery-slim（源代码、源映射和压缩版本）。当您从npm安装它时，可以在以下位置找到：

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

我发现在WebPack@4中，导入Slim最简单且更加安全的方式是使用别名，特别是如果您不需要将jQuery设置为全局变量。

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";

非常简单来说。当Webpack尝试导入"jquery"模块时，首先会查找别名，如果该“名称”存在，则使用别名值。如果不存在，则会转到node_modules/jquery，读取指向dist/jquery.js的package.json的main属性，并将该文件/模块放在$名称中。

别名（afaik）始终在其他方法解析之前使用，因此您可以将其与ProvidePlugin或exposes-loader一起使用。

顺便说一下：

• 对于许多情况，您不需要针对依赖于jQuery的库进行特殊配置。如今，大多数库（如Bootstrap）都可以直接使用。
• 我认为同时使用exposes-loader和ProvidePlugin不需要，甚至不是一个好主意。

expose-loader，将模块作为全局变量暴露。因此，每当在本地上下文中找不到"$"或暴露的名称时，将在浏览器的全局上下文(window)中搜索它。

ProvidePlugin，“欺骗”或“伪造”库。每次在上下文中找不到"$"时，Webpack都会将其替换为（类似于）require("jquery")。这不会将变量公开为全局变量，但对大多数情况都有效。

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

plugins: [
    new webpack.ProvidePlugin({
        // use all aliases or only what you need. 
        "$": "jquery",
        "jQuery": "jquery",
        "window.$": "jquery",
    }),
]

如果您不想使用expose-loader，但需要将jQuery作为全局变量在您自己的“入口脚本”中执行，则也可以这样做：

import $ from "jquery";

window.$ = window.jQuery = $;

- Francisco Puga