用于src外部文件的符号链接node_modules [英] Symlink node_modules for files outside src

问题描述

在我的项目中，我使用JSON文件作为数据库(当前存储在计算机的本地文件中).它由Node.js修改，并且一些信息在导入中由React呈现:import Data from 'myPath/appData.json'; 我的数据库无法放在src文件夹中，因为构建是静态的，并且数据库必须是动态的. 我收到此错误:

In my project I use a JSON file as a database (which is currently stored in local on my computer). It is modified by Node.js and some pieces of information are rendered with React in an import : import Data from 'myPath/appData.json'; I cannot have my database in the src folder because the build is static, and my databse must be dynamic. I get this error :

Failed to compile.
./src/components/Ligne1.jsx
Module not found: You attempted to import myPath/appData.json which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/.

我现在正在询问您如何添加符号链接的帮助.我在node_modules中使用以下命令创建了文件夹"appData":

I am now asking your help on how to add the symlink. I created the folder "appData" in node_modules with :

const fs=require('fs');
fs.symlink('.src/','.node_modules/app/',e=>{});
import Data from 'myPath/appData.json';

并在我的组件中使用它，例如:

And using it in my component like :

import Data from 'appData';

但我也收到错误消息:

Failed to compile.
export 'default' (imported as 'Data') was not found in 'appData'

我正在寻找一种解决方案，以忽略对src文件夹外部导入的限制(符号链接或其他:我已经尝试过更改webpack的配置，但没有做任何更改)或另一种解决方案来获取信息从我的JSON文件(当前存储在我的计算机本地)中.

I'm looking for a solution to ignore the restriction of the import outside src folder (symlink or something else : I already tried to change the configs of webpack but it didn't change anything) or another solution to get the information from my JSON file (which is currently stored in local on my computer).

谢谢您的时间.

推荐答案

此限制可确保所有文件或模块(导出)都位于src/目录中，实现位于./node_modules/react-dev-utils/ModuleScopePlugin.js中，并包含以下代码行. /p>

This restriction makes sure all files or modules (exports) are inside src/ directory, the implementation is in ./node_modules/react-dev-utils/ModuleScopePlugin.js, in following lines of code.

// Resolve the issuer from our appSrc and make sure it's one of our files
// Maybe an indexOf === 0 would be better?
     const relative = path.relative(appSrc, request.context.issuer);
// If it's not in src/ or a subdirectory, not our request!
     if (relative.startsWith('../') || relative.startsWith('..\\')) {
        return callback();
      }

您可以通过以下方式取消此限制

You can remove this restriction by

1. 要么更改这段代码(不推荐)
2. 或执行eject ，然后从目录中删除ModuleScopePlugin.js.
3. 或评论/从./node_modules/react-scripts/config/webpack.config.dev.js删除const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');

1. either changing this piece of code (not recommended)
2. or do eject then remove ModuleScopePlugin.js from the directory.
3. or comment/remove const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin'); from ./node_modules/react-scripts/config/webpack.config.dev.js

PS:谨防弹出的后果.

PS: beware of the consequences of eject.

这篇关于用于src外部文件的符号链接node_modules的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！