Verwenden von externen Webpack-Elementen und Import nach ES6-Format?

Question

Ich erstelle eine Chrome-Erweiterung und verwende React und Webpack.

Da dies eine Chrome-Erweiterung ist, kann ich manifest.json verwenden, um React und ReactDOM in den Browser zu laden, bevor eine Zeile meines eigenen Codes ausgeführt wird. Mein Verständnis ist, dass:

• die react.js von manifest.json zeigen sich als Globals, erreichbar über window.React geladen lib
• webpack Äußerlichkeiten kann so konfiguriert werden, dass Reagieren und ReactDOM gebündelt erhalten nicht

Hier sind meine Dateien:

webpack.config.js

manifest.json

{ 
    "manifest_version": 2, 
    "name": "Test Application", 
    "version": "3.2", 
    "description": "testing", 
    "short_name": "some test", 

    "author": "blah blah", 

    "content_scripts": [ 
    { 
     "matches": ["https://www.google.com/*"], 
     "js": [ 
     "react.js", 
     "react-dom.js", 

     "skinny-bundle.js" 
     ], 
     "run_at": "document_idle" 
    } 
    ] 
} 

index.js

import HelloGreeting from './HelloGreeting'  

ReactDOM.render(
    <HelloGreeting />, 
    document.getElementById('cst') 
) 

HelloGreeting.js

// import React from 'react' <----- here is my problem!!! 

// functional component test 
const Hello = props => { 
    return (
    <div>hello world</div> 
) 
} 

// class component test 
class HelloGreeting extends React.Component { 
    constructor(props) { 
    super(props) 
    } 

    render() { 
    return (
     <ul> 
     <li><Hello /></li> 
     <li>hello universe</li> 
     </ul> 
    ) 
    } 
} 

export default HelloGreeting 

Hier liegt mein Problem. Ich habe eine einfache React-Komponente namens HelloGreeting, die nicht funktioniert, wenn ich die import React from 'react' Linie halten. Wenn ich den Import auskommentiere, funktioniert es tatsächlich, weil ich vermute, dass Webpack es einfach ignoriert, weil React in externen Webpacks definiert wurde. Wenn ich die Import-Anweisung in lasse, bekomme ich einen "Uncaught TypeError: Cannot read property 'Component' if undefined" Fehler, möglicherweise, weil Webpack versucht, mit window.React irgendwie zu bündeln und zu verwirren. Ich habe diese Vermutung gemacht wegen dem, was Webpack mit oder ohne Import ausgibt.

Wenn ich den Import Kommentar aus, gibt webpack ein kleineres Bündel:

Hash: 26f1526e2554c828c050 
Version: webpack 3.5.5 
Time: 80ms 
      Asset  Size Chunks    Chunk Names 
skinny-bundle.js 5.75 kB  0 [emitted] main 
    [1] ./HelloGreeting.js 2.5 kB {0} [built] 
    + 1 hidden module 

Wenn ich meine Import halten, gibt mein webpack ein größeres Bündel:

Hash: 1fc9353f1fe6dd935744 
Version: webpack 3.5.5 
Time: 77ms 
      Asset  Size Chunks    Chunk Names 
skinny-bundle.js 6.05 kB  0 [emitted] main 
    [1] ./HelloGreeting.js 2.71 kB {0} [built] 
    + 2 hidden modules 

Meine Frage ist, was kann ich tun, um Webpack zu konfigurieren, so dass ich noch meine ES6-Stil Importe habe und immer noch Webpack NOT Bundle react.js?

Ich möchte wirklich die Import-Anweisung behalten, weil diese Komponenten in zukünftigen Projekten verwendet werden und ich möchte dies so modular und tragbar wie möglich halten.

Answer 1

Es stellt sich heraus, dass ich webpack externals überkompliziert.

mächtig ändern:

externals: { 
    react: { 
     root: 'React', 
     commonjs2: 'react', 
     commonjs: 'react', 
     amd: 'react' 
    }, 
    'react-dom': { 
     root: 'reactDOM' 
    } 
    } 

zu:

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

... mein Problem gelöst.Jetzt ignoriert Webpack den gesamten React-Code und hält mein Bündel klein.

https://github.com/webpack/webpack/issues/1275 hat mir geholfen.