如何将外部库导入 ReactJS 应用程序（本地）

Question

我有一个 ReactJS 应用程序，我通过 react-materialize 使用 MaterializeCSS。 我已经安装了 react-materialized 并在我的 index.html 文件中添加了对 MaterializeCSS 文件的引用，如下所示：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
(...)
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

它工作正常，但我将在没有互联网的地方度过 10 天，我想在那里开发我的项目，因此 CDN 托管文件将无法工作。 所以我试图在我自己的项目中托管物化文件。

我已经成功地使用 css 文件做到了这一点，将其复制到我的项目结构中的一个文件夹中并导入到 App.js 中：

import './resources/materialize/css/materialize.css';

但是当我尝试对 .js 文件做同样的事情时，我得到了很多错误，因为它试图转译 materialize.js 文件。

我应该把这个文件放在哪里，我如何从我的项目中引用它？

Answer 1

您可以使用 Windows 命令提示符通过 npm 安装它，只需开始 > 运行 > cmd，通过cd <foldername>找到您的项目文件夹并键入以下内容：

npm install --save materialize-css@next

并在您的Index.js : - 位于您的应用程序的根文件夹中

import 'materialize-css';
import 'materialize-css/dist/css/materialize.min.css';

我也强烈推荐使用 React 应用程序非常方便的 Material UI： https : //material-ui.com/

Answer 2

你可以跑

npm install --save materialize-css@next

然后你可以在 index.js 文件中添加以下导入：

import 'materialize-css'; //This adds the Js file
import 'materialize-css/dist/css/materialize.min.css';

Answer 3

为了避免潜在的复杂 webpack 设置，一个更简单的解决方案是从他们的网站临时下载实际文件：

https://materializecss.com/getting-started.html

只需将他们的文件放在您的 js 文件夹中并通过脚本标记引用它，正如它们在“设置 - 项目结构”部分中显示的那样。

我知道这不是最优雅的解决方案，但如果您匆忙，它可能会起作用，否则您需要查看如何将项目包含在 webpack 中而不触及其代码。