【发布时间】：2018-01-21 11:23:55
【问题描述】：
我最近使用 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"
]
}
我试图进入引导目录并运行：npm install（我不知道为什么我应该这样做，因为我已经有自己的 bable/autoprefixer 配置）
我已经在自己的 package.json 中安装了 babel-core、babel-loader、babel-preset-es2015 我安装了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
所以我尝试在我的项目中安装 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
没有想法...这似乎过于复杂...我似乎不知道自己做错了什么，我唯一能想到的就是将bootstrap.js文件直接放入与我的其他 js 文件......很长的帖子，但我想尽可能具体。
我应该怎么做才能让它再次工作，我非常感谢一些帮助。谢谢
【问题讨论】：
-
不要从其他模块源目录 npm 安装，首先尝试 rm -rf node_modules。然后重新安装它们，看看会发生什么
-
再次尝试（已经这样做了 2 次）这次我在我的开发依赖项中有 popper 和 jquery，但我仍然得到相同的最后一个错误： ./node_modules/bootstrap/dist/js 中的错误/bootstrap.js 未找到模块：错误：无法解析 'popper.js' in...
-
如果你从 webpack 中删除 Popper: ['popper.js', 'default'] 会发生什么？
-
当我从 webpack.config.js 中删除 popper 时，它没有错误地构建，谢谢。我从getbootstrap.com/docs/4.0/getting-started/webpack 得到了配置我仍然对整个 webpack 引导配置感到困惑，仍然不确定我是否仍然需要将 Jquery 作为依赖项安装，或者我是否还需要其他配置，我会测试更多看看。
-
您确实需要 jquery 才能使用导航栏上的移动响应式菜单按钮
标签： javascript webpack bootstrap-4