與Webpack綁定時無法使引導程序4使用Tether工作

我花了兩天的時間嘗試使用Webpack將Bootstrap捆綁在一起。我已經讓jQuery工作，但爲了使Bootstrap充分運作，我們還需要Tether來工作（在我的情況下 - 用於彈出）。我跟着this guide以及this package。仍然，問題仍然存在，我得到的錯誤告訴我，popover不是一個功能。與Webpack綁定時無法使引導程序4使用Tether工作

我的配置看起來像這樣。

var webpack = require("webpack"); 
module.exports = { 
    entry: ["babel-polyfill", "./index.js"], 
    //entry: ["babel-polyfill", "./index.js", "tether"], 
    output: { path: __dirname, filename: "bundle.js" }, 
    plugins: [new webpack.ProvidePlugin({ 
    $: "jquery", 
    jQuery: "jquery", 
    jquery: "jquery", 
    "window.$": "jquery", 
    "window.jQuery": "jquery", 
    "window.jquery": "jquery", 
    "Tether": "tether", 
    "window.Tether": "tether", 
    // Popover: "exports?Popover!bootstrap/js/dist/popover", 
    })], 
    ... 
}

在最後幾天的過程中，我嘗試了幾乎所有的東西，而且我沒有彈藥。我如何進一步排除故障？

還有其他similar issues未解決，但也似乎get Tether unwillingly。我在那我可以哭的那一刻如此混亂...

來源

2016-12-25 Konrad Viltersten

我不需要這個配置，你可以看到我的例子[這裏]（https://github.com/mimani/vue-example/tree/popover-example）與webpack。我只是在[index.html]（https://github.com/mimani/vue-example/blob/popover-example/index.html#L11）中導入它，並且它工作正常。 – Saurabh

@saurabh我在* package.json *中看不到Tether（或Bootstrap，在我的情況下是需要Tether的）。我們在談論相同的* popover（）*嗎？ –

我在說這個：https：//v4-alpha.getbootstrap.com/components/popovers/ – Saurabh

這是我工作的引導JS和SCSS在vueJS項目：

在webpack.config.js

var path = require('path') 
var webpack = require('webpack') 

module.exports = { 
    entry: './src/main.js', 
    output: { 
    path: path.resolve(__dirname, './dist'), 
    publicPath: '/dist/', 
    filename: 'build.js' 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.vue$/, 
     loader: 'vue-loader', 
     options: { 
      loaders: { 
      // Since sass-loader (weirdly) has SCSS as its default parse mode, we map 
      // the "scss" and "sass" values for the lang attribute to the right configs here. 
      // other preprocessors should work out of the box, no loader config like this necessary. 
      'scss': 'vue-style-loader!css-loader!sass-loader', 
      'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax' 
      } 
      // other vue-loader options go here 
     } 
     }, 
     { 
     test: /\.js$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/ 
     }, 
     { 
     test: /\.(png|jpg|gif|svg)$/, 
     loader: 'file-loader', 
     options: { 
      name: '[name].[ext]?[hash]' 
     } 
     }, 
     { 
     test: /\.scss$/, 
     loader: 'style-loader!css-loader!sass-loader' 
     } 
    ] 
    }, 
    plugins: [ 
    new webpack.ProvidePlugin({ 
     $: 'jquery', jQuery: 'jquery', 
     Tether: 'tether', tether: 'tether' 
    }), 
    ], 
    resolve: { 
    alias: { 
     'vue$': 'vue/dist/vue.esm.js' 
    } 
    }, 
    devServer: { 
    historyApiFallback: true, 
    noInfo: true 
    }, 
    performance: { 
    hints: false 
    }, 
    devtool: '#eval-source-map' 
};

在main.js

// Globally require jQuery, you cannot access jQuery from Console without this code 
window.$ = require('jquery') 

import 'bootstrap' // importing bootstrap.js 
import "bootstrap/scss/bootstrap.scss" 
import "./assets/scss/main.scss" 

import Vue from 'vue' 
import App from './App.vue' 

new Vue({ 
    el: '#app', 
    render: h => h(App) 
});

在main.scss

$font-family-primary: 'Source Sans Pro', sans-serif; // Customize the bootstrap scss 
@import '~bootstrap/scss/bootstrap.scss';

我混帳安裝https://github.com/syed-haroon/vue-js-2-basic-setup

我也鼓勵你們採取看看這個網址爲更深沉的工作設置https://github.com/prograhammer/example-vue-project

來源

2017-04-13 04:20:10 Syed

你可以發佈一個鏈接到Git的內容嗎？ –

@KonradViltersten剛剛在git中爲你添加了https：// github。com/syed-haroon/vue-js-2-basic-setup我也鼓勵你看看這個網址以獲得更復雜的工作設置https://github.com/prograhammer/example-vue-project – Syed

使用反應過來，的WebPack和Bootstrap 4，它不停的問我「自舉工具提示需要繫繩「，即使我已經添加了'Tether'：'繫繩'插件。因此，我必須在條目下添加tether/dist/js/tether.min.js以使其正常工作。看下面

module.exports = { 
    entry: [ 
    'script-loader!jquery/dist/jquery.min.js', 
    'script-loader!tether/dist/js/tether.min.js', 
    'script-loader!bootstrap/dist/js/bootstrap.min.js', 
    './app/app.jsx', 
    ], 
    externals: { 
    jQuery: 'jQuery' 
    }, 
    plugins: [ 
    new webpack.ProvidePlugin({ 
     '$': 'jQuery', 
     'jQuery': 'jQuery', 
     'Tether': 'tether' 
    }),

來源

2017-07-30 17:02:50 Blackstone4

與Webpack綁定時無法使引導程序4使用Tether工作

回答

相關問題