Question

我正在尝试将脚本与jQuery捆绑在一起，这是其工作所必需的。这是其他网站管理员必须插入其网站的摘要，因此我不希望它干扰他们可能正在运行的任何jQuery。

我已按照以下说明进行操作：

const webpack = require('webpack');
new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery'
});
const path = require('path');

module.exports = (env, options) => ({
  entry: "./clickscape.js",
  output: {
    path: path.resolve(__dirname, '../priv/static/js'),
    filename: 'clickscape-bundle.js'
  }
});

我还有以下package.json：

{
  "repository": {},
  "license": "MIT",
  "scripts": {
    "deploy": "webpack --mode production",
    "watch": "webpack --mode development --watch-stdin --progress --color"
  },
  "dependencies": {
    "jquery": "^3.3.1"
  },
  "devDependencies": {
    "webpack": "4.4.0",
    "webpack-cli": "^2.0.10"
  }
}

它的构建没有错误，但是jQuery对我的最终脚本不可用。我在做什么错了？

Answer 1

您应将jquery添加到webpack.config.js中的插件数组中，如下所示。

这将使webpack能够将jquery对象全局注入到依赖关系图中的所有js文件中

./webpack.config.js

const path = require("path");
const webpack = require("webpack");

module.exports={
    entry:{
        index : "./src/index.js"
    },
    output :{
        filename : "[name].js"
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            divine:'jquery'
        })
    ]
}

使用以下指令生成js包并验证结果。可以使用$或jQuery或divine访问jquery提供的实用程序功能。您可以选择使用其中任何一个或全部使用。

./src/index.js

console.log("jquery object ",jQuery);
console.log("jquery $ ",$);
console.log("jquery divine ",divine)

使用Webpack将Jquery添加到包中

1 个答案: