web-dev-qa-db-fra.com

Comment utiliser une bibliothèque à partir d'un CDN dans un projet Webpack en production

Je voudrais utiliser react.min.js à partir d'un CDN en production (par exemple https://unpkg.com/[email protected]/dist/react.min.js )

Quelle est la meilleure façon d'obtenir Webpack pour transformer mon import React from 'react' instructions en const React = window.React au lieu de construire node_modules/react dans le bundle?

Je l'ai fait avec resolve.alias comme ça:

Dans 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>

Dans webpack.prod.config.js:

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

getWindowReact.js:

module.exports = window.React;

Remarque : Dans la vieille question, je ne savais pas que la construction React dans un bundle Webpack avec NODE_ENV=production supprimerait les vérifications propTypes. L'une des réponses se concentre sur cela.

webpackcdnproductionwebpack-externals
35
Andy

Dans votre configuration webpack, vous pouvez utiliser l'option externals qui importera le module de l'environnement au lieu d'essayer de le résoudre normalement:

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

En savoir plus ici: https://webpack.js.org/configuration/externals/

27
franky

J'ai créé https://github.com/mastilver/dynamic-cdn-webpack-plugin qui fait exactement cela hors de la boîte

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

Ajoutera dynamiquement les URL unpkg.org et ajoutera le code approprié dans votre bundle pour charger les bibliothèques à partir de global

10
mastilver

Toutes les parties de développement uniquement de la base de code React, telles que les vérifications PropType, sont protégées par:

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

Pour les supprimer de React dans votre propre build, en créant l'équivalent du React build dans votre propre bundle, utilisez DefinePlugin pour remplacer les références à process.env.NODE_ENV avec "production".

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

L'élimination du code mort d'Uglify supprimera alors tout, car il détectera ce code enveloppé d'un "production" !== "production" le chèque est inaccessible.

4
Jonny Buchanan