reactをアプリケーションではなくコンポーネントライブラリとして使用する方法

Question

私は反応を覚えようとしており、既存のプロジェクトにも導入しようとしています。したがって、私はどこでもそれを使用するのではなく、理にかなったいくつかの場所で反応を使用したいと考えています。

問題は、私の頭を包むことができないエントリーポイントの概念です。私が持っていることを好むだろう：私のcshtml内部

ReactDOM.render(
    <MyComponent/>, 
    document.getElementById("componentExample") 
); 

<div id='componentExample'></div>近くではなく、別のjsxインチ私はcshtmlでjsx構文を使用することができないことを理解し、私は

<script src="@Url.Content("~/Scripts/dist/bundle.js")"></script> 
<script> 
    ReactDOM.render(
     React.createElement(MyComponent, {}, null), document.getElementById("componentExample") 
    ); 
</script> 

を書く場合MyComponentが定義されていないので、これは実際に動作しません。それは私のbundle.js（私はエントリーポイントとしてそれを追加しなければならなかった）に含まれていますが、それはいくつかのwebpackの範囲内にあり、さらされていません。

これを行う正しい方法は何ですか？

私の目標は、アプリケーションに適したコンポーネントをいくつか書いて、リアクションベースのアーキテクチャに完全に移行することなく、ここやそこで使うことです。

私のセットアップは、webpack + babel polyfill + typescript + reactであり、これはASP.NET MVCです。

マイwebpack.config.jsは次のとおりです。

var config = { 
    entry: ['babel-polyfill', "./SiteScripts/React/index.tsx", "./SiteScripts/React/Components/MyComponent.tsx"], 
    output: { 
     filename: "./Scripts/dist/bundle.js", 
    }, 

    // Enable sourcemaps for debugging webpack's output. 
    devtool: "source-map", 

    resolve: { 
     // Add '.ts' and '.tsx' as resolvable extensions. 
     extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"] 
    }, 

    module: { 
     rules: [ 
      // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'. 
      { 
       enforce: 'pre', 
       test: /\.js$/, 
       loader: "source-map-loader" 
      }, 

      // All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'. 
      { 
       test: /\.tsx?$/, loaders: ['babel-loader', "ts-loader"], exclude: /node_modules/ 
      } 
     ] 
    }, 

    plugins : [] 
} 

if (process.env.NODE_ENV === "production") { 
    config.devtool = "cheap-module-source-map"; 
} 


module.exports = config; 

また、これは（建築についての質問など）の質問に多少関連している：私は私のbundle.jsを小さくしたいのですが - それは今30Kの線です。それはおそらく私が間違った方法でreactを使用しようとしているからでしょうか？

Answer 1

私はついにこの問題を発見しました。私はいくつかの間違いを抱えていた（そしてwebpackの背後にある理論全体を完全には理解していなかった）、答えは間違いない。私は、エントリから最後のファイルだけを考える（

entry: ['babel-polyfill', "./SiteScripts/React/index.tsx"], 
output: { 
     filename: "./Scripts/dist/bundle.js", 
     libraryTarget: "var", 
     library: "WebPack" 
    }, 

これはindex.tsxで定義されたタイプ/変数を行います：

まず、私はそれで定義されたもの（webpack.config.js）をエクスポートするために、ライブラリをバンドルすることによりしなければなりませんでしたリストは取られました）、それはexportedです - WebPack.<name>

私のコンポーネントをエクスポートする必要があります。私はこのようにそれをやった - しかし、より良い方法（index.tsx）は、おそらくあります

import { MyComponent} from "./Components/mycomponent"; 
export var myComponent = MyComponent; 

私も私のすべてのサブコンポーネントがモジュールであることを確認する必要がありました。これはどこでもimportを使用し、すべての要素、小道具、州にキーワードexportを追加することを意味します。

は、その後、私はから私のコンポーネントをレンダリングすることができました：

<script src="@Url.Content("~/Scripts/dist/bundle.js")"></script> 
<script> 
    ReactDOM.render(
     React.createElement(WebPack.myComponent, 
      { 
       PropA = 2, PropB = "3" 
      }, null), 
     document.getElementById("componentExample") 
    ); 
</script> 

私はこれをやっている場合を監視するもう一つのライン<script src="@...が私の結果のhtmlで複数回起こらないということである（この私は単一のページに埋め込まれた多くのコンポーネントを使用しているので、非常に可能性があります）。私はbundle.jsへのパスを指定し、whenFinish機能で、私はReactDOM.render(...もの

を呼び出す関数を入れ

function loadJsOnce(url, whenFinish) { 
    if (!window.loadedScripts) { 
     window.loadedScripts = {}; 
    } 

    if (!window.loadedScripts[url]) { 
     var script = document.createElement('script'); 
     //script.async = true; // remove this if you don't want the script to be async 
     script.src = url; 
     script.onload = function() { 
      whenFinish(); 
     } 
     document.getElementsByTagName('head')[0].appendChild(script); 

     window.loadedScripts[url] = true; 
    } else { 
     whenFinish(); 
    } 
} 

をurlで：私は一度だけbundle.jsをロード確保するために、このjavascript関数を使用します