Wie in einem Webpack Projekt in Produktion

eine Bibliothek aus einem CDN verwenden Ich mag react.min.js von einem CDN in der Produktion verwenden (zB https://unpkg.com/[email protected]/dist/react.min.js)Wie in einem Webpack Projekt in Produktion

was den besten Weg ist Webpack zu bekommen meine import React from 'react' Aussagen zu verwandeln in const React = window.React statt node_modules/react in das Bündel zu bauen?

Ich mache es mit resolve.alias wie folgt aus:

In index.html:

<head> 
    <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/react.min.js"></script> 
    <script type="text/javascript" src="/assets/bundle.js"></script> 
</head>

In webpack.prod.config.js:

alias: { 
    react$: './getWindowReact', 
},

getWindowReact.js:

module.exports = window.React;

Hinweis: In der alten Frage habe ich nicht erkannt, dass Gebäude React in einem Webpack-Bundle mit NODE_ENV=production würde die propTypes Schecks ausziehen. Eine der Antworten konzentriert sich darauf.

Quelle

2015-07-22 Andy

In Ihrem webpack Config können Sie die externals Option verwenden, die das Modul aus der Umgebung importieren, anstatt es zu versuchen, normal zu beheben:

// webpack.config.js 
module.exports = { 
    externals: { 
    'react': 'React' 
    } 
    ... 
};

Lesen Sie mehr hier: http://webpack.github.io/docs/library-and-externals.html

Quelle

2015-07-22 23:41:48 franky

So stellt sich zum Laden aus Ich habe mich geirrt, dass React mit Webpack erstellt wurde, also würde das nicht funktionieren. Aber es scheint die richtige Antwort für die Verwendung eines Moduls zu sein, das mit Webpack erstellt wurde, also werde ich diese Antwort akzeptieren. – Andy

@Andy Ich verstehe Ihren Kommentar möglicherweise nicht vollständig, aber was hier vorgeschlagen wurde, erfordert nicht, dass die zu ladende Bibliothek mit Webpack erstellt wird. All dieses "externe" Beispiel sagt webpack "wenn ein Modul" reagieren "anfordert, gibt" window.React "zurück. – Aaronius

@Aaronius yeah, tut mir leid, ich habe zu der Zeit die '' '' '' '' '' 'externen' '' '' '' externen '' '' '' '' externals '' missverstanden ... die Dokumente für sie sind irgendwie peinlich. – Andy

die gesamte Entwicklung - Nur Teile der React-Codebasis, wie z. B. PropType-Prüfungen, werden geschützt mit:

Um diese in Ihrem eigenen Build von React zu entfernen, erstellen Sie das Äquivalent des minimierten React-Builds in Ihrem eigenen Bundle. Verwenden Sie DefinePlugin, um Referenzen auf process.env.NODE_ENV durch "production" zu ersetzen.

plugins: [ 
    // ... 
    new webpack.DefinePlugin({ 
    'process.env.NODE_ENV': JSON.stringify('production') 
    }), 
    new webpack.optimize.UglifyJsPlugin({ 
    compressor: { 
     warnings: false 
    } 
    }) 
    // ... 
],

verunstalten die Beseitigung von totem Code wird es dann Streifen alle aus, wie es diesen Code eingewickelt erkennt mit einem "production" !== "production" Check nicht erreichbar ist.

Quelle

2015-07-23 00:25:16

Das ist auch toll zu wissen, aber da mein Chef React von einem CDN verwenden will, bleiben wir dabei. – Andy

Ich habe https://github.com/mastilver/dynamic-cdn-webpack-plugin, die genau das aus dem Kasten heraus tut

const path = require('path') 
const HTMLWebpackPlugin = require('html-webpack-plugin') 
const DynamicCDNWebpackPlugin = require('dynamic-cdn-webpack-plugin') 

module.exports = { 
    entry: './main.js', 
    output: { 
    path: path.join(__dirname, 'build'), 
    filename: 'bundle.js' 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     use: { 
      loader: 'babel-loader' 
     } 
     } 
    ] 
    }, 
    plugins: [ 
    new HTMLWebpackPlugin(), 
    new ModulesCDNWebpackPlugin() 
    ] 
}

dynamisch unpkg.org URLs hinzufügen und den entsprechenden Code in Ihrem Bündel hinzufügen librairies von global

Quelle

2017-07-04 15:06:06 mastilver

badass, das ist eine großartige Idee! Ich benutze das 'https: // github.com/kossnocorp/assets-webpack-plugin' anstelle des Manifest-Plugins, weißt du, ob dein Plugin auch mit' assets-webpack-plugin' funktionieren wird? – Andy

@Andy Ich habe es nicht versucht, aber ich glaube es tut. Wenn nicht zögern, ein Problem zu melden :) – mastilver

@mastilver 'Pfad' ist, wo der CDN-Link geht? –

Wie in einem Webpack Projekt in Produktion

Antwort

Verwandte Themen