2017-03-04 11 views
0

私は主なReactアプリケーションを持っていて、ユーザー要求やユーザーアクションの結果としてメインアプリケーションに動的にロードできるWebpackバンドルReactライブラリを作成します。Webpackをロードする方法SystemJSにバンドルを適用しますか?

私は、librairiesを動的に読み込むためにSystemJSを使用することがやり方だと思ったが、そのトピックについてのポインタは見つかりませんでした。私は、ライブラリをバンドルの依存関係を反応させるのならば、私はSystemJSでファイルを読み込むことができ

が、私はこのエラーを取得しています:ここで

は私の問題であるとして反応するので

invariant.js:44 Uncaught (in promise) Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded

これは理にかなっています私のバンドルに含まれており、また、メインアプリケーションの一部です。だから私は、リアクションをlibから除外して問題を解決すると思った。私は私の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) Error: (SystemJS) Unexpected token < SyntaxError: Unexpected token < at eval() Evaluating http://localhost:3000/React Error loading http://localhost:3000/Extension.js at eval()

私はSystemJSが反応をロードしようとしている理解localhost:3000/Reactと、これを読んだところからの依存関係は、SystemJS.config({...})で設定する必要がありますが、問題はどういう意味ですか?私はSystemJSの設定文書を読みましたが、私はそのような例は見ていません。

Reactライブラリを動的にロードしようとしているのは私だけですか?より良いアプローチがありますか?私は、不必要なライブラリをオンデマンドでロードでき、メインバンドルを膨らませないように、柔軟なメカニズムを用意したいと思っています。その

答えて

0

使用上の任意のポインタSystemJS設定ファイルにパッケージ名と場所をマップするbrowserifyプラグインとしてdebundlerまたはWebPACKのための

ありがとう:

SystemJS is meant to work with any module definition specifications, and even a repository URL. This means when SystemJS encounters a require('module_name') or an import module_name, it doesn't know where to find the module called module_name. Would it be on npm? Or is it a custom repository? SystemJS can't know for sure.

So we'd need to provide a mapping of all packages' names and the location of their repository. Needless to say, doing this manually is impractical, so we must use another package manager, that manages packages from everywhere.

参照

関連する問題