jquery - Webpack - $ 不是函数

标签 jquery webpack

我正在将现有的 Web 应用程序从 requirejs 迁移到 webpack。

我对 jQuery 的导入/填充方式有疑问。

在我的捆绑 js 中,我在引导 javascript 中收到 $ is not a function 错误。

当我从捆绑脚本中 console.log($) 时,它会显示一个空对象:object {}

我假设这是因为 jQuery 没有导出任何内容,因为传统上它会将 $ 设置为窗口对象并完成。

一些研究指出我使用 webpack 插件(请参阅下面的 webpack.config.js),但这似乎并不能解决问题。

我的设置有什么问题吗?

谢谢

我的 webpack.config.js:

    var path = require('path');
var webpack = require('webpack');
module.exports = {
    //devtool: 'source-map',

entry: ['./mobile.js'],
resolve: {
    root: "./js/",
    alias: {

        jquery: 'libs/jquery-1.9.1',
        underscore: "libs/lodash-1.0.1",
        //backbone: 'libs/backbone-1.0.0',
        backbone: 'libs/backbone-0.9.10',
        bootstrap: "libs/bootstrap-2.3.1",
        ......
    }
},
resolveLoader: {
    root: path.join(__dirname, 'node_modules')
},
output: {
    path: './',
    filename: 'bundle.js'
},
plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery"
    })
],
module : {
    loaders: [
        { test: /\.html$/, loader: "text" },
        { test: /\.json$/, loader: "json" }
    ]


   }
}

有问题的编译捆绑代码:

/***/ function(module, exports, __webpack_require__) {

    /* WEBPACK VAR INJECTION */(function(__webpack_provided_window_dot_jQuery) {/* ===================================================
     * bootstrap-transition.js v2.3.1
     * http://twitter.github.com/bootstrap/javascript.html#transitions
     * ===================================================
     * Copyright 2012 Twitter, Inc.
     *
     * Licensed under the Apache License, Version 2.0 (the "License");
     * you may not use this file except in compliance with the License.
     * You may obtain a copy of the License at
     *
     * http://www.apache.org/licenses/LICENSE-2.0
     *
     * Unless required by applicable law or agreed to in writing, software
     * distributed under the License is distributed on an "AS IS" BASIS,
     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     * See the License for the specific language governing permissions and
     * limitations under the License.
     * ========================================================== */


    !function ($) {

        console.log($); //THIS GIVES THE EMPTY OBJECT {}
      "use strict"; // jshint ;_;


      /* CSS TRANSITION SUPPORT (http://www.modernizr.com/)
       * ======================================================= */

      $(function () { //$ IS NOT A FUNCTION OCCURS HERE

        $.support.transition = (function () {
.........
.........

最佳答案

您还可以尝试exports-loader:

npm install --save-dev exports-loader

和配置:

{
   include: require.resolve('libs/jquery-1.9.1'),
   loader: 'exports-loader?window.jQuery'
}
<小时/>

OR 问题可能是 ProviderPlugin 无法读取 jquery 别名,因此请尝试:

new webpack.ProvidePlugin({
    $: "libs/jquery-1.9.1",
    jQuery: "libs/jquery-1.9.1",
    "window.jQuery": "libs/jquery-1.9.1"
})

关于jquery - Webpack - $ 不是函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35044758/

相关文章:

jquery - 如何在输入至少 2 个字符后显示自动完成列表

javascript - 基于 .length 创建多个元素

javascript - 如何在 watch 和 keepalive 中使用 grunt-webpack

Webpack block 加载进度

javascript - Vue.js + 基础 + Webpack 配置

node.js - 使用 webpack 和 vue-cli 的 Favicon

jquery datepicker多个最小最大日期

javascript - 我不知道这种 jQuery AJAX 数据是什么 : () would be interpreted

javascript - 从 php 数组到 javascript(初学者)

webpack - 如何使用 webpack 5 处理 SharedWorker 代码升级?