Question

我有一个试用React的项目，所以我使用create-react-app CLI获取样板。

我用npm安装了UIKit所以它在我的node_modules文件夹中，但是我似乎无法从我公共文件夹中的index.html正确引用它。 node_modules位于根目录中，与public一样，并且由于index.html位于公共文件夹中，因此我转到父目录，然后转到node_modules，如下所示：

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

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

Answer 1

在某些情况下可能有用的一种解决方案是设置 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>

Answer 2

CRA 的方式非常不同。 int inserisciStringa(int dim, char *dest) { int men = 1; int len; for (;;) { if (!fgets(dest, dim, stdin)) { printf("\nUnexpected end of file\n"); return -1; // report end of file failure to the caller. } len = strlen(dest); if (len > 0 && dest[len - 1] == '\n') dest[--len] == '\0'; // strip the trailing newline if (len < men) { printf("\nError: line too short"); } else if (len < dim - 1) { if (checkNumbers(len, dest)) return 0; printf("\nError: string has digits"); } else { printf("\nError: line too long"); svuotaBuffer(); } printf("\nTry again: "); } } 在幕后使用 Webpack，它是一个工具，可以将您的代码打包成几个文件，它会自动将它们插入到 create-react-app 中，然后将其放入 { {1}} 个文件夹。由于您想使用 UIKit，您可以像这样导入 JS：

public/index.html

您不从中导入某些内容的原因是因为该文件旨在作为 dist 加载，而只是 import "uikit/dist/js/uikit-icons.min.js"; 使其表现得如此。根据 UIKit 文档，the way it acts is compatible with frameworks like React 所以它应该可以正常工作。

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

2 个答案: