我正在开发一个nx monorepo,它有几个库和2个应用程序。
##文件结构
应用程序--api--漏斗(与webpack反应)--api-e2e--漏斗-e2elibs--漏斗----页面--共享的----资产--------src--------lib--------“some.tsx资产”(乐透文件)--------资产--------图像--------**/*。(png|webp|gif|svg)(所有其他资产)
##预期结果
在我的库和应用程序中,我希望这样使用资产:import imageName from '/assets/images/<some-image-folder>/<some-image-name>.<ext>';
对于所有svg、png、jpeg等。。。
对于svgs:import { ReactComponent from imageName } from '/assets/images/<some-image-folder>/<some-image-name>.svg';
##问题
我的实际问题是,当我构建漏斗应用程序时,nx运行漏斗:build--verbose
我的资产似乎已加载到缓存中,但每个资产都返回一个:找不到模块:Error: Can't resolve '/assets/images/<some-image-folder>/<some-image-name>.<ext>' from '<whatever-lib>/<main-app>'
是的,我使用/assets/images,因为我使用角函数来“服务”资产/assets/images
##我的配置是什么
#NX报告
节点:16.16.0操作系统:darwin x64 npm:9.2.0
nx:15.60@nrwl/nangular:找不到@nrwl/cypsy:15.60@nrwl/didetox:找不到@nrwl/devkit:15.6.0@nrwl/esbuild:找不着@nrwl/slint-plugin nx:15.6.0@nrwl/express:15.6.3@nrwl/jest:15.60@1nrwl/js:15.6.0@nrwlan/linter:15.60\nrwl/nest:Not Found@nrwl/intent:Not Found@nrwl/next:找不着@nrwl/node:15.6.3@nrwl/nx cloud:15.0.3@nrwla/nx plugin:找不@nrwl/react:15.60@nrwl/react native:Not Found@nrwl/rollup:Not Found@nrwl/schemicals:Not Found@nrwl/storybook:Not Found@nrwl/web:Not Found@nrwl/webpack:15.63@nrwl/workspace:15.60@nrwl/vite:Not Foundtypescript:4.8.4
#应用程序/漏斗/项目.json
我的资产是通过主应用程序导入的,因为我没有构建任何子库。这里是选择器:{ "input": "libs/shared/assets/src/assets/images", "glob": "**/*", "output": "assets/images" }
#应用程序/漏斗/webpack.config.js
由于StackOverflow错误,无法导入整个代码,但简单地说,我添加了svgr支持,文件加载器&;url加载器module: { rules: [ { test: /\.(webp|png|gif|jpe?g)$/i, loader: 'file-loader', options: { name: '[path][name].[ext]', }, }, { test: /\.svg$/, use: [ '@svgr/webpack', 'url-loader' ] } ], }, }
##解释我迄今为止所做的努力
#第一次尝试我使用角度功能在构建时导入资产,如选择器顶部配置所示。
#第二次尝试我使用复制webpack插件将静态资产复制到“/assets/”,但没有成功
#第三次尝试我添加了指向主tsconfig.base.json“@myapp/assets/”的路径:[“libs/shared/assets/src/assets/**/”]
并尝试将这些资产服务为:“@myapp/assets//”
#第4次尝试
对我的工作流程有效但未优化的解决方案是将每个资产放在其依赖项旁边。。。
这很恶心,因为我需要复制资产,这些资产可能会发生很多变化。
##请帮忙。