从index.html（create-react-app）引用node_modules中的参考文件夹

Question

我有一个使用React的项目，所以我使用了create-react-app CLI工具获取脚手架。

我使用npm安装了UIKit，所以它在我的node_modules文件夹中，但是我似乎无法正确地从public文件夹下的index.html引用它。node_modules和public都在根目录中，因此由于index.html在public文件夹中，我会向上到父目录，然后进入node_modules，像这样：

<script src="../node_modules/uikit/dist/js/uikit-icons.min.js"></script>

但是……找不到对uikit图标的引用。在node_modules之后的路径是正确的，所以那不是问题所在。我该怎么解决？

- user7699223

---

希望您使用 yarn start 启动项目，如果是这种情况，只需提供路径，如下所示 <script src="node_modules/uikit/dist/js/uikit-icons.min.js"></script>。 - Panther

使用React时，您需要有所思考，不应像使用Vanilla JS或jQuery那样仅包含脚本，而应在JSX或TSX文件中使用软件包提供的组件，例如https://www.npmjs.com/package/uikit-react。 CRA（技术上是webpack）处理打包第三方库并确保在发布时可用。不幸的是，uikit-react似乎没有得到支持，但仍可能满足您的需求。在搜索React中的第三方UI库时，请确保找到专门设计用于与React一起使用的库。 - steffeydev

Answer 1

CRA的方式非常不同。 create-react-app 在幕后使用Webpack，它是一个工具，可以将您的代码捆绑成几个文件，并将其自动插入到public/index.html中，然后将其放入dist文件夹。由于您想要使用UIKit，您需要像这样导入JS：

import "uikit/dist/js/uikit-icons.min.js";

你没有从中导入任何内容的原因是因为该文件应该作为<script>加载，只需要import它就可以让它像那样工作。根据UIKit文档，它的行为与React等框架兼容，所以应该可以正常工作。

- shadowtime2000

Answer 2

在某些情况下可能有用的一个解决方案是设置一个postinstall npm脚本。在这里，您可以运行一个脚本，将您的js文件从node_modules文件夹复制到public文件夹中，从那时起访问它将变得轻而易举。

npm脚本示例：

"scripts": {
  "postinstall": "node ./copy-dep.js",
  ...
}

Node中的复制脚本示例：

const fs = require('fs');
const path = require('path');

fs.copyFile(
  path.join(__dirname, 'node_modules/path/to/file.js'),
  path.join(__dirname, 'public/scripts/file.js'),
  (err) => {
    if (err) throw err;
    console.log('node_modules/path/to/file.js was copied to public/scripts/file.js');
  }
);

HTML脚本标签：

<script src="./scripts/file.js"></script>

- Ashkan Pourghasem