目标
- 我想显示一些代码以供项目本身参考。
- 我希望代码的显示随实现一起更新。
- 我不想弹出
create-react-app
这个使用create-react-apptypescript创建的 react 项目将用于显示一些自定义组件，以便在其他项目中重用。我的目标是让组件在使用它的代码旁边使用。
如果我无权访问 webpack 配置并且无法使用，我该如何加载文件fs.readFile？
如何将文件导入使用 create react app 作为原始文本的 react 应用程序？
IT技术
reactjs
typescript
create-react-app
2021-05-26 13:00:21
2个回答
环顾四周后，我设法使这项工作正常进行。有两个主要部分必须到位才能使其工作。
使用合适的加载器
在这种情况下，我想使用raw-loader，所以我将它安装为开发依赖项。yarn add -D raw-loader.
为了实际导入文件，我需要像这样覆盖 webpack 配置：
// eslint-disable-next-line import/no-webpack-loader-syntax
import toolbarItems from '!!raw-loader!../ToolbarItems';
这会将整个文件加载到变量 toolbarItems 中。通过!!在加载器之前使用 ，我可以防止任何其他 webpack 加载器在这种特定情况下处理它。这可能在一个普通的 javascript 项目中单独工作，但在typescript中......
您必须为typescript提供一个module
我遇到了typescript错误：
Failed to compile.
/Users/cory/Code/something/custom-theme/src/pages/NavigationDemo.tsx
TypeScript error in /Users/cory/Code/something/custom-theme/src/pages/NavigationDemo.tsx(9,26):
Cannot find module '!!raw-loader!../ToolbarItems'. TS2307
7 |
8 | // eslint-disable-next-line import/no-webpack-loader-syntax
> 9 | import toolbarItems from '!!raw-loader!../ToolbarItems';
| ^
10 |
11 | const useStyles = makeStyles({
12 | root: {
只需在一个名为的文件中为加载程序声明一个module就ToolbarItems.ts.d.ts解决了我的问题：
declare module '!raw-loader!*' {
const content: string;
export default content;
}
由于您在项目中使用 create-react-app，目前最好的解决方案是使用名为 Raw.Macro 的 babel 插件。
此插件允许您访问文件的内容，而无需创建react应用程序弹出。提供真正优雅的解决方案，无需任何样板代码，并像之前的答案一样声明“d.ts”文件。
注意：有一个小缺点，当文件改变时你必须重新启动你的 webpack 开发服务器，因为文件的内容是在构建过程中被嵌入的。
import raw from 'raw.macro';
function foo(){
const jsonContent = raw('../utils/stops.json');
console.log(jsonContent);
}