Как использовать библиотеку из CDN в проекте Webpack в производстве

Я хотел бы использовать react.min.js из CDN в процессе производства (например, https://unpkg.com/[email protected]/dist/react.min.js)

Каков наилучший способ заставить Webpack преобразовывать операторы import React from 'react' в const React = window.React вместо создания node_modules/react в пакет?

Я делал это с resolve.alias следующим образом:

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

В webpack.prod.config.js:

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

getWindowReact.js:

module.exports = window.React;

Примечание. В старом вопросе я не понимал, что построение React в пакете Webpack с помощью NODE_ENV=production будет отменять проверки propTypes. Один из ответов посвящен этому.

Ответ 1

В вашей конфигурации webpack вы можете использовать опцию externals, которая будет импортировать модуль из среды, а не пытаться ее разрешить в обычном режиме:

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

Подробнее здесь: http://webpack.github.io/docs/library-and-externals.html

Ответ 2

Я создал https://github.com/mastilver/dynamic-cdn-webpack-plugin, который делает именно это из коробки

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

Будет динамически добавлять URL-адреса unpkg.org и добавить соответствующий код в ваш комплект для загрузки librairies из global

Ответ 3

Все части только для разработки базы кода React, такие как проверки PropType, защищены:

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

Чтобы удалить их из React в своей собственной сборке, создав эквивалент миниатюрной сборки React в вашем собственном пакете, используйте DefinePlugin для замены ссылок на process.env.NODE_ENV на "production".

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

Углемируйте уничтожение мертвого кода, затем все это вычеркнет, так как он обнаружит, что код, завернутый с тегом "production" !== "production", недоступен.