我使用create-react-app创建了一个项目。前端在./src文件夹内描述。我有一个以server.js项目根目录命名的文件。此文件使用express描述 API 。
我想要一个文件夹，其中包含将在前端（下./src）和后端（下）之间共享的模型./server.js。
我想分享的其中一个课程的示例：
export default class DataModel {
constructor(name) {
this.name = name;
}
}
如果我把这个类放在 下./src/models/DataModel.js，我可以./src通过 using在里面使用它，import DataModel from '../models/DataModel';但我不能在里面使用它，./server.js因为它给了我以下错误：
意外的令牌导出
而且我不能将类直接放在我的项目的根目录下，因为 create-react-app 不接受从./src文件夹外部导入，并且会给我以下错误：
未找到module：您试图导入位于项目 src/ 目录之外的 ../../DataModel。不支持 src/ 之外的相对导入。
更新
我尝试使用react-app-rewired但没有成功。
我的 package.json 已更新：
{
//...
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
"devDependencies": {
"react-app-rewired": "^2.1.0"
}
}
我config-overrides.js在项目的根目录中添加了该文件（与 package.json 和我的 DataModel 类相同）。
/* config-overrides.js */
module.exports = function override(config, env) {
delete config.resolve.plugins.ModuleScopePlugin;
return config;
}
但我仍然有同样的问题：
未找到module：您试图导入位于项目 src/ 目录之外的 ../../DataModel。不支持 src/ 之外的相对导入。
更新 #2
我记录了config通过override函数传递的信息，这是我得到的：
{
"mode": "development",
"devtool": "cheap-module-source-map",
"entry": [
"C:\\Users\\me\\Documents\\nodejs\\MY_PROJECT\\node_modules\\react-dev-utils\\webpackHotDevClient.js",
"C:\\Users\\me\\Documents\\nodejs\\MY_PROJECT\\src\\index.js"
],
"output": {
"pathinfo": true,
"filename": "static/js/bundle.js",
"chunkFilename": "static/js/[name].chunk.js",
"publicPath": "/"
},
"optimization": {
"splitChunks": {
"chunks": "all",
"name": false
},
"runtimeChunk": true
},
"resolve": {
"modules": [
"node_modules"
],
"extensions": [
".web.mjs",
".mjs",
".web.js",
".js",
".json",
".web.jsx",
".jsx"
],
"alias": {
"react-native": "react-native-web"
},
"plugins": [
{
"topLevelLoader": {}
},
{
"appSrcs": [
"C:\\Users\\me\\Documents\\nodejs\\MY_PROJECT\\src"
],
"allowedFiles": {}
}
]
},
"resolveLoader": {
"plugins": [
{}
]
},
"module": {
"strictExportPresence": true,
"rules": [
{
"parser": {
"requireEnsure": false
}
},
{
"test": {},
"enforce": "pre",
"use": [
{
"options": {
"formatter": "C:\\Users\\me\\Documents\\nodejs\\MY_PROJECT\\node_modules\\react-dev-utils\\eslintFormatter.js",
"eslintPath": "C:\\Users\\me\\Documents\\nodejs\\MY_PROJECT\\node_modules\\eslint\\lib\\api.js",
"baseConfig": {
"extends": [
"C:\\Users\\me\\Documents\\nodejs\\MY_PROJECT\\node_modules\\eslint-config-react-app\\index.js"
],
"settings": {
"react": {
"version": "999.999.999"
}
}
},
"ignore": false,
"useEslintrc": false
},
"loader": "C:\\Users\\me\\Documents\\nodejs\\MY_PROJECT\\node_modules\\eslint-loader\\index.js"
}
],
"include": "C:\\Users\\me\\Documents\\nodejs\\MY_PROJECT\\src"
},
{
"oneOf": [
{
"test": [
{},
{},
{},
{}
],
"loader": "C:\\Users\\me\\Documents\\nodejs\\MY_PROJECT\\node_modules\\url-loader\\dist\\cjs.js",
"options": {
"limit": 10000,
"name": "static/media/[name].[hash:8].[ext]"
}
},
{
"test": {},
"include": "C:\\Users\\me\\Documents\\nodejs\\MY_PROJECT\\src",
"loader": "C:\\Users\\me\\Documents\\nodejs\\MY_PROJECT\\node_modules\\babel-loader\\lib\\index.js",
"options": {
"customize": "C:\\Users\\me\\Documents\\nodejs\\MY_PROJECT\\node_modules\\babel-preset-react-app\\webpack-overrides.js",
"babelrc": false,
"configFile": false,
"presets": [
"C:\\Users\\me\\Documents\\nodejs\\MY_PROJECT\\node_modules\\babel-preset-react-app\\index.js"
],
"cacheIdentifier": "development:babel-plugin-named-asset-import@0.2.3:babel-preset-react-app@6.1.0:react-dev-utils@6.1.1:react-scripts@2.1.1",
"plugins": [
[
"C:\\Users\\me\\Documents\\nodejs\\MY_PROJECT\\node_modules\\babel-plugin-named-asset-import\\index.js",
{
"loaderMap": {
"svg": {
"ReactComponent": "@svgr/webpack?-prettier,-svgo![path]"
}
}
}
]
],
"cacheDirectory": true,
"cacheCompression": false
}
},
{
"test": {},
"exclude": {},
"loader": "C:\\Users\\me\\Documents\\nodejs\\MY_PROJECT\\node_modules\\babel-loader\\lib\\index.js",
"options": {
"babelrc": false,
"configFile": false,
"compact": false,
"presets": [
[
"C:\\Users\\me\\Documents\\nodejs\\MY_PROJECT\\node_modules\\babel-preset-react-app\\dependencies.js",
{
"helpers": true
}
]
],
"cacheDirectory": true,
"cacheCompression": false,
"cacheIdentifier": "development:babel-plugin-named-asset-import@0.2.3:babel-preset-react-app@6.1.0:react-dev-utils@6.1.1:react-scripts@2.1.1",
"sourceMaps": false
}
},
{
"test": {},
"exclude": {},
"use": [
"C:\\Users\\me\\Documents\\nodejs\\MY_PROJECT\\node_modules\\style-loader\\index.js",
{
"loader": "C:\\Users\\me\\Documents\\nodejs\\MY_PROJECT\\node_modules\\css-loader\\index.js",
"options": {
"importLoaders": 1
}
},
{
"loader": "C:\\Users\\me\\Documents\\nodejs\\MY_PROJECT\\node_modules\\postcss-loader\\src\\index.js",
"options": {
"ident": "postcss"
}
}
]
},
{
"test": {},
"use": [
"C:\\Users\\me\\Documents\\nodejs\\MY_PROJECT\\node_modules\\style-loader\\index.js",
{
"loader": "C:\\Users\\me\\Documents\\nodejs\\MY_PROJECT\\node_modules\\css-loader\\index.js",
"options": {
"importLoaders": 1,
"modules": true
}
},
{
"loader": "C:\\Users\\me\\Documents\\nodejs\\MY_PROJECT\\node_modules\\postcss-loader\\src\\index.js",
"options": {
"ident": "postcss"
}
}
]
},
{
"test": {},
"exclude": {},
"use": [
"C:\\Users\\me\\Documents\\nodejs\\MY_PROJECT\\node_modules\\style-loader\\index.js",
{
"loader": "C:\\Users\\me\\Documents\\nodejs\\MY_PROJECT\\node_modules\\css-loader\\index.js",
"options": {
"importLoaders": 2
}
},
{
"loader": "C:\\Users\\me\\Documents\\nodejs\\MY_PROJECT\\node_modules\\postcss-loader\\src\\index.js",
"options": {
"ident": "postcss"
}
},
"C:\\Users\\me\\Documents\\nodejs\\MY_PROJECT\\node_modules\\sass-loader\\lib\\loader.js"
]
},
{
"test": {},
"use": [
"C:\\Users\\me\\Documents\\nodejs\\MY_PROJECT\\node_modules\\style-loader\\index.js",
{
"loader": "C:\\Users\\me\\Documents\\nodejs\\MY_PROJECT\\node_modules\\css-loader\\index.js",
"options": {
"importLoaders": 2,
"modules": true
}
},
{
"loader": "C:\\Users\\me\\Documents\\nodejs\\MY_PROJECT\\node_modules\\postcss-loader\\src\\index.js",
"options": {
"ident": "postcss"
}
},
"C:\\Users\\me\\Documents\\nodejs\\MY_PROJECT\\node_modules\\sass-loader\\lib\\loader.js"
]
},
{
"exclude": [
{},
{},
{}
],
"loader": "C:\\Users\\me\\Documents\\nodejs\\MY_PROJECT\\node_modules\\file-loader\\dist\\cjs.js",
"options": {
"name": "static/media/[name].[hash:8].[ext]"
}
}
]
}
]
},
"plugins": [
{
"options": {
"template": "C:\\Users\\me\\Documents\\nodejs\\MY_PROJECT\\public\\index.html",
"templateContent": false,
"filename": "index.html",
"hash": false,
"inject": true,
"compile": true,
"favicon": false,
"minify": false,
"cache": true,
"showErrors": true,
"chunks": "all",
"excludeChunks": [],
"chunksSortMode": "auto",
"meta": {},
"title": "Webpack App",
"xhtml": false
},
"version": 4
},
{
"replacements": {
"NODE_ENV": "development",
"PUBLIC_URL": "",
"REACT_APP_DEFAULT_LANGUAGE": "fr"
}
},
{
"appPath": "C:\\Users\\me\\Documents\\nodejs\\MY_PROJECT"
},
{
"definitions": {
"process.env": {
"NODE_ENV": "\"development\"",
"PUBLIC_URL": "\"\"",
"REACT_APP_DEFAULT_LANGUAGE": "\"fr\""
}
}
},
{
"options": {},
"fullBuildTimeout": 200,
"requestTimeout": 10000
},
{
"options": {},
"pathCache": {},
"fsOperations": 0,
"primed": false
},
{
"nodeModulesPath": "C:\\Users\\me\\Documents\\nodejs\\MY_PROJECT\\node_modules"
},
{
"options": {
"resourceRegExp": {},
"contextRegExp": {}
}
},
{
"opts": {
"publicPath": "/",
"basePath": "",
"fileName": "asset-manifest.json",
"transformExtensions": {},
"writeToFileEmit": false,
"seed": null,
"filter": null,
"map": null,
"generate": null,
"sort": null
}
}
],
"node": {
"dgram": "empty",
"fs": "empty",
"net": "empty",
"tls": "empty",
"child_process": "empty"
},
"performance": false
}
我在调用delete操作之前记录它，我们可以看到它们是 no ModuleScopePlugin。那么为什么它仍然失败呢？
欢迎任何帮助。
谢谢。