Best way to add 3rd part libraries

mauricioklein commented 7 years ago

Hello!

First of all, congratulations for the great work.

I'm trying to use videojs-markers on the system, and this libra has 3 dependencies:

jquery-2.0.3.min.js
video-js
videojs.markers.js

My question is: what's the best way to load these scripts to my project?

Today, I'm downloading the 3 respective files and saving them in static/vendor/javascript.

Then, I just add them in Html.jsx as follow:

<body>
   <div id="content" dangerouslySetInnerHTML={{__html: content}}/>
   <script dangerouslySetInnerHTML={{__html: `window.__data=${serialize(store.getState())};`}} charSet="UTF-8"/>
   <script src={assets.javascript.main} charSet="UTF-8"/>

   { /* Video.js */ }
   <script src={require("../../static/vendor/javascript/video.min.js")}></script>
   <script src={require("../../static/vendor/javascript/jquery-2.0.3.min.js")}></script>
   <script src={require("../../static/vendor/javascript/videojs-markers.min.js")}></script>
</body>

But this is not working. Maybe there's a way to embed these files in the single js file bundled by webpack, but I don't know how. So, would really appreciate some help here about the best way to solve this problem.

Thanks in advance for all support!

govind999 commented 7 years ago

for third party plugins, you have to use this way only. If you want to bundle, simple add a npm task and bundle them, copy these three files into a directory and do something like this

scripts": { "build": "webpack && uglifyjs ./vendor/*.js -c -m -o ./dst/bundle.min.js --source-map ./dst/bundle.min.js.map" }

EthanSnow commented 7 years ago

Can I just import them at top of my components?

VSuryaBhargava commented 7 years ago

I import Jquery in the components where Jquery is used.

For the other libraries I include them in in the webpack config entry main

or

I exclude them for jsx loader and include them in client.js ( I use this method for 3rd party css too).

On Sep 22, 2016 12:19 PM, "EthanSnow" notifications@github.com wrote:

Can I just import them at top of my components?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/erikras/react-redux-universal-hot-example/issues/1287#issuecomment-248825931, or mute the thread https://github.com/notifications/unsubscribe-auth/AFNPvEbu8ux_lNa3ElIq7DQFwave3xhtks5qsiTlgaJpZM4KBnnd .

mauricioklein commented 7 years ago

@govind999 Sorry, but I didn't get your point:

Including Githubissues.

Githubissues is a development platform for aggregating issues.

erikras / react-redux-universal-hot-example

Best way to add 3rd part libraries #1287