文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Create-react-app不允许从node_modules导入component.js吗？

Create-react-app是一个用于快速搭建React应用的脚手架工具。它默认使用Webpack作为打包工具，并且有一些默认的配置规则。

在Create-react-app中，默认的Webpack配置会禁止从node_modules目录直接导入JavaScript文件。这是因为在React应用中，通常会使用npm或者yarn来管理依赖，而不是直接从node_modules目录中引入文件。

这样做的好处是，可以更好地管理和更新依赖，同时也可以减少打包后的文件体积。当我们在代码中导入一个来自node_modules的组件时，Create-react-app会自动将其打包到最终的构建文件中。

如果你想导入一个来自node_modules的组件，可以通过在代码中直接引用组件的名称来实现，而不需要指定完整的路径。例如：

代码语言：javascript
复制
import Component from 'component';

在这个例子中，假设你安装了一个名为"component"的React组件库，你可以直接使用import语句导入该组件，并在代码中使用它。

需要注意的是，Create-react-app默认只允许导入已经安装在node_modules目录下的组件。如果你想导入其他目录下的组件，可以通过配置Webpack的resolve.alias选项来实现。

总结起来，Create-react-app默认禁止直接从node_modules导入component.js文件，但可以通过直接引用组件名称的方式导入已安装的组件。这样做可以更好地管理和更新依赖，并减少打包后的文件体积。

腾讯云相关产品和产品介绍链接地址：

相关搜索:从css-loader启用CSS模块不允许导入node_modules CSS从node_modules导入多个类角度。如何从node_modules导入cssSnowpack无法从node_modules导入JavaScriptSapper:如何从node_modules导入CSS？从node_modules导入时不显示图标StencilJS -如何从node_modules导入css/sass？如何从node_modules导入本地依赖项如何使用webpack 2从node_modules导入css如何在react中从node_modules导入CSS？在create-react-app中从src本身导入模块Webpack不会从node_modules导入捆绑包(仅限js)强制idea从node_modules使用漂亮的typescript导入无法从全局node_modules文件夹导入typescript模块汇总插件postcss不注入从node_modules导入的cssmoduleNameMapper可以忽略node_modules中的模块所做的导入吗？内置的WooCommerce导入器不允许我从CSV文件导入产品如何将图像从JSON数据导入到create-react-app我无法从node_modules导入theme.scss中的css文件无法使用jest测试从node_modules内部导入SCSS的Svelte组件
相关搜索:
页面内容是否对你有帮助？
有帮助
没帮助

相关·内容

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

