我最近使用webpack和bootstrap v4.0.0-alpha.6进行了配置,直到今天我尝试更改为v4 beta时工作正常,现在我似乎无法使其正常工作:( 我有这个配置:
webpack.config.js
entry: {
app: "./src/app.js"
},
output: {
path: path.resolve(__dirname, 'public'),
filename: 'js/[name].js',
hotUpdateChunkFilename: 'hot/hot-update.js',
hotUpdateMainFilename: 'hot/hot-update.json'
},
module: {
loaders: [
{ test: /\.js$/, exclude: /node-modules/, loader: 'babel-loader' },
{ test: /\.html$/, loader: 'raw-loader', exclude: /node_modules/ },
{ test: /\.(css|scss|sass)$/,
loader: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ['css-loader', 'postcss-loader', 'sass-loader']
}),
exclude: /node_modules/
}
]
},
plugins: [
new webpack.ProvidePlugin({ // inject ES5 modules as global vars
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default']
}),
new ExtractTextPlugin('/css/[name].css'),
在我的 app.js 中我有require('bootstrap');
现在,当我尝试进行构建时,我收到一个错误:
ERROR in ./node_modules/bootstrap/dist/js/bootstrap.js
Module build failed: ReferenceError: Unknown plugin "transform-es2015-modules-strip" specified in "E:\\Documente\\Work\\wordpress\\wordpressSite\\wp-content\\themes\\bsTheme\\node_modules\\bootstra
p\\.babelrc" at 0, attempted to resolve relative to "E:\\Documente\\Work\\wordpress\\wordpressSite\\wp-content\\themes\\bsTheme\\node_modules\\bootstrap"
问题似乎出现在bootstrap/.babelrc
{
"presets": [
[
"es2015",
{
"loose": true,
"modules": false
}
]
],
"plugins": [
"transform-es2015-modules-strip"
]
}
我尝试进入bootstrap目录并运行:npm install
(我不知道为什么我应该这样做,因为我已经有了自己的bable / autoprefixer配置)
我已经在我自己的package.json中安装了babel-core,babel-loader,babel-preset-es2015我安装了transform-es2015-modules-strip
并再次运行build:
ERROR in ./node_modules/bootstrap/dist/js/bootstrap.js
Module not found: Error: Can't resolve 'jquery' in 'E:\Documente\Work\wordpress\wordpressSite\wp-content\themes\bsTheme\node_modules\bootstrap\dist\js'
@ ./node_modules/bootstrap/dist/js/bootstrap.js 1:0-17
@ ./src/app.js
ERROR in ./node_modules/bootstrap/dist/js/bootstrap.js
Module not found: Error: Can't resolve 'popper.js' in 'E:\Documente\Work\wordpress\wordpressSite\wp-content\themes\bsTheme\node_modules\bootstrap\dist\js'
@ ./node_modules/bootstrap/dist/js/bootstrap.js 1:0-20
@ ./src/app.js
所以我尝试在我的项目中安装了jquery和popper作为dev依赖...摆脱了jquery错误但是......:
ERROR in ./node_modules/bootstrap/dist/js/bootstrap.js
Module not found: Error: Can't resolve 'popper.js' in 'E:\Documente\Work\wordpress\wordpressSite\wp-content\themes\bsTheme\node_modules\bootstrap\dist\js'
@ ./node_modules/bootstrap/dist/js/bootstrap.js 1:0-20
@ ./src/app.js
出于想法......这似乎过于复杂......我似乎无法知道自己做错了什么,我唯一能想到的就是获得{{1文件把它直接放在我的其他js文件中...很长的帖子,但我希望尽可能具体。
我该怎样做才能让它再次发挥作用,我真的很感激一些帮助。谢谢
答案 0 :(得分:42)
经过多次测试后,这是我使用bootstrap v4.0.0-beta
运行Webpack
的结论,因此您需要手动安装jquery和popper.js,它不会再被bootstrap作为依赖项安装。没有jquery它将无法工作,如果没有popper.js,下拉/弹出窗口将无法工作:
npm install bootstrap@4.0.0-beta -D
npm install jquery -D
npm install popper.js -D
我最后编辑了帖子,因为有人指出popper和popper.js是2个不同的库(我不知道)我试图用npm install popper
安装popper.js和因此我遇到了问题......所以用npm install popper.js
安装它会安装它的最新版本(以及正确的库)。
然后你必须像https://getbootstrap.com/docs/4.0/getting-started/webpack/
plugins: [
...
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default'],
...
})
...
]
然后配置的其余部分应与v4 alpha的相同。无论如何,这是我在经历了一段时间的努力之后发现的。希望它会帮助某人。
答案 1 :(得分:6)
升级到bootstarp
最新版本4.0.0
时出现此错误。
ERROR in ./node_modules/bootstrap/dist/js/bootstrap.js
Module not found: Error: Can't resolve 'popper.js' in 'E:\work\nodejs\mepos\node_modules\bootstrap\dist\js'
@ ./node_modules/bootstrap/dist/js/bootstrap.js 7:100-120
我刚刚添加了popper.js
依赖项,它解决了这个问题。 (jquery
已添加到我的依赖项中)
npm install popper.js --save
答案 2 :(得分:0)
我发现了同样的错误 经过一番搜索,找到设计找到解决方案:
首先你需要安装:
npm install babel-plugin-transform-es2015-modules-strip
他们安装:
babel-preset-es2015
babel-preset-stage-2
我也在前后附加图像。 希望是有帮助的。
答案 3 :(得分:0)
安装没有信号的bootstrap:^(npm install bootstrap@^4.0.0-alpha.6)
像这样:npm install bootstrap@4.0.0-alpha.6
答案 4 :(得分:-1)
我认为这是因为波普尔? Popper v1.10在npm上不可用,所以你可能已经安装了Popper v1.0.0。