javascript - sfnge8fjt3gxweongsv7zt27nxfoaoapmym81iuxopkfojwj8erdknlpmo - getbootstrap 4.1 0

Webpack no puede cargar bootstrap v4.0.0-beta

Question

Recientemente hice una configuración con webpack y bootstrap v4.0.0-alpha.6 que funcionó bien hasta hoy cuando intenté cambiar a v4 beta y ahora parece que no puedo hacer que funcione correctamente :( Tengo esta configuración:

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''),

en mi app.js tengo el require(''bootstrap''); Ahora cuando intento hacer compilación ahora recibo un error:

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"

El problema parece estar aquí en bootstrap/.babelrc

{
    "presets": [
        [
            "es2015",
            {
                "loose": true,
                "modules": false
            }
        ]
    ],
    "plugins": [
        "transform-es2015-modules-strip"
    ]
}

Intenté entrar en el directorio bootstrap y ejecuté: npm install (no sé por qué debería hacer eso porque ya tengo mi propia configuración para bable / autoprefixer) Ya tengo babel-core, babel-loader, babel-preset- es2015 instalado en mi propio package.json Instalé transform-es2015-modules-strip y ejecuté la compilación nuevamente:

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

Así que probé e instalé jquery y popper en mi proyecto como dependencia de desarrollo ... eliminé el error de jquery pero ...

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

Sin ideas ... y esto parece demasiado complicado ... Parece que no puedo saber lo que estoy haciendo mal, lo único que puedo hacer es conseguir que el archivo bootstrap.js ponga directamente con mi otro Archivos js ... largo post pero quería ser lo más específico posible.

¿Qué debo hacer para que funcione de nuevo? Realmente agradecería algo de ayuda. Gracias

Answer 1

Después de varias pruebas, esta es mi conclusión para ejecutar bootstrap v4.0.0-beta con Webpack por lo que necesitará instalar manualmente jquery y popper.js, ya que no será instalado por bootstrap como dependencias. No funcionará sin jquery y los desplegables / ventanas emergentes no funcionarán sin popper.js, por lo que:

npm install [email protected] -D
npm install jquery -D
npm install popper.js -D

Terminé editando la publicación, porque se señaló que popper y popper.js son 2 bibliotecas diferentes (que no sabía). Estaba tratando de instalar popper.js con npm install popper y, por lo tanto, tuve el problema ... . npm install popper.js con npm install popper.js se instalará la versión más reciente (y la biblioteca correcta). Luego, debe cambiar en webpack.config.js tal como se menciona en getbootstrap.com/docs/4.0/getting-started/webpack

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

Luego, el resto de la configuración debe ser el mismo que para v4 alpha. De todos modos, esto es lo que descubrí después de luchar con esto por un tiempo. Espero que ayude a alguien.

Answer 2

Encontré el mismo error y después de buscar una solución de búsqueda de diseño de búsqueda:

En primer lugar necesitas instalar:

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

Y ellos instalan:

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

También adjunto a la imagen antes y después. La esperanza es ayuda.

Answer 3

Es por el popper, creo? Popper v1.10 no está disponible en npm, por lo que probablemente instaló Popper v1.0.0 en su lugar.

Answer 4

Recibí este error cuando se actualizó a la última versión 4.0.0 bootstarp .

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

Acabo de agregar la dependencia popper.js y resolvió el problema. ( jquery ya fue agregado en mis dependencias)

npm install popper.js --save

Answer 5

instale el programa de arranque sin la señal: ^ (npm instale bootstrap@^4.0.0-alpha.6)

así: npm instala [email protected]