使用 Webpacker 和 Rails 6 攀登学习曲线。
我已经使用 Yarn 和 Webpack 安装了 Bootstrap 4。当我尝试在浏览器的 JS 控制台中使用 Bootstrap 组件时,我得到:TypeError: $.fn.button is undefined
.
如果我删除 Yarn 安装,请在head
HTML(旧方式)一切正常。当我删除 CDN 链接并恢复使用 Webpacker 时,我又回到了上面的错误。
这是我的 Webpacker 设置:
// package.json
{
"name": "depot",
"private": true,
"dependencies": {
"@rails/actioncable": "^6.0.0-alpha",
"@rails/activestorage": "^6.0.0-alpha",
"@rails/ujs": "^6.0.0-alpha",
"@rails/webpacker": "^4.0.7",
"bootstrap": "4.2.1",
"jquery": "^3.4.1",
"popper.js": "^1.15.0",
"turbolinks": "^5.2.0"
},
"version": "0.1.0",
"devDependencies": {
"webpack-dev-server": "^3.8.0"
}
}
// enviornment.js
const { environment } = require("@rails/webpacker");
const webpack = require("webpack");
environment.plugins.append(
"Provide",
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery',
Popper: ["popper.js", "default"]
})
);
module.exports = environment;
// application.js
require("@rails/ujs").start();
require("turbolinks").start();
require("@rails/activestorage").start();
require("channels");
require("jquery");
require("bootstrap");
import "./src/application.scss";
# layouts/application.html.haml
!!!
%html
%head
%meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}
%title Depot
= csrf_meta_tags
= csp_meta_tag
= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
我应该做些什么来将 Bootstrap 函数导出到全局命名空间吗?