导入外部 JS 库并在 React 组件中使用

Question

I have some code in React like this:

useEffect(() => {
  TICautocapture(etc..);

That TICautocapture() function is already defined in an external js file, let's say:

http:://some-cdn.example.com/library.js

So how could I use that library methods on my React component?

I need it to be declared inside the Component, otherwise it wont find the name of the function.

by the way, I cant download the file locally because the library is being updated constantly, so I need to import from an external url.

EDIT:

The code of the library is like this:

// http:://some-cdn.example.com/library.js

var TICautocapture = (function(){
  var lib = {...}
  var error_handler;
  var handleError = (error_code, error_callback) => {...}
  function autocapture(container, options){...}

  return autocapture;
})();

if(window.jQuery){
  (function($){
    $.fn.autocapture = function(options){
      TICautocapture(this.attr('id'), options);
    }
  }(jQuery));
}    

And from there I need to use the TICautocapture() method.

Answer 1

Your file is loading var TICautocapture into the global scope and also setting a property autocapture on window.jQuery.fn .

I am not confident that this is correct, but I would try using Webpack externals by putting the following in your webpack.config.js

module.exports = {
  // ...
  externalsType: 'script',
  externals: {
    autocapture: [
      'http://some-cdn.example.com/library.js',
      'autocapture', // or maybe 'TICautocapture'?
      'TICautocapture',
    ],
  },
};

And then try importing it in your component file:

import {TICautocapture} from "autocapture";

Answer 2

If it's just a file you have in the project, you can simply import it to where you need like so:

// if it's the default export
import TICautocapture from "./file.js"; 

or

// if it's NOT the default export and other 
// functions and variables could be imported from that file
import { TICautocapture } from "./file.js"; 

Of course, in the cases I mentioned, you should make sure they're exported in the files they're exported using export or export default .

If the file is being delivered by a CDN, I'm not really sure but I think just by adding it the the root HTML file will make it available everywhere for you.