javascript - Webpack 无法加载 bootstrap v4.0.0-beta

Question

我最近使用 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 并再次运行构建:

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 文件放在一起...很长的帖子，但我想尽可能具体。

我应该做什么才能让它再次工作，我真的很感激一些帮助。谢谢

Answer 1

经过多次测试，这是我运行 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 是两个不同的库(我不知道)我试图用 npm install popper 安装 popper.js因此我遇到了问题...所以用 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'],            
        ...
      })
    ...
  ]

那么其余的配置应该与 v4 alpha 的配置相同。无论如何，这是我在挣扎了一段时间后发现的。希望它能帮助某人。