使用Webpack加载Jquery [英] Loading Jquery with Webpack

问题描述

我已经编写了一个npm软件包(称为ABC)，该软件包正在我的create react应用程序中进行测试.该软件包使用Webpack.我的程序包还依赖于另一个依赖于Jquery的程序包(称为DEF).当我加载我的create react应用程序时，我看到此错误:

I have written a npm package (call it ABC) that I am testing out in a create react app. This package uses Webpack. My package also depends upon another package (call it DEF) that depends upon Jquery. When I load up my create react app I see this error:

DEF.min.js:1 Uncaught TypeError: n.$ is not a function

我怀疑这表示我的webpack.config.js文件配置不正确.

I suspect that this means that my webpack.config.js file is improperly configured.

//webpack.config.js

const webpack = require("webpack");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  externals: {
    jquery: 'jQuery',
    $: 'jQuery'
  },
  entry: {
    bundle: "./app/index.js"
  },
  output: {
    path: path.join(__dirname, "dist"),
    // [name] interpolates an entry point name (bundle, vendor, etc)
    // [chunkhash] interpolates cache busting hash
    filename: "[name].[chunkhash].js"
  },
  module: {
    rules: [    
      // {
      //   test: require.resolve('jquery'),
      //   use: [{
      //     loader: 'expose-loader',
      //     options: 'jQuery'
      //   },{
      //     loader: 'expose-loader',
      //     options: '$'
      //   }]
      // },
  {
    use: "babel-loader",
    test: /\.js$/,
    exclude: /node_modules/
  },
  {
    use: ["file-loader"],
    test: /\.(png|jpg|gif|svg)$/
  },
  {
    use: ["url-loader"],
    test: /\.(eot|svg|ttf|woff|woff2)$/
  }
]


},
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      "$": "jquery",
      "jQuery": "jquery",
      "jquery": "jquery",
      jQuery: "jquery",
      jquery: "jquery",
      "window.jQuery": "jquery",
      "window.$": "jquery"
  }),
    new webpack.optimize.CommonsChunkPlugin({
      names: ["manifest"]
    }),
    // This plugin automatically injects scripts into the
    // head of index.html so we don't have to manually
    // manage them.
    new HtmlWebpackPlugin({
      template: "app/index.html"
    }),

    new webpack.DefinePlugin({
      "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV)
    })
  ],
  devtool: 'source-map',
  // webpack-dev-server configuration
  devServer: {

    host: "0.0.0.0",
    port: 9000,

    public: "localhost",
    watchOptions: {
      ignored: /node_modules/
    }
  }

};

我曾尝试使用jquery从Webpack官方文档中获取示例，但没有运气:

I have tried using the jquery the examples from the official Webpack documentation but have had no luck:

https://webpack.js.org/configuration/externals/#externals https://webpack.js.org/loaders/expose-loader/#examples

推荐答案

我来了一个简单的解决方案来解决我自己的问题.当我在ABC包中的javascript文件中使用包DEF时，我是通过import语句将其包括在内的，例如:import 'DEF';.只需将其更改为require ('DEF');即可解决.目前，我正在调查为什么这一切都不同.应该注意的是，我不需要配置ABC的webpack配置来处理javascript，因此此后我删除了占jQuery的providerPlugin和externals对象.

I have come to solve my own issue with a trivial solution. When I was using package DEF inside javascript files in my ABC package, I was including it via the import statement like so: import 'DEF';. Simply changing this to require ('DEF'); was the solution. At the moment I am investigating why this made all the difference. It should be noted that I did not need to configure my ABC's webpack configuration to handle the javascript so I have since removed the providerPlugin and externals object that accounted for the jQuery.

这有助于解释为什么是这种情况.

这篇关于使用Webpack加载Jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！