一、使用 create-react-app 构建 1、全局安装 create-react-app 使用以下命令进行全局安装： npm install -g create-react-app 2、运行项目创建命令...*.ts", "coverage/lcov-report/*.js" ] } } 上述配置规则允许我们开发时使用 debugger 和 console，并且允许imports的导入和对象...二、手动创建 手动创建步骤比较繁杂，但是能够从0~1的那种体验，还是蛮有成就感的。...针对这个配置文件，让我们来逐步分解下： module.exports：声明 webpack 配置对象 mode：设置 webpack 当前为开发环境模式还是生产模式 entry：设置 webpack 从哪里开始寻找要捆绑的模块...今天的内容就到这里，我们学习了如何使用 create-react-app 和 手工的两种方式创建 React TypeScript3项目。

2.2K10

    • React环境搭建

    利用React脚手架create-react-app搭建项目 编写一个React计数组件 利用React脚手架create-react-app搭建项目 这里笔者例举两种利用create-react-app...搭建项目的方式 全局安装 npm i -g create-react-app create-react-app my-app cd my-app && npm start npx安装 npx create-react-app...npm i -g create-react-app只需要执行一次，后面你在任意目录执行create-react-app project就可以创建一个react项目的脚手架，这免去了开发者很多配置的工作。...npx安装需要的npm版本在5.2.0以上，它的原理大致是先去全局的node_modules下找找看有没有这个包，没有的话再去本地项目找找有没有这个包，还是没有就去远程拉一个最新的下来。...答案肯定是能写成那种形式，你能访问到那个对象，你给它加加有问题吗？但是从React设计理念上，这是非常暴力鲁棒的做法，你就想嘛，难道这个setState是放着让你看哒，很显然不是的。

    1.6K20

    create-react-app入门教程

    Quick Start（快速入门） 全局安装 首先确保你电脑上安装最新的 # 全局安装 npm install -g create-react-app # 构建一个my-app的项目 npx create-react-app...install node-sass --save $ # or $ yarn add node-sass 安装完之后，我们就可以直接把原来的CSS文件后缀直接改为 .scss 或者.sass,然后组件中导入的文件不再是...); } } export default App; 在sass文件中引入其他sass文件 引入src中的scss文件 @import 'styles/_colors.scss'; 引入node_modules...中的样式： @import '~nprogress/nprogress'; ~ 就代表： node_modules CSS Modules支持 导入CSS文件或者Sass文件的时候，可以用一个变量接收一下返回值...那么就可以运行以下命令进行分析最终打包的情况了： npm run build npm run analyze 其他react的默认配置 直接可以使用sass（安装node-sass模块后） 直接可以使用css（import） 直接可以导入

    2.4K21

    node_modules 困境

    npm解决方式 node 的解决方式是依赖的 node 加载模块的路径查找算法和 node_modules 的目录结构来配合解决的。 如何从 node_modules 加载 package？...版本重复会有问题吗？...root level 的 node_modules 里，这样各个 package 利用 node 的递归查找机制，可以导入其他 package，不需要自己进行手动的 link 将各个 package 里...这种依赖（听说过其他语言有 node_modules hell 的问题吗），其他语言也很少有这种递归查找依赖的做法，所以其他语言很多都采用了全局store的管理系统。...，我们只能选择将所有 package 的在 root-level 的 node_modules 一起打包 由于各个 package 是通过软链来实现互相支持导入的，这导致即使我们打包了 node_modules

    1.8K51

    React.js基础知识总结一

    进行合并压缩 -> webpack来完成以上页面组件合并、JS/CSS编译加合并等工作 React.js怎么运行（一般不会自己配置WebPack，太麻烦了） 一般需要使用官方脚手架 1、安装 npm i create-react-app...-g 安装这个就可以命令安装项目了 2、使用：creact-react-app 【项目名称】 脚手架生成目录主要内容 node_modules 当前项目中依赖的包都安装在这里 .bin 本地项目中可执行命令...CSS样式或者IMG图片等内容，我们有两种方式： 1.在JS中基于ES6 Module模块规范，使用import导入，这样webpack在编译合并JS的时候，会把导入的资源文件等插入到页面的结构中（绝对不能在.../或者…/，导入资源，因为在webpack编译的时候，地址就不在是之前的相对地址了） 2.如果不想在JS中导入（JS中导入的资源最后都会基于WEBPACK编译），我们也可以把资源手动的在HTML中导入，...脚手架为了让结构目录清晰，把安装的webpack及配置文件都集成在了react-scripts模块中，放到了node_modules中 但是真实项目中，我们需要在脚手架默认安装的基础上，额外安装一些我们需要的模块

    1.9K30

    如何解决React官方脚手架不支持Less的问题

    环境准备 本小节先用 create-react-app 构建一个全新的 React 项目作为实验环境。...如果您之前未曾使用过 create-react-app，请先通过如下命令全局安装（假定您本机已经安装了 Node.js）： npm install -g create-react-app 然后，通过如下命令构建一个新的项目...最终项目结构： ┌─node_modules ├─public ├─src ├─.gitignore ├─package.json ├─README.md └─yarn.lock...同时，被其集成的脚本和配置也会从程序目录中消失 ，程序目录也会变得干净许多。 如果我们要自定义环境配置怎么办？...less 文件，取名为Test.less： @title-color:#f00; .App-title { color: @title-color } 然后在App.js文件中通过如下API导入上述的

    1.9K30

    React源码学习进阶篇（一）新版React如何调试源码？

    ❝React 16版本之后，对源码架构进行了较大的升级调整，项目从gulp/grunt迁移到rollup，采用多包构建的方式组织代码，我们常常debug的是打包后的文件，本文可以解决我们想debug到源码的问题...❞ 使用create-react-app创建项目 npx create-react-app react-debug 此时，我们如果打一个debugger，会发现调用堆栈是bundle.js： image.../react/build/node_modules/react-dom/umd/react-dom.development.js'), 'react$': path.resolve(__.../react/build/node_modules/react/umd/react.development.js'), } 这时跑起来我们发现有报错： image-20220902205300771...文件已经生成到目录下： image-20220902211113714 此时我们在VSCode中开启debug就完全可以看到源码堆栈了： image-20220902212829836 （如果看不到的话，确认下create-react-app

    1K20

    使用mono-repo实现跨项目组件共享

    本文会分享一个我在实际工作中遇到的案例，从最开始的需求分析到项目搭建，以及最后落地的架构的整个过程。最终实现的效果是使用mono-repo实现了跨项目的组件共享。...那客户自助交水电费需要登陆吗？不需要！跟国内差不多，只需要输入卡号和姓名等基本信息就可以查询到账单，然后线上信用卡就付了。所以客户界面不需要登陆和用户管理。...admin-site：柜员站点，需要能够运行，使用create-react-app创建吧 customer-site：客户站点，也需要运行，还是使用create-react-app创建 创建子项目可以使用...另外两个可运行站点都用create-react-app创建了，在packages文件夹下运行： npx create-react-app admin-site; npx create-react-app...如果我说这个错误是我预料之中的，你信吗

    3.1K41

    三面面试官：运行 npm run xxx 的时候发生了什么？

    面试官：停停，我问的不是从URL输入到页面展现到底发生什么？，是npm run xxx的时候，发生了什么。...不对吗，对哦，我想起来了）： 因为 直接执行vue-cli-service serve，会报错，因为操作系统中没有存在vue-cli-service这一条指令 [image.png] [image.png...我：喂，面试官，您好，我已经找到答案了，可以麻烦您再听一下吗？ 面试官：嗯，可以啊，请讲。...我（窃喜，这个我们刚刚也讨论了）：我们可以直接在新建的vue项目里面搜索vue-cli-service [image.png] 可以看到，它存在项目最外层的package-lock.json文件中 从...假如我们在安装包时，使用 npm install -g xxx 来安装，那么会将其中的 bin 文件加入到全局，比如 create-react-app 和 vue-cli ，在全局安装后，就可以直接使用如

    1.4K30
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券