將 Bootstrap 與 Truffle 一起使用

我無法讓引導程序與我的松露 dapp 一起工作。日誌顯示建構正常，但是當我truffle serve在瀏覽器中打開它時，它抱怨“Bootstrap 的 JavaScript 需要 jQuery”。日誌供參考：

Hash: d9e8c287d453464242a2
Version: webpack 2.6.1
Time: 10597ms
                                Asset     Size  Chunks                    Chunk Names
 f4769f9bdb7466be65088239c12046d1.eot  20.1 kB          [emitted]         
 89889688147bd7575d6327160d64e760.svg   109 kB          [emitted]         
 e18bbf611f2a2e43afc071aa2f4e1512.ttf  45.4 kB          [emitted]         
fa2772327f55d8198301fdb8bcfc8158.woff  23.4 kB          [emitted]         
448c34a56d699c29117adc64c43affeb.woff2    18 kB          [emitted]         
                               app.js  1.38 MB       0  [emitted]  [big]  main
                           index.html  4.03 kB          [emitted]         
                            jquery.js  86.7 kB          [emitted]         
 [67] ./~/web3/index.js 193 bytes {0} [built]
 [68] ./~/babel-runtime/core-js/symbol.js 87 bytes {0} [built]
 [69] ./~/babel-runtime/core-js/symbol/iterator.js 96 bytes {0} [built]
 [70] ./~/babel-runtime/helpers/typeof.js 1.07 kB {0} [built]
 [88] ./~/style-loader/addStyles.js 6.91 kB {0} [built]
 [97] ./app/vendor/bootstrap-3.3.7-dist/js/bootstrap.min.js 45.3 kB {0} [built]
 [98] ./app/vendor/jquery-3.2.1.min.js 125 kB {0} [built]
 [99] ./build/contracts/Lottery.json 7.45 kB {0} [built]
[100] ./app/stylesheets/style.css 911 bytes {0} [built]
[101] ./app/vendor/bootstrap-3.3.7-dist/css/bootstrap.min.css 959 bytes {0} [built]
[102] ./~/truffle-contract/index.js 2.64 kB {0} [built]
[103] ./app/javascripts/app.js 3.12 kB {0} [built]
[104] ./~/babel-runtime/core-js/object/define-property.js 103 bytes {0} [built]
[105] ./~/babel-runtime/core-js/object/get-prototype-of.js 104 bytes {0} [built]
[248] (webpack)/buildin/amd-options.js 82 bytes {0} [built]
   + 235 hidden modules

在日誌中，看起來引導程序是在 jQuery 之前建構的，即使我在 app.js 中以正確的順序導入它們：

// Import libraries we need.
import { default as Web3} from 'web3';
import { default as contract } from 'truffle-contract';

// Import our contract artifacts and turn them into usable abstractions.
import lottery_artifacts from '../../build/contracts/Lottery.json';

import "../vendor/jquery-3.2.1.min.js";
import "../vendor/bootstrap-3.3.7-dist/js/bootstrap.min.js";
import "../vendor/bootstrap-3.3.7-dist/css/bootstrap.min.css";
import "../stylesheets/style.css";

// Lottery is our usable abstraction, which we'll use through the code below.
var Lottery = contract(lottery_artifacts);

// The following code is simple to show off interacting with your contracts.
// As your needs grow you will likely need to change its form and structure.
// For application bootstrapping, check out window.addEventListener below.
var accounts;
var account;

window.App = {
 start: function() {
   var self = this;

   // Bootstrap the Lottery abstraction for Use.
   Lottery.setProvider(web3.currentProvider);

   // Get the initial account balance so it can be displayed.
   web3.eth.getAccounts(function(err, accs) {
     if (err != null) {
       alert("There was an error fetching your accounts.");
       return;
     }

     if (accs.length == 0) {
       alert("Couldn't get any accounts! Make sure your Ethereum client is configured correctly.");
       return;
     }

     accounts = accs;
     account = accounts[0];

     self.refreshBalance();
   });
 }
};

window.addEventListener('load', function() {
 // Checking if Web3 has been injected by the browser (Mist/MetaMask)
 if (typeof web3 !== 'undefined') {
   console.warn("Using web3 detected from external source. If you find that your accounts don't appear or you have 0 Lottery, ensure you've configured that source properly. If using MetaMask, see the following link. Feel free to delete this warning. :) http://truffleframework.com/tutorials/truffle-and-metamask")
   // Use Mist/MetaMask's provider
   window.web3 = new Web3(web3.currentProvider);
 } else {
   console.warn("No web3 detected. Falling back to http://localhost:8545. You should remove this fallback when you deploy live, as it's inherently insecure. Consider switching to Metamask for development. More info here: http://truffleframework.com/tutorials/truffle-and-metamask");
   // fallback - use your fallback strategy (local node / hosted node + in-dapp id mgmt / fail)
   window.web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
 }

 App.start();
});

這可能是問題嗎？這也是我的 webpack.config.js 供參考：

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
 entry: './app/javascripts/app.js',
 output: {
   path: path.resolve(__dirname, 'build'),
   filename: 'app.js'
 },
 plugins: [
   // Copy our app's index.html to the build folder.
   new CopyWebpackPlugin([
     { from: './app/index.html', to: "index.html" },
   ])
 ],
 module: {
   rules: [
     {
       test: /\.js$/,
       exclude: /(node_modules|bower_components)/,
       loader: 'babel-loader',
       query: {
         presets: ['es2015'],
         plugins: ['transform-runtime']
       }
     },
     {
      test: /\.css$/,
      use: [ 'style-loader', 'css-loader' ]
     },
     { test: /\.json$/, use: 'json-loader' },
     {
       test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
       use: [ 'url-loader?limit=10000&mimetype=application/font-woff' ]
     },
     {
       test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
       use: [ 'file-loader' ]
     }
   ]
 }
}

你需要使用 webpack 的 ProvidePlugin，因為bootstrap 需要一個global.jQuery. 將以下內容添加到您的建構配置中：

// webpack.config.js
module.exports = {
   ...
   plugins: [
       new webpack.ProvidePlugin({
          $: "jquery",
          jQuery: "jquery"
      })
   ]
};

這將設置為global.$npm包。如果您在其他任何地方都不需要 jquery，您現在可以刪除您的import 語句。global.jQuery``jquery``jquery

引用自：https://ethereum.stackexchange.com/questions/17533