首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么编译器在Ubuntu上运行的React应用程序中查找src文件夹而不是node_modules文件夹中的依赖包

编译器在Ubuntu上运行的React应用程序中查找src文件夹而不是node_modules文件夹中的依赖包,是因为在React应用程序的开发过程中,src文件夹是存放开发者编写的源代码的地方,而node_modules文件夹则是存放第三方依赖包的地方。

React应用程序通常使用npm或者yarn等包管理工具来管理依赖包。当我们在开发React应用程序时,我们会在项目根目录下创建一个package.json文件,其中会列出项目所需的依赖包及其版本号。当我们运行npm install或者yarn install命令时,这些依赖包会被下载并存放在node_modules文件夹中。

在编译React应用程序时,编译器需要根据源代码进行转译、打包等操作,而这些操作通常需要引用项目中的源代码文件。因此,编译器会首先查找src文件夹,以获取项目的源代码文件。而对于依赖包,编译器会根据package.json文件中的配置信息,从node_modules文件夹中引用相应的依赖包。

这种设计有以下几个优势:

  1. 代码管理:将开发者编写的源代码与第三方依赖包分开存放,便于代码的管理和维护。
  2. 可定制性:开发者可以根据自己的需求对源代码进行修改和定制,而不会影响到第三方依赖包。
  3. 依赖包管理:通过将依赖包集中存放在node_modules文件夹中,可以方便地进行版本管理和更新。

React应用程序的src文件夹中通常包含以下内容:

  1. index.js:React应用程序的入口文件,用于初始化React应用程序。
  2. App.js:React应用程序的主组件,用于定义应用程序的整体结构和逻辑。
  3. 其他组件文件:开发者编写的其他React组件文件,用于实现具体的功能模块。

腾讯云提供了一系列与云计算相关的产品,其中包括云服务器、云数据库、云存储等。具体推荐的产品和产品介绍链接地址可以参考腾讯云官方网站的相关页面。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

使用Yarn workspace,TypeScript,esbuild,React和Express构建 K8S 云原生应用(一)

