Webpack Alias ​​und ES6 Importe/Exporte

Question

Dies ist eine zweiteilige Frage.

Ich habe einen Webpack-Alias ​​mit dem Namen controls für eine bestimmte Datei eingerichtet, die alle meine geteilten React-Komponenten enthält. Diese Datei ist einfach eine index.js-Datei, die alle gewünschten Komponenten (etwa 30 gemeinsam genutzten Komponenten) und dann exportiert sie wie Importe:

export { Button, Tabs, ProgressBar, Carousel, … }

Die Komponenten sind aus verschiedenen Orten (Bibliotheken, mine, etc) . Mein Verständnis von Importen ist, dass wenn ich

import { Button } from ‘controls';

überall in meinem Projekt schreiben, wo ich will Button verwenden, Button nur in meinen Abhängigkeitsbaum gezogen werden sollte - nicht jede Ausfuhr von ‚Kontrollen/index.js‘ .

Erste Frage: ist mein Verständnis der Art und Weise wie Importe/Exporte hier genau arbeiten sollen?

Jetzt für das Problem: alle Komponenten, ob sie in einem bestimmten Bundle oder nicht verwendet werden, werden in jedes Bündel gezogen. Ich bin mir ziemlich sicher, dass dies aufgrund meines Webpack-Alias ​​geschieht.

Zweite Frage: Wer irgendwelche Ratschläge, wie kann ich noch sauber mehrere gemeinsam genutzte Komponenten auf einer einzigen Zeile wie

import { Button, Tabs, InitialsAvatar } from 'controls';

importieren, aber nicht alle meine Kontrollen ziehen (auch bekannt als Reagieren Komponenten geteilt) in den Abhängigkeitsbaum?

Ich habe mit Webpack der rumgespielt moduleDirectores und root, aber diese haben mir erlaubt, nicht mehrere Komponenten auf einer einzigen Zeile und nicht gestatten Sie mir, eine einzige index.js Datei zu verwenden, importieren alle meine gemeinsam genutzten Komponenten Haus .

Answer 1

Upgrade auf Webpack 2+, unterstützt Baumschütteln.

Jetzt markiert Webpack 2+ nur Code unbenutzt und exportiert es nicht in das Modul. Es zieht alles an und lässt ungenutzten Code für Minifikationsbibliotheken.

Sie können UglifyJS mit Babel dafür verwenden. UglifyJS unterstützt die neuen Sprachfunktionen von Javascript ES2015 + noch nicht. Sie benötigen Babel, um den Code in ES5 zu übertragen und dann UglifyJS zu verwenden, um den nicht verwendeten Code zu bereinigen.

Sie müssen mit .babelrc Datei:

Wir haben die Voreinstellung zu sagen (in unserem Fall babel-preset-env) das Modul transpilation zu überspringen.

{ 
    "presets": [ 
    ["env", { 
     "loose": true, 
     "modules": false 
    }] 
    ] 
} 

und entsprechenden webpack config:

module: { 
    rules: [ 
    { test: /\.js$/, loader: 'babel-loader' } 
    ] 
}, 

plugins: [ 
    new webpack.LoaderOptionsPlugin({ 
    minimize: true, 
    debug: false 
    }), 
    new webpack.optimize.UglifyJsPlugin({ 
    compress: { 
     warnings: true 
    }, 
    output: { 
     comments: false 
    }, 
    sourceMap: false 
    }) 
] 

ODER

Babili ist eine bessere Option, da Babili wird nicht verwendeten Code vor transpilation entfernen. Es ist viel einfacher, unbenutzte Klassen zu erkennen, bevor sie auf ES5 downleveled werden. Baumschütteln funktioniert auch für Klassendeklarationen, nicht nur für Funktionen.

Sie benötigen:

npm babilibabili-webpack-plugin --save-dev

Verwenden Sie das folgende Plugin in Ihrem webpack Config installieren, etwa so:

plugins: [ 
    new BabiliPlugin() 
] 

Es gibt auch eine optimzied Weg babili als Voreinstellung verwenden. Sie können ihre Website verweisen, um sie als Voreinstellung für Babel-Loader zu verwenden.