Javascript Webpack 无法加载 bootstrap v4.0.0-beta
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45660672/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Webpack fails to load bootstrap v4.0.0-beta
提问by Alin Faur
I've recently made a config with webpack and bootstrap v4.0.0-alpha.6 which worked fine until today when I tried to change to v4 beta and now I can't seem to make it work properly :( I have this config:
我最近使用 webpack 和 bootstrap v4.0.0-alpha.6 制作了一个配置，直到今天我尝试更改为 v4 beta 时它都运行良好，现在我似乎无法使其正常工作:( 我有这个配置：
webpack.config.js
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'),
in my app.jsI have the require('bootstrap');Now when I try to make build now I get an error:
在我的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"
The issue seems to be here in bootstrap/.babelrc
问题似乎在这里 bootstrap/.babelrc
{
"presets": [
[
"es2015",
{
"loose": true,
"modules": false
}
]
],
"plugins": [
"transform-es2015-modules-strip"
]
}
I tried to go in bootstrap directory and ran: npm install(i don't know why I should do that since I already have my own config for bable/autoprefixer)
I already have babel-core, babel-loader, babel-preset-es2015 installed in my own package.json I installed transform-es2015-modules-stripand ran build again:
我试图进入 bootstrap 目录并运行：（npm install我不知道为什么我应该这样做，因为我已经有了自己的 bable/autoprefixer 配置）我已经安装了 babel-core、babel-loader、babel-preset-es2015在我自己的 package.json 中，我安装transform-es2015-modules-strip并再次运行构建：
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
So I tried and installed jquery and popper in my project as dev dependency...got rid of the jquery error but..:
所以我尝试并在我的项目中安装了 jquery 和 popper 作为开发依赖项......摆脱了 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
Out of ideas...and this seems over complicated...I can't seem to know what I'm doing wrong, the only thing I can come up with is to get the bootstrap.jsfile put it directly with my other js files... long post but I wanted to be as specific as possible.
出于想法......这似乎过于复杂......我似乎不知道我做错了什么，我唯一能想到的就是让bootstrap.js文件直接与我的其他js文件放在一起。 .. 很长的帖子，但我想尽可能具体。
What should I do to make it work again, I would really appreciate some help. Thank you
我该怎么做才能让它再次工作，我真的很感激一些帮助。谢谢
回答by Alin Faur
After several tests this is my conclusion for running bootstrap v4.0.0-betawith Webpackso you will need to manually install jquery and popper.js, it will not be installed by bootstrap as dependencies anymore. It will not work without jquery and the dropdowns/popups will not work without popper.js so:
经过多次测试，这是我运行的结论bootstrap v4.0.0-beta，Webpack因此您需要手动安装 jquery 和 popper.js，引导程序不再将其安装为依赖项。如果没有 jquery，它将无法工作，没有 popper.js，下拉菜单/弹出窗口将无法工作，因此：
npm install [email protected] -D
npm install jquery -D
npm install popper.js -D
I ended up editing the post, because it was pointed out that popper and popper.js are 2 different libraries(which I didn't knew) I was trying to install popper.js with npm install popperand therefore I had the issue... so installing it with npm install popper.jswill install the latest version of it (and the right library).
Then you have to change in the webpack.config.js just as mentioned in https://getbootstrap.com/docs/4.0/getting-started/webpack/
我最终编辑了这篇文章，因为有人指出 popper 和 popper.js 是 2 个不同的库（我不知道）我试图安装 popper.js，npm install popper因此我遇到了问题......所以安装它npm install popper.js会安装它的最新版本（和正确的库）。然后你必须像https://getbootstrap.com/docs/4.0/getting-started/webpack/ 中提到的那样更改 webpack.config.js
plugins: [
...
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default'],
...
})
...
]
Then the rest of the config should be the same as it was for v4 alpha. Anyway this is what I found out after struggling with this for a while. Hope it will help someone.
然后其余的配置应该与 v4 alpha 相同。无论如何，这是我在为此苦苦挣扎一段时间后发现的。希望它会帮助某人。
回答by Sheikh Abdul Wahid
I got this error when upgraded to bootstarplatest version 4.0.0.
升级到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
I just added popper.jsdependency and it resolved the issue. (jquerywas already added in my dependencies)
我刚刚添加了popper.js依赖项，它解决了这个问题。（jquery已添加到我的依赖项中）
npm install popper.js --save
回答by Prestapro
I found same error and after some search find design find solution:
我发现了同样的错误，经过一些搜索找到设计找到解决方案：
First of all you need install:
首先你需要安装：
npm install babel-plugin-transform-es2015-modules-strip
And them install:
他们安装：
babel-preset-es2015
babel-preset-stage-2
Also i attached to image before and after. Hope is help.
我还附在图像之前和之后。希望是帮助。
回答by Gideao
install the bootstrap without the signal: ^ (npm install bootstrap@^4.0.0-alpha.6)
安装没有信号的引导程序：^ (npm install bootstrap@^4.0.0-alpha.6)
like this: npm install [email protected]
像这样： npm install [email protected]
回答by Temuz
It's because of popper, I think? Popper v1.10 isn't available over npm, so you probably installed Popper v1.0.0 instead.
这是因为波普尔，我想？Popper v1.10 无法通过 npm 使用，因此您可能安装了 Popper v1.0.0。
