与 Webpack 捆绑时,无法使 Tether 为 Bootstrap 4 工作
Posted
技术标签:
【中文标题】与 Webpack 捆绑时,无法使 Tether 为 Bootstrap 4 工作【英文标题】:Can't make Tether work for Bootstrap 4 when bundling with Webpack 【发布时间】:2017-05-10 13:30:09 【问题描述】:我花了两天时间尝试使用 Webpack 捆绑 Bootstrap。我已经让 jQuery 工作了,但为了让 Bootstrap 能够完全运行,我们还需要 Tether 工作(在我的情况下 - 用于弹出框)。我关注了this guide 和this package。尽管如此,问题仍然存在,我收到错误消息,告诉我 popover 不是函数。
我的配置是这样的。
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。此刻的我好迷茫,想哭……
【问题讨论】:
我不需要这个配置,你可以看我的例子here 和 webpack。我刚刚在index.html 中导入了它,它起作用了。 @saurabh 我在 package.json 中看不到有关 Tether(或 Bootstrap,在我的情况下是需要 Tether 的)的任何信息。我们在谈论同一个 popover() 吗? 我在说这个:v4-alpha.getbootstrap.com/components/popovers @saurabh 啊,对不起。是我不够清楚。当我看到你的消息时,我已经在床上了。是的,正如您所说,从 index.html 到源的链接有效 - 这就是我目前解决它的方式。我现在要解决的问题是我想将它们全部打包(jquery.js、tether.js 和 bootstrap.js)到单个 bundle.js 文件中。我也打算为所有的 CSS 这样做,但我认为 Webpack 可能并不像每个人都在唱的那么好,呵呵。 如果您有时间尝试一下 Webpack 的 捆绑 方法,请随意拍摄。我团队的一个伙伴提到,如果这个问题得到妥善和彻底的解决,他将奖励 +100。 【参考方案1】:这是我在 vueJS 项目中工作的 Bootstrap JS 和 SCSS:
在 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';
我的 git 设置 https://github.com/syed-haroon/vue-js-2-basic-setup
我还鼓励您查看此 URL 以了解更复杂的工作设置 https://github.com/prograhammer/example-vue-project
【讨论】:
你能发布一个包含内容的 Git 链接吗? @KonradViltersten 刚刚为您添加到 git 中 github.com/syed-haroon/vue-js-2-basic-setup 我也鼓励您查看此 URL 以获得更复杂的工作设置 github.com/prograhammer/example-vue-project【参考方案2】:使用 React、webpack 和 Bootstrap 4,即使我在插件中添加了 'Tether': 'tether',它仍然一直问我“引导工具提示需要 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'
),
【讨论】:
以上是关于与 Webpack 捆绑时,无法使 Tether 为 Bootstrap 4 工作的主要内容,如果未能解决你的问题,请参考以下文章
无法让 webpack require.ensure 分块方法与 react-router 一起使用并生成单独的捆绑文件
在将 JavaScript 与 Webpack 捆绑时,require/import URL 开头的 @ 符号是啥意思?