share_this_document - Excluir reaccionar del paquete de webpack

webpack png loader

Question

Estoy tratando de excluir reaccionar de mi paquete que se genera mediante el paquete web. Por lo que respecta a la razón, tenemos una versión global de reaccionar disponible en la página, así que la usaré.

He intentado utilizar el siguiente, como se sugiere aquí, el paquete web y las bibliotecas externas, pero parece que esto no funciona. Puedo ver que el paquete web exportó React pero aún aparece en el paquete.

externals: {
  ''react'': ''React''
}

Estaba pensando que podría ser otra dependencia, por ejemplo, react-router importando reaccionar? ¿Alguien ha logrado hacer esto?

Answer 1

Tuve el mismo problema que tú. Estuve atascado por una noche, encontré la respuesta, react-dom requiere react/lib/ReactDOM , que aún incluye react en el paquete. La solución se ve así:

externals: {
 ''react'': ''react'', // Case matters here 
 ''react-dom'' : ''reactDOM'' // Case matters here 
}

A continuación, agregue react-dom a la etiqueta de secuencia de comandos en su página.

Answer 2

Puede simplemente crear múltiples entradas para reaccionar por separado de su paquete de aplicaciones. Por ejemplo, puede hacer lo siguiente, utilizando el paquete web CommonsChunkPlugin:

module.exports = {
entry: {
    "app": "your app entry file",
    "react" : "react"
},
plugins: [
    new webpack.optimize.CommonsChunkPlugin("react", "react.bundle.js")
   ]
}

Answer 3

configuración de webpack :

externals: {
    ''react'': ''React'',
    ''react-dom'': ''ReactDOM'',
    ''react-router'': ''ReactRouter''
}

agréguelos a la parte inferior de index.html body.

<script src="http://cdn.bootcss.com/react/15.4.1/react.js"></script>
<script src="http://cdn.bootcss.com/react/15.4.1/react-dom.js"></script>
<script src="http://cdn.bootcss.com/react-router/2.8.1/ReactRouter.js"></script>

y, en su archivo de entry , tal vez index.js :

var React = require(''react'');
var ReactDOM = require(''react-dom'');
var ReactRouter = require(''react-router'');

const App = () => {
    return <div>
        webpack externals
    </div>
};

ReactDOM.render(
    <App/>,
    document.getElementById(''container'')
);