web-dev-qa-db-ja.com

本番環境のWebpackプロジェクトでCDNのライブラリを使用する方法

本番環境のCDNからreact.min.jsを使用したい（例 https://unpkg.com/[email protected]/dist/react.min.js ）

import React from 'react'をバンドルに構築する代わりに、Webpackで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をNODE_ENV=productionを含むWebpackバンドルに組み込むと気付かなかったpropTypesチェックアウト。答えの1つはそれに焦点を合わせています。

webpackcdnproductionwebpack-externals
35
Andy

Webpackの設定で、通常の解決を試みる代わりに、環境からモジュールをインポートするexternalsオプションを使用できます。

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

詳細はこちら： https://webpack.js.org/configuration/externals/

27
franky

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

Unpkg.orgのURLを動的に追加し、バンドルに適切なコードを追加してglobalからライブラリをロードします

10
mastilver

PropTypeチェックなどのReactコードベースの開発専用部分はすべて、以下で保護されています。

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
    }
  })
  // ...
],

Uglifyのデッドコードの除去は、"production" !== "production"チェックでラップされたコードが到達不能であることを検出するため、すべてを取り除きます。

4
Jonny Buchanan