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

【问题标题】：How to import an external library into a ReactJS Application (Locally)如何将外部库导入 ReactJS 应用程序（本地）
【发布时间】：2019-12-30 14:25:26
【问题描述】：

我有一个 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 文件。

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

【问题讨论】：

从CDN下载文件，放入public文件夹并链接到index.html
@ChrisG 您应该写下您的评论作为答案，这样我才能接受。这是最简单的但解决了它。

标签： javascript reactjs webpack materialize

【解决方案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/

【讨论】：

那我该如何在我的项目中导入呢？还是自动完成？
只需在组件开头添加import 'materialize-css'
我已经用 CSS 文件完成了它，它的工作，甚至只是下载和复制文件。我的问题是 .JS 文件。
@ChrisG 问题中的评论解决了我的问题，但我会看看 material-ui，这似乎很有趣。由于我的项目刚开始，我可以做出改变。
materialize 没有模块版本；它可以安装但不能导入到 webpack 项目中。所以好的实践与否，很大程度上取决于包是否是一个实际的 ES6 模块。安装它一般都很好，但是 OP 必须将文件从 dist 移动到 public 无论如何，那有什么意义呢？

【解决方案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';

【讨论】：

CSS 文件没问题，我的问题是 .JS 文件。
js文件应该包含，只要添加：import M from 'materialize-css'

【解决方案3】：

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

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

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

我知道这不是最优雅的解决方案，但如果你赶时间，它可能会起作用，否则你需要看看如何在不接触其代码的情况下将项目包含在 webpack 中。

【讨论】：