2016-11-02 5 views
0

私はしばらく反応しています。私はwebpackのようにモジュールローダーを使用しません。公開されている反応成分を再利用する

私はnpmを使ってnpmからファイルを取得し、その中のdistフォルダからdistを取得します。そして、es6からes5に行くためのバベル。

反応成分を再利用する方法を決めることはできませんでした。彼らは何らかの種類のrequireを使用しているようです。 npmで見つけたコンポーネントを再利用する方法を私に説明してください。ここで

は、私はそれを使用する方法の例です:

<link rel="stylesheet" href="/styles/app.css" /> 

    <script src="/scripts/3rd/polyfill.min.js"></script> 
    <script src="/scripts/3rd/comm/webext.js"></script> 
    <script src="/scripts/3rd/react-with-addons.min.js"></script> 
    <script src="/scripts/3rd/react-dom.min.js"></script> 
    <script src="/scripts/3rd/redux.min.js"></script> 
    <script src="/scripts/3rd/react-redux.min.js"></script> 
    <script src="/scripts/app.js"></script> 
</head> 
<body> 
    <div id="root"></div> 
</body> 

それから私のJSがある:

 ReactDOM.render(
      React.createElement(ReactRedux.Provider, { store }, 
       React.createElement(App) 
      ), 
      document.getElementById('root') 
     ); 
+0

ノードチュートリアルの紹介をすることをお勧めします.JavaScriptモジュールの速度を上げることができます。また、セットアップを必要とせず、モジュールを使用する公式のReactスタータープロジェクトを使用することをお勧めします。https://github.com/facebookincubator/create-react-app – azium

+1

例を教えてください。 – netchkin

+0

@azium私は自分のターゲットがブラウザ用の拡張機能であるとしてcreate-react-appを使うことはできません。 – Noitidart

答えて

1

私はあなたがちょうど彼らのコードをダウンロードできると思いますgithubから、そこにr un npm run compileとあなたのページにlibフォルダの内容が含まれています。

しかし、なぜwebpackを使用しないのですか?フロントエンドアプリケーションの拡張機能をいくつかビルドしたいと思っていますが、webpackでは実際にすべてのコードをビルドしてから、すべてのブラウザから使用できる単純なhtmlとcssにコンパイルすることができます。詳細については、このガイドを参照してください。https://survivejs.com/webpack/introduction/

+0

ありがとうnetchkin!私はこれを試して、あなたに戻ってきます。ブラウザ拡張システムには私が頼っている独自のモジュールローディングシステムがあるので、私はwebpackを使用しません。フロントエンドとブラウザの間に接続が確立されています。私はwebpackの下にある複雑なことを理解していない、それは私のコントロールを感じさせる。 :( – Noitidart

+1

私はしばしばwebpackと同じように感じました。幸いなことに、それを試してみたり、良いチュートリアルを持っていたりしています。それを学ぶ最も良い方法は、簡単に始めることです。 – netchkin

+0

あなたは同じ感情を共有してくれてありがとうnetchkinと一緒にそれを試してみましょう!:)あなたはいつも何が起こっているのか理解しています。 – Noitidart

関連する問題