如何將外部庫導入 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 中而不觸及其代碼。