发表新帖
发表新帖

Bundle external JavaScript(from a cdn) into a React component

前端 未结
关注
4 536
北恋
北恋 2021-02-05 21:08

What options are there to bundle an external javascript sdk into a React Component?

I have tried including the javascript in the index.html and referring to it through

相关标签:
4条回答
  • 后悔当初
    2021-02-05 21:47

    try something like this:

    componentDidMount () {
   const script = document.createElement("script");    

   script.src = "https://cdnjs.cloudflare.com/somelibrary1.min.js";
   script.async = true;

   document.body.appendChild(script2);
 }
    0 讨论(0)
  • 不思量自难忘°
    2021-02-05 21:53

    If you want the script to be bundled in the build, you have 2 options:

    1. If the external file is a module, I would approach it as follows:

    1. Download the external JS file and save it somewhere in the project. For example, save it to /utils folder.
    2. Just reference it and use it in the components: import { test } from '/utils/external'

    2. If it's not a module:

    1. The same as above - save the file to your project.
    2. The difference is that you have to configure your module bundler to export the globals. This process is called Shimming and here's how to do it with Webpack.
    3. The same as step 2 - import { test } from '/utils/external'

    * In both scenarios I assume it's a standalone external file, not being hosted somewhere as a package (npm / bower / etc.). If it's a package, instead of downloading it manually, you should use a package manager.

    If you want to load it async (but not bundled):

    Follow the @Paras answer, where he suggests for using a library for script async lazy loading.

    0 讨论(0)
  • 盖世英雄少女心
    2021-02-05 22:09

    To load external scripts from a CDN, a good option is to use the react-async-script-loader library. Not only can it load external JS files asynchronously, but it also loads on demand, i.e., lazy loading and supports both parallel and sequential loading.

    It allows you to decorate your component using an HOC like so:

    export default scriptLoader(
  [
    'https://cdnjs.cloudflare.com/somelibrary1.min.js',
    'https://cdnjs.cloudflare.com/somelibrary2.min.js'
  ]
)(YourComponent)
    0 讨论(0)
  • 遥遥无期
    2021-02-05 22:13

    Actually you should know about the entire approach then see the codes.

    You must make a separate folder for your alternative cdn JavaScript files which they are out of files that webpack build them. Then paste these files into this folder and after all import them as externals into webpack configuration.

    Then config them as vendor files, and absolutely output file name should make dynamically, so the webpack build its bundle and then copy your JavaScript files into dist folder. follow below:

    // webpack.configuration.js
~~~
module.exports = {
    ~~~
    externals: {
        cdnFileOne: `${srcRoot}/outFiles/cdnFile1.js`,
        cdnFileTwo: `${srcRoot}/outFiles/cdnFile2.js`,
    },
    ~~~
};

    Sounds good, now you have external names for JavaScript files and import it into webpack configuration as a externals config.

    Now you should put them in entry to import them as separate files:

    // webpack.configuration.js
~~~
module.exports = {
    ~~~
    entry: {
        cdnFiles: ['cdnFileOne', 'cdnFileTwo'], <-- cdn files
        app: `${srcRoot}/app/index.js`, // <-- its your own codes
    },
    output: {
        path: '/dist',
        filename: '[name].js' // <== dynamically make your JavaScript files,
                              //      so, in dist folder you can see app.js and
                              //      cdnFiles.js file
    }
    ~~~
};

    Surly, you must add bundles to your HTML template:

      ~~~
  res.status(200).send(`
    <!doctype html>
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        ${styles}
        ${title}
      </head>
      <body>
        <div id="root">${ssrHTML}</div>
        <script src="app.js" defer></script>
        <script src="cdnFiles.js" defer></script>
      </body>
    </html>
 `);
~~~
    0 讨论(0)
 看不清?
提交回复
热议问题