web-dev-qa-db-ja.com

Webpackがbootstrap v4.0.0-betaのロードに失敗する

最近、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をインストールし、ビルドを再度実行しました：

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ファイル...長い投稿ですが、できるだけ具体的にしたかったです。

もう一度機能させるにはどうすればよいですか、本当に助けていただければ幸いです。ありがとうございました

javascriptwebpackbootstrap-4
28
Alin Faur

いくつかのテストの後、これはbootstrap v4.0.0-betaをWebpackで実行するための私の結論です。したがって、jqueryとpopper.jsを手動でインストールする必要があり、依存関係としてbootstrapによってインストールされなくなります。 jqueryなしでは機能せず、droppers/popupsはpopper.jsなしでは機能しません。

npm install [email protected] -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/ に記載されているように、webpack.config.jsを変更する必要があります。

plugins: [
    ...
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        Popper: ['popper.js', 'default'],            
        ...
      })
    ...
  ]

残りの設定は、v4 alphaの場合と同じである必要があります。とにかく、これはしばらくこれに苦労して見つけたものです。それが誰かを助けることを願っています。

46
Alin Faur

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
8
Sheikh Abdul Wahid

私は同じエラーを見つけ、いくつかの検索後にデザインを見つけて解決策を見つけました：

まず、インストールが必要です：

npm install babel-plugin-transform-es2015-modules-strip

そしてそれらをインストールします：

babel-preset-es2015
babel-preset-stage-2

また、私は前後の画像に添付しました。希望は助けです。

0
Prestapro

信号なしでbootstrapをインストールします：^（npm install bootstrap@^4.0.0-alpha.6）

このように：npm install [email protected]

0
Gideao