要设置它们每一个,我们既可以使用 yarn init(每个文件夹),也可以手动创建文件(例如,通过 IDE)。 软件名称使用命名约定是每个软件之前都使用 @my-app/* 作为前缀。...参数 -W 允许工作空间根目录安装一个,使其 app、common 和 server 全局可用。...文件 本教程,common 软件将非常简单。首先,从添加新文件夹开始: src/ 文件夹,包含代码。...结构提醒: common/ ├─ src/ │ ├─ index.ts ├─ package.json App 依赖项 该 app 将需要以下依赖项: react react-dom 从项目的根目录运行...我们案例,我们希望有一个可以运行 Node.js 应用程序环境。 WORKDIR 设置容器的当前工作目录。 COPY 将文件或文件夹从当前本地目录(项目的根目录)复制到容器工作目录。

4.1K31

深入理解 TypeScript 模块

TypeScript 模块如何查找为什么会隐式查找到index.ts、index.js,为什么会到 node_modules 中去找模块? 如何定义一个全局变量供所有代码共享?...在前端模块实际是通过闭来实现,一个模块就是一个闭,类似下面这样: 编译前: // 1、依赖导入、变量声明 export class module { // 2、模块内部实现 } 编译后: const...,TypeScript 会优先选择 .ts 文件不是 .d.ts 文件 非相对路径 非相对模块导入,编译器则会从包含导入文件目录开始依次向上级目录遍历,尝试定位匹配声明文件。...Node 会在一个特殊文件夹node_modules查找模块。node_modules可能与当前文件同一级目录下,或者在上层目录里。...,编译器解析模块时可能访问当前文件夹文件,这会导致很难诊断模块为什么没有被解析,或解析到了错误位置。

2.5K30

包管理工具

每个依赖版本文件夹只存储一次,构成唯一来源,这样的话将会节省相当多磁盘空间。...这是通过 node_modules 层实现,使用符号链接创建一个嵌套依赖关系结构,其中文件夹每个都是到存储硬链接。 这是为什么 pnpm 会在快速和磁盘效率上有大幅提升原因。...例如,如果它有100个文件,一个新版本只在其中一个文件中有更改,pnpm update 将只向存储添加一个新文件,不是为了这个单一更改克隆整个依赖。 所有的文件都保存在磁盘上一个地方。...相当于抛弃了 node_modules 原生 node 查找依赖方式是向上级目录层层递归遍历 node_modules 文件夹,虽然,现有的包管理版本都已经做到了依赖提升,让依赖项尽量扁平化,但当碰到依赖版本不匹配时候... PnP,它记录了依赖准群硬盘位置,可以查找依赖时减少硬盘读写,同时,可以做到所有依赖项完全扁平化。

2.7K20

使用 webpack 4 和 Babel 7 构建 React 应用及如何引入 Material Design

本教程最后,将向大家展示如何在新创建应用程序添加 Material Dashboard React我们开始之前,请确保你电脑安装了 npm 和 Nodejs 最新版本。...开始处理 Webpack 配置文件之前,先在应用程序安装一些我们需要东西。 首先安装 path 作为开发环境路径依赖。...=production webpack", 4.resolve webpack 构建时候会按目录进行文件查找,resolve 属性 extensions 数组中用于配置程序可以自行补全哪些文件后缀...这里是 src 文件夹所有内容都需要在浏览器浏览。 6.plugins 在这里,我们设置了我们应用程序需要插件。...我们需要告诉我们脚本 Webpack 配置文件,使用 import 不是 require 语句。 否则它会给我们一个错误,它不知道import 表示什么。

9.3K60

JavaScript 新一代构建工具对比

无论我们开发服务器使用 webpack、Rollup 还是 Parcel,工具都会从我们源代码和 node_modules 文件夹把我们整个代码库打包在一起,通过构建过程运行这些代码,比如 Babel...Snowpack 不是从 nodemodules 文件夹中提取,而是从 Skypack 中提取npm,Skypack 是一个托管 npm 注册表CDN,它是预先优化,可以浏览器工作。... React 中保存客户端状态需要 react-refresh,它需要一些自己 Babel 作为依赖。这些不是默认包含,但可以使用更最大化React模板。...当然,它们增加了一些依赖性,包括Babel,但是,Vite中使用JSX时,Babel其实并不是必须。...es-react 是一个,它可以拉入 React ,但提供与web平台兼容导出。 这说明了 wmr 理念,即使用web平台原生基元,不是使用工具来绕开和抽象掉。

1.8K10

Webpack构建速度优化指南

'), exclude: /node_modules/, },noParse对于我们引入一些第三方,比如jQuery,在这些内部是肯定不会依赖别的,所以根本不需要webpack去解析它内部依赖关系...new webpack.IgnorePlugin({ resourceRegExp, contextRegExp });以moment为例,首先找到moment语言所在文件夹,然后webpack...使用 src 别名 @ import '@/fonts/iconfont.css'除此之外,因为一些第三方库,如react,我们安装时候,实际已经安装好了它编译好,所以我们在这里可以直接指定别名路径...resolve: { modules: [resolve('src'), 'node_modules'], },};告诉 webpack 优先 src 目录下查找需要解析文件,会大大节省查找时间...这里配置项键值是package.json文件依赖名称,value值代表是第三方依赖编译打包后生成js文件,然后js文件执行后赋值给window全局变量名称。

1.5K20

React、TypeScript、NodeJS 和 MongoDB 搭建 Todo App

终端上运行这个命令,创建一个新 NodeJS 应用程序: yarn init 它会询问几个问题,然后初始化应用程序。你可以通过向命令添加 -y 标志来跳过。...dist/js 文件夹 rootDir: 告诉 TypeScript 编译 src 文件夹每个 .ts 文件 include: 告诉编译器包含 src 目录和子目录文件 exclude:...在编译时会排除数组文件或文件夹 现在我们安装依赖项,使项目可以使用 TypeScript。...yarn add express cors mongoose 我们还需要安装它们类型作为开发依赖项,帮助 TypeScript 编译器理解这些。...现在,如果你打开服务器端应用程序文件夹(并在终端执行以下命令): yarn start 客户端也如此: yarn start 你应该能看到我们 Todo 应用程序会按预期工作。 太棒了!

17K30

关于Webpack前端工程化构建,你必须要掌握这些核心知识点

React中使用是ES6语法,一些主流浏览器还不支持ES6,所有需要对Webpack进行配置后,React才能正常运行。...1.2、什么是Webpack 官方解释: 本质,webpack 是一个现代JavaScript 应用程序静态模块打包器(module bundler)。...默认是本地模式安装,本地模式是指在执行npm install命令后,会在执行命令目录下创建node_modules目录,然后再把下载依赖和安装保存到node_modules目录下。...全局模式是指将下载依赖和安装保存到全局路径下方式,Node.js中使用require依赖时,会优先查找自己当前文件node_modules目录,如果没有,循环遍历上层node_modules...可以通过以下命令来设置默认下载全局路径目录: 输入命令,查看当前配置 npm config ls 运行结果: 如果是第一次使用NPM安装的话,配置只会看到prefix选项,就是NPM默认全局安装目录

1.7K60

Webpack构建速度优化

'), exclude: /node_modules/, },noParse对于我们引入一些第三方,比如jQuery,在这些内部是肯定不会依赖别的,所以根本不需要webpack去解析它内部依赖关系...new webpack.IgnorePlugin({ resourceRegExp, contextRegExp });以moment为例,首先找到moment语言所在文件夹,然后webpack...使用 src 别名 @ import '@/fonts/iconfont.css'除此之外,因为一些第三方库,如react,我们安装时候,实际已经安装好了它编译好,所以我们在这里可以直接指定别名路径...resolve: { modules: [resolve('src'), 'node_modules'], },};告诉 webpack 优先 src 目录下查找需要解析文件,会大大节省查找时间...这里配置项键值是package.json文件依赖名称,value值代表是第三方依赖编译打包后生成js文件,然后js文件执行后赋值给window全局变量名称。

1.6K10

入门webpack最佳实践(基于webpack4.X 5.X)--打包速度优化

'), exclude: /node_modules/, }, noParse 对于我们引入一些第三方,比如jQuery,在这些内部是肯定不会依赖别的,所以根本不需要webpack去解析它内部依赖关系...new webpack.IgnorePlugin({ resourceRegExp, contextRegExp }); 以moment为例,首先找到moment语言所在文件夹,然后webpack...' // 使用 src 别名 @ import '@/fonts/iconfont.css' 除此之外,因为一些第三方库,如react,我们安装时候,实际已经安装好了它编译好,所以我们在这里可以直接指定别名路径...resolve: { modules: [resolve('src'), 'node_modules'], }, }; 告诉 webpack 优先 src 目录下查找需要解析文件,会大大节省查找时间...}, 注意 这里配置项键值是package.json文件依赖名称,value值代表是第三方依赖编译打包后生成js文件,然后js文件执行后赋值给window全局变量名称。

98930

入门webpack最佳实践(基于webpack4.X 5.X)--打包速度优化

'), exclude: /node_modules/, },noParse对于我们引入一些第三方,比如jQuery,在这些内部是肯定不会依赖别的,所以根本不需要webpack去解析它内部依赖关系...以moment为例,首先找到moment语言所在文件夹,然后webpack配置文件添加插件new webpack.IgnorePlugin(/....使用 src 别名 @ import '@/fonts/iconfont.css'除此之外,因为一些第三方库,如react,我们安装时候,实际已经安装好了它编译好,所以我们在这里可以直接指定别名路径...resolve: { modules: [resolve('src'), 'node_modules'], },};告诉 webpack 优先 src 目录下查找需要解析文件,会大大节省查找时间...这里配置项键值是package.json文件依赖名称,value值代表是第三方依赖编译打包后生成js文件,然后js文件执行后赋值给window全局变量名称。

1K20

React 应用架构实战 0x1:初始化项目和项目结构概览

# Next.js Next.js 是一个建立 React 和 Node.js 之上 Web 框架,支持构建 Web 应用程序。由于它可以服务端运行,因此可以用作全栈框架。...: .next:包含通过运行 Next.js build 命令生成可以应用于生产环境应用程序文件 public:包含应用程序静态资源,如图像、字体等 src/pages 所有在此定义页面都可以相应路由处使用...通过基于文件路由机制实现 页面文件夹也可以位于项目的根目录,但将所有内容保存在 src 文件夹更好 src/pages/_app.tsx 导出一个 React 组件,每个页面都包装在该组件渲染...# 按领域/功能拆分 为了以最简单和可维护方式扩展应用程序,可以将大部分应用程序代码放在 features 文件夹,该文件夹应包含不同基于功能内容。每个功能文件夹应包含给定功能特定领域代码。...这样我们可以将功能限定在一个特定功能范围内,不是将其声明与共享内容混合在一起。这比具有许多文件扁平文件夹结构容易维护得多。

1.1K10

一种未曾设想前端项目依赖管理道路

而这些工具依赖,只是开发和构建过程中使用,甚至是不同阶段才会使用,比如很多单元测试,其实是在线上 CI 过程才会跑,但是却都会一股脑儿装进 node_modules 文件夹里,和业务依赖搅在一起...关于 Lock 我要再说两句,Lock 初衷是好,希望能够通过 Lock 文件解决依赖版本不一致问题,但是大家使用过程,想必都遇到过 npm install 新时候,和 Lock 文件冲突情况...由于工具依赖已经拆离出去了,剩下都是业务依赖,本来就是要构建到最终产品,我们需要保证各个环境强一致性,同时拆离了工具依赖 node_modules 大小也会降到一个合理水平,纳入到 git...gitignore 接着,我们 .gitignore 文件,排除掉安装 devDependency 依赖 node_modules安装 dependency 依赖 node_modules...依赖路径查找方式,最初设计时,更多是在为了使用 node.js 进行服务端编程服务,其使用 dependency 和 devDependency 依赖安装方式,也并不是专门为了前端工程化来设计

55320

新一代构建工具比较

Snowpack 没有从 node _ modules 文件夹下拉 npm ,而是从 Skypack 下拉 npm ,这是一个包含 npm 注册表 CDN,它经过了预先优化,可以浏览器工作。...当然,他们添加了更多依赖项,包括 Babel ,但是,当在 Vite 中使用 JSX 时,Babel 实际不是必需。...使用 React with wmr 不是 Preact,目前有两个步骤。...Es-React 是一个软件,可以引入 React,但是提供与 web 平台兼容输出。 这说明了先生使用 web 平台原语哲学,不是使用工具来回避和抽象它。...因此,如果我们公用文件夹中有一张狗照片,我们可以将其包含在 Preact 组件,如下所示: function Dog() { return <img src={new URL('.

2.3K20

前端食堂技术周刊

18 Release Candidate 您 node_modules 文件夹到底发生了什么?...What's New In DevTools (Chrome 100)[4] Chrome 第 100 个版本如约至,Chrome DevTools 添加了如下功能: Styles 样式窗格查看和编辑...下面我们来看下技术资料: 技术资料 您 node_modules 文件夹到底发生了什么?[6] 众所周知,node_modules 文件夹是宇宙中最重对象之一。...大多数项目里 90% 代码都来自开源,大部分我们都没有读过,它们运行在我们笔记本电脑和服务器,并且具备所有的权限。系统还能正常运行可以称为奇迹了。...The Story of React(视频)[8] React 首次发布时,它并没有得到很好反馈,大家都不是很接受,因为 React 与之前大家会技术栈完全不同。

75920

webpack教程:如何从头开始设置 webpack 5

如果你们不习惯从头开始设置 webpack 来使用Babel、TypeScript、Sass、React或Vue,或者不知道为什么要使用 webpack,那么这篇文章是你最佳选择。...package.json,我们可以创建一个运行webpack命令构建脚本。...安装一下: npm i -D html-webpack-plugin src文件夹创建一个template.html文件,这里,我们自定义一个title,内容如下: src/template.html...我想使用这三种方法——Sass编写,PostCSS处理,以及编译到CSS。这需要引入一些加载器和依赖项。...为此可以为 webpack 设置两种配置: 生产配置,用于最小化,优化和删除所有源映射 开发配置,该配置服务器运行webpack,每次更改都会更新,并具有源映射 开发模式下是在内存运行所有内容,不是构建一个

2.2K10

webpack 4.x 初级学习记录

webpack 处理应用程序时,它会在内部创建一个依赖图(dependency graph),用于映射到项目需要每个模块,然后将所有这些依赖生成到一个或多个bundle。...基本,整个应用程序结构,都会被编译到你指定输出路径文件夹。...本质,webpack loader 将所有类型文件,转换为应用程序依赖图(和最终 bundle)可以直接引用模块。...这告诉 webpack 编译器(compiler) 如下信息: “嘿,webpack 编译器,当你碰到「 require()/import 语句中被解析为 '.txt' 路径」时,在你对它打包之前...你也可以一个配置文件因为不同目的多次使用同一个插件,这时需要通过使用 new 操作符来创建它一个实例。

69730

React TS3 专题」从创建第一个 React TypeScript3 项目开始

1、创建文件夹 首先我们手动创建一个文件夹manually,然后manually下创建src源文件文件夹和发布环境用dist文件夹 mkdir manually cd manually mkdir...="bundle.js"> 我们React应用程序内容将会注入到id=rootdiv,所有的JS内容都会编译成一个bundle.js,存在dist...文件夹。...11、创建启动和构建脚本 11.1 、启动应用程序 接下来我们使用npm命令启动我们应用程序,一个用于开发模式,一个用于生产打包模式,你可以修改 package.json scripts 属性对应内容部分...11.5、修改 index.tsx 文件 接下来应用程序仍然在运行情况下,修改 index.tsx 文件内容: const App: React.FC = () => { return <

2.2K10

模块解析机制_TypeScript笔记14

写在前面 模块化机制让我们能够把代码拆分成多个模块(文件),编译时需要知道依赖模块的确切类型,那么首先要找到它(建立模块名到模块文件路径映射) 实际 TypeScript 里,一个模块名可能对应一个...运行模块解析机制,以便在编译时找到模块定义文件 具体,会把 TypeScript 源文件后缀名加到 NodeJS 模块解析逻辑,还会通过package.jsontypes字段来查找声明文件...因此,在运行时模块可能具有不同于源文件命名,或者编译时最后输出模块路径与对应源文件不匹配 针对这些问题,TypeScript 提供了一系列标记用来告知编译器期望发生在源路径转换,以生成最终输出..."generated/templates/views" ] } } 此后只要遇到指向rootDirs子目录相对模块引入,都会尝试rootDirs每一项查找 实际,rootDirs非常灵活...编译器开始之前会尝试解析所有模块引入,每成功解析一个模块引入,就把对应文件添加到将要处理源文件集里 --noResolve编译选项能够禁止编译器添加任何文件(通过命令行传入除外),此时仍会尝试解析模块对应文件

1.7K30

现代前端工程化-基于 Monorepo lerna 模块(从原理到实战)

翻译:Lerna是一个用来优化托管 git\npm 多 package 代码库工作流一个管理工具,可以让你在主项目下管理多个子项目,从而解决了多个互相依赖,且发布时需要手动维护多个问题。...lerna create 安装所有·依赖项并连接所有的交叉依赖 lerna bootstrap 增加模块到最外层公共 node_modules lerna add axios.../node_modules 显示所有的安装 lerna list // 等同于 lerna ls 这里再提一个命令也比较常用,可以通过json方式查看 lerna 安装了哪些,json 还包括路径...,有时候可以用于查找是否生效。...lerna list --json 从所有删除 node_modules 目录 lerna clean ⚠️注意下 lerna clean 不会删除项目最外层node_modules 在当前项目中发布

3.8K50
领券