Webpack无法加载bootstrap v4.0.0-beta

Question

我最近使用webpack和bootstrap v4.0.0-alpha.6进行了配置工作正常,直到今天我尝试更改为v4测试版,现在我似乎无法使其正常工作:(我有这个配置:

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配置)我已经安装了babel-core,babel-loader,babel-preset-es2015在我自己的package.json中我安装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

出于想法......这似乎过于复杂......我似乎无法知道我做错了什么,我唯一能想到的就是把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是2个不同的库(我不知道)我试图安装popper.js npm install popper因此我有问题...所以安装它将npm install popper.js安装它的最新版本(和正确的库).然后你必须改变webpack.config.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的相同.无论如何,这是我在经历了一段时间的努力之后发现的.希望它会帮助某人.

Answer 2

升级到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