Question

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

我认为使用SystemJS来动态加载librairies是可行的方法，但我无法找到关于该主题的任何指示。

这是我的问题：

如果我使用React依赖项捆绑库，我可以使用SystemJS加载该文件但是我收到此错误：

invariant.js：44 Uncaught（在promise中）错误：addComponentAsRefTo（...）：只有ReactOwner可以有refs。您可能正在为未在组件的render方法中创建的组件添加引用，或者您有多个React已加载的副本

这是有道理的，因为React已包含在我的包中，也是主App的一部分。所以我认为从lib中排除React会解决问题。我添加了＆＃34;外部＆＃34;到我的webpack配置：

///////////////////////////////////////////////////////////
// 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 Uncaught（in promise）错误：（SystemJS）意外的令牌＆lt; SyntaxError：意外的令牌＆lt; 在eval（）评估http://localhost:3000/React 加载http://localhost:3000/Extension.js时出错在eval（）

我知道SystemJS正在尝试在localhost：3000 / React上加载React依赖项，从我读到的内容中必须配置SystemJS.config（{...}），但问题是如何？我阅读了SystemJS配置文档，但我还没有看到任何这样的例子。

我是唯一一个试图动态加载React库的人吗？有更好的方法吗？我希望有一个灵活的机制，以便可以按需加载不必要的库，并且不会使主包膨胀。

感谢您在

上的任何指针

Answer 1

使用debundler或webpack作为browserify插件将软件包名称和位置映射到SystemJS配置文件：

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

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

<强>参考

如何使用SystemJS加载Webpack React包？

1 个答案: