Question

我正在设置一个新的Electron应用程序，并试图为它构建脚手架。

我之前一直使用过webpack / bootstrap / jquery，从来没有遇到任何问题，所以我不明白为什么但是为了我的生活，我一直在努力

Uncaught Error: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.

我已在我的webpack.config.js文件中尝试过此操作有/没有resolve和多个其他文件位置

resolve: {
    alias: {
        jquery: "jquery/dist/jquery.min.js"
    }
  }, 
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
    })
  ],

如果我查看我的bundle.js我可以清楚地看到jQuery正在加载但是由于某种原因，Bootstrap一直在向我咆哮

使用Bootstrap@4.0.0-alpha.6和jquery npm安装

任何人都有任何关于为什么它似乎无法找到jQuery

的建议

如果我打开开发人员工具，我肯定会看到$是一个全局变量，但jQuery不是，而且似乎是引导程序检查的内容。感谢。

整个Webpack

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

module.exports = {
  debug: true,
  entry: [
    'babel-polyfill',
    './src/public/javascripts/main.js'
  ],
  output: {
    filename: 'bundle.js'
  },
  resolve: {
    alias: {
        jquery: "jquery/dist/jquery.min.js"
    }
  }, 
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
    })
  ],
  module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            scss: 'vue-style-loader!css-loader!sass-loader',
            sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
          }
        }
      },
      { test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery' },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          plugins: ['transform-flow-strip-types']
        }
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      },
      {
        test: /tether\.js$/,
        loader: "expose?Tether"
      },
      { test: /\.(woff|woff2)$/,  loader: "url-loader?limit=10000&mimetype=application/font-woff" },
      { test: /\.ttf$/,    loader: "file-loader" },
      { test: /\.eot$/,    loader: "file-loader" },
      { test: /\.svg$/,    loader: "file-loader" }
    ]
  }
}

在我的main.js

中

import jQuery from "jquery/dist/jquery.min.js";
import BootstrapCSS from "bootstrap/dist/css/bootstrap.min.css";
import BootstrapJS from "bootstrap/dist/js/bootstrap.min.js";

好的，这似乎与我的gulp设置有关，我想，如果我运行我的gulp webpack

gulp.task("webpack", () => {
  return gulp.src("./dist/public/javascripts/main.js")
  .pipe(webpack(require('./webpack.config.js')))
  .on('error', (error) => {
    console.log(error);
  })
  .pipe(gulp.dest("./dist/public/javascripts/"));
});

它似乎不起作用，但如果我手动运行webpack并拖放捆绑包，它就可以正常工作。有什么建议吗？

似乎无法通过Electron / Webpack让jQuery走向全球化

0 个答案: