Webpack - $ 不是函数答案

【问题标题】：Webpack - $ is not a functionWebpack - $ 不是函数
【发布时间】：2016-05-04 20:11:14
【问题描述】：

我正在将现有的 webapp 从 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 () {
.........
.........

【问题讨论】：

查看页面源码时，是否包含jQuery.js文件？
在控制台中，如果你尝试$.fn.jquery会发生什么？如果正在加载，这应该显示您正在使用的 jQuery 版本
任何consoleerrors？
这个问题解决了吗。我有同样的问题。
我看到了这个错误，但是当我运行$.fn.jquery 时，我确实看到了“1.8.3”并且我可以使用$ 访问元素。有人找到答案了吗？我正在使用 webpack 4.27.1

标签： jquery webpack

【解决方案1】：

你也可以试试exports-loader:

npm install --save-dev exports-loader

和配置：

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

或问题可能在于ProviderPlugin 不读取jquery 别名，因此请尝试：

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

【讨论】：