如果要将脚本捆绑在构建中，则有2个选项：

Question

有哪些选项可以将外部javascript SDK捆绑到React组件中？

我尝试将JavaScript包含在index.html中，并通过window.xyz对其进行引用。它运作良好，但由于未以这种方式打包javascript，因此无法进行生产构建。

有没有一种方法可以简单地将javascript文件导入React组件定义中？

PS：在这里反应新手！

Answer 1

如果要将脚本捆绑在构建中，则有2个选项：

1。如果外部文件是module，我将按以下方式处理它：

下载外部JS文件并将其保存在项目中的某个位置。例如，将其保存到/utils文件夹中。
只需引用它并在组件中使用它：import { test } from '/utils/external'

2。如果不是模块：

与上述相同-将文件保存到您的项目中。
区别在于您必须配置模块捆绑程序以导出全局变量。此过程称为 Shimming 和here's how to do it with Webpack。
与步骤2相同-import { test } from '/utils/external'

* 在两种情况下，我都假定它是一个独立的外部文件，没有作为软件包托管在某个位置（npm / bower /等）。如果是软件包，则应使用软件包管理器，而不是手动下载。

如果要异步加载（但不捆绑）：

遵循@Paras answer，在这里他建议使用库进行脚本异步延迟加载。

Answer 2

要从CDN加载外部脚本，一个不错的选择是使用react-async-script-loader库。它不仅可以异步加载外部JS文件，还可以加载on demand，即延迟加载，并支持并行和顺序加载。

它允许您像这样使用HOC装饰组件：

export default scriptLoader(
  [
    'https://cdnjs.cloudflare.com/somelibrary1.min.js',
    'https://cdnjs.cloudflare.com/somelibrary2.min.js'
  ]
)(YourComponent)

Answer 3

实际上，您应该了解整个方法，然后查看代码。

您必须为备用CDN JavaScript文件创建一个单独的文件夹，这些文件不在webpack构建它们的文件中。然后将这些文件粘贴到此文件夹中，然后将它们作为externals导入到webpack配置中。

然后将它们配置为供应商文件，并且绝对会动态生成输出文件名，因此webpack建立其捆绑包，然后将JavaScript文件复制到dist文件夹中。请按照以下步骤操作：

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

听起来不错，现在您拥有JavaScript文件的外部名称，并将其作为webpack配置导入到externals配置中。

现在，您应该将它们放入entry中，以将它们导入为单独的文件：

// 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
    }
    ~~~
};

当然，您必须将捆绑软件添加到您的HTML模板中：

  ~~~
  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>
 `);
~~~

Answer 4

尝试这样的事情：

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

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

   document.body.appendChild(script2);
 }

将外部JavaScript（来自CDN）捆绑到React组件中

4 个答案:

如果要将脚本捆绑在构建中，则有2个选项：

如果要异步加载（但不捆绑）：