external-dependencies.js

// header script 的 webpack.config.js 里做 externals 的声明，
// 并绑定到 __tidb 这个全局变量上，方便使用方通过全局变量注入 dependencies
externals: {
  'prop-types': '__tidb.PropTypes',
  'react-dom': '__tidb.ReactDOM',
  'styled-components': '__tidb.styledComponents',
  antd: '__tidb.antd',
  polished: '__tidb.polished',
  ramda: '__tidb.R',
  react: '__tidb.React',
  // 更多不希望打包到 script bundle 的 shared dependencies... 
}


// 使用方在入口文件初始化 shared dependencies 的关联关系。
// 后面这个文件可以单独生成一个 shared-dependencies.js 的脚本。
// 使用时依次在 html 里加载 shared-dependencies.js 和 header-footer.js，
// 这样 header-footer.js 就知道应该如何通过 window.__tidb.React 和 window.__tidb.R
// 去用使用方自己的 React, Ramda 等 shared dependencies
import * as R from 'ramda';
import * as React from 'react';
import * as antd from 'antd';
import * as polished from 'polished';
import * as redux from 'redux';
import * as styledComponents from 'styled-components';
import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';

window.__tidb = {
  PropTypes,
  R,
  React,
  ReactDOM,
  antd,
  polished,
  styledComponents,
};