webentwicklung-frage-antwort-db.com.de

Verwendung einer Bibliothek aus einem CDN in einem Webpack-Projekt in der Produktion

Ich möchte react.min.js Von einem CDN in der Produktion verwenden (z. B. https://unpkg.com/[email protected]/dist/react.min.js )

Wie kann Webpack meine import React from 'react' - Anweisungen am besten in const React = window.React Umwandeln, anstatt node_modules/react In das Bundle zu integrieren?

Ich habe es mit resolve.alias So gemacht:

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 bemerkt, dass ich React in ein Webpack-Bundle mit NODE_ENV=production würde die propTypes -Überprüfungen streifen. Eine der Antworten konzentriert sich darauf.

webpackcdnproductionwebpack-externals
35
Andy

In Ihrer Webpack-Konfiguration können Sie die Option externals verwenden, mit der das Modul aus der Umgebung importiert wird, anstatt zu versuchen, es normal aufzulösen:

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

Lesen Sie hier mehr: https://webpack.js.org/configuration/externals/

27
franky

Ich habe https://github.com/mastilver/dynamic-cdn-webpack-plugin erstellt, was genau das aus der Box macht

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()
  ]
}

Fügt dynamisch unpkg.org-URLs hinzu und fügt den entsprechenden Code in Ihr Bundle ein, um Bibliotheken aus global zu laden.

10
mastilver

Alle entwicklungsspezifischen Teile der React Codebasis, wie z. B. PropType-Prüfungen, werden geschützt mit:

if ("production" !== process.env.NODE_ENV) {
  ..
}

Um diese aus React in Ihrem eigenen Build zu entfernen und das Äquivalent des minimierten React in Ihrem eigenen Bundle zu erstellen, verwenden Sie DefinePlugin bis Ersetzen Sie Verweise auf process.env.NODE_ENV durch "production".

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

Die tote Code-Eliminierung von Uglify entfernt dann alles, da festgestellt wird, dass der mit einem "production" !== "production" - Check umhüllte Code nicht erreichbar ist.

4
Jonny Buchanan