Javascript 如何使用SystemJS加载Web包包包？

我有一个主React应用程序，我创建了Web包绑定的React库，可根据用户请求或某些用户操作在主应用程序中动态加载

我认为使用SystemJS动态加载Libraries是一个不错的选择，但我找不到任何关于这个主题的指针

这是我的问题：

如果我将库与React依赖项捆绑在一起，我可以使用SystemJS加载该文件，但会出现以下错误：

invariant.js:44未捕获（承诺中）错误：addComponentAsRefTo（…）：只有ReactOwner可以有引用。您可能正在向未在组件的

render

方法中创建的组件添加引用，或者已加载多个副本

这是有道理的，因为React已经包含在我的包中，也是主应用程序的一部分。因此，我认为排除lib中的React将解决问题。我将“外部”添加到我的网页配置中：

///////////////////////////////////////////////////////////
// Webpack config development
//
///////////////////////////////////////////////////////////
module.exports = {

  devtool: 'source-map',

  context: path.join(
    __dirname, '../src/Extensions'),

  entry: {
    Extension: [
      './Extension/index.js'
    ]
  },

  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: "[name].js",
    libraryTarget: "umd",
    library: "[name]"
  },

  plugins: [

    new webpack.HotModuleReplacementPlugin(),

    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('development'),
        WEBPACK: true
      }
    }),

    new webpack.ProvidePlugin({
      'window.jQuery': 'jquery',
      jQuery: 'jquery',
      _: 'lodash',
      $: 'jquery',

      React: "React",
      react: "React",
      "window.react": "React",
      "window.React": "React"
    }),

    new ProgressBarPlugin({
      format: '  build [:bar] ' + chalk.green.bold(':percent') + ' (:elapsed seconds)',
      clear: false
    })
  ],

  resolve: {
    modules: [
      path.resolve('./node_modules'),
    ],
    extensions : ['.js', '.jsx', '.json']
  },

  resolveLoader: {
    modules: ['node_modules']
  },

  module: {

    rules: [

      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: [{
          loader: 'babel-loader',
          options: {
            presets: ['react', 'es2015', 'stage-0'],
            plugins: ['transform-runtime']
          }
        }]
      }
    ]
  },

  externals: {
    "react": "React",
    "react-dom": "ReactDOM"
  }
}

但这样做之后，使用SystemJS加载lib将输出以下错误：

ConfiguratorView.js:116未捕获（承诺中）错误：（SystemJS）意外令牌< SyntaxError:意外标记< 评估时（） 评价 加载错误 评估时（）

我知道SystemJS试图在localhost:3000/React上加载React依赖项，从我所读到的内容来看，这必须用SystemJS.config（{…}）配置，但问题是如何配置？？我阅读了SystemJS配置文档，但没有看到任何这样的示例

我是唯一一个尝试动态加载React库的人吗？有更好的方法吗？我希望有一个灵活的机制，这样就可以根据需要加载不必要的库，而不会使主捆绑包膨胀

---

感谢您提供有关该文件的任何指针

使用去处理程序或网页包作为browserify插件，将程序包名称和位置映射到SystemJS配置文件：

SystemJS适用于任何模块定义规范，甚至是存储库URL。这意味着当SystemJS遇到require（'module_name'）或import module_name时，它不知道在哪里可以找到名为module_name的模块。会在npm上吗？还是自定义存储库？SystemJS不能确定

因此，我们需要提供所有包的名称及其存储库位置的映射。不用说，手动执行此操作是不切实际的，因此我们必须使用另一个包管理器来管理来自任何地方的包

参考